React is all about components

• React 元件能重複使用
• 小元件組成大元件
• React 元件是 JavaScript 函式

function Button (props) {
  // Returns a DOM element here. For example:
  return <button type="submit">{props.label}</button>;
}
// To render the Button component to the browser
ReactDOM.render(<Button label="Save" />, mountNode)

• render function 是重點。
• 元件以大寫開頭命名，以區別 HTML 及 React 元素
• 每個 React 元件接收許多參數，在 React 裡叫做 props。
• Button function 裡的東西叫 JSX

JSX

上面的範例也能寫成非 JSX 形式。

function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
}
// To use Button, you would do something like
ReactDOM.render(
  React.createElement(Button, { label: "Save" }),
  mountNode
);

• createElement function 是 React 7個頂級 API 之一。
• 為什麼第二個範例在 render 裡還要再呼叫一次 createElement? (因為這個值是要 React element，範例中是用 React.createElement() 寫法，也可以用 JSX 寫法 <Button label="Save" />比較常見。)

You can use JavaScript expressions anywhere in JSX

• Inside a JSX section, you can use any JavaScript expression within a pair of curly braces.
• 但是只限於一般的表達式，無法使用 if 之類的判斷式。

const RandomValue = () => 
  <div>
    { Math.floor(Math.random() * 100) }
  </div>;
// To use it:
ReactDOM.render(<RandomValue />, mountNode);

You can write React components with JavaScript classes

• 函式形的元件適合簡單的需求，但有時我們需要複雜的東西。React 支援 JavaScript class syntax.
• React.Component 是另一個頂級 API。
• 每當我們呼叫這個 class 的時候，就會產生一個 instance，在這個範例裡唯一的 render function 會回傳一個 button virtual DOM
• 因為是 JavaScript class，所以可以用 constructor和this

class Button extends React.Component {
  render() {
    return <button>{this.props.label}</button>;
  }
}
// Use it (same syntax)
ReactDOM.render(<Button label="Save" />, mountNode);