Redux

Redux

Links

kdchang/reactjs101

React.Component

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// 使用範例：<ShoppingList name="Mark" />

在這裡，ShoppingList 是一個 React 的 component class，或 React component type。Component 會接受名為 props 的參數（「properties」的簡稱），並透過 render 這個方法回傳一個有階層架構的 view 到螢幕上。

render 方法回傳你想在螢幕上看到的描述。React 接收這個描述並展示其結果。其中，render 回傳的是一個 React element，也就是一個 render 內容的輕量描述。

大部分 React 的開發者會使用一種特殊的語法，被稱為「JSX」，因為它讓這些結構寫起來更容易。<div /> 語法在構建時被建立為

也可以不使用JSX，使用 createElement()

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

Start a project

npx create-react-app my-app
cd my-app
npm start
# or
yarn start

Hook

Hook 是一個讓你可以使用 React 各項功能的特殊 function

舉例來說，useState 是一個讓你增加 React state 到 function component 的 Hook。

import React, { useState } from 'react';

function Example() {
  // 宣告一個新的 state 變數，我們叫他「count」
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}