components讓你分割UI到單一元件可重復使用，每一個component都是相互隔離並獨立。但也要程式切的好才有可能達到上述功能，簡單來說儘量達到單一職責，不要把所有東西都塞在單一的component裡。

說到這還不知道components到底是什麼東西，其實就像是JavaScript functions。它可以接受任意參數(傳入參數react稱為props)並且回傳React element。初步學習直接拿建出來程式碼直接修改src/index.js

components functional

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

function SayHi(props) {
  return <h1>Hi, {props.name}</h1>;
}

const people = {"name": "John"};

ReactDOM.render(SayHi(people), document.getElementById('root'));
registerServiceWorker();

你也可以使用ES6 class去定義component，原本的SayHi函數改寫為單一檔案src/SayHi.js要記得export出來，並在src/index.js做import的動作才呼叫得到。

src/SayHi.js

import React, { Component } from 'react';

class SayHi extends React.Component {
  render() {
    return <h1>Hi, {this.props.name}</h1>;
  }
}

export default SayHi;

使用者定義component，它傳進去的參數事實上把JSX attributes傳到component，傳進去的參數就是props object，底下標籤的name傳進component，就是this.props.name。

<SayHi name="John" />

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import SayHi from './SayHi';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<SayHi name="John" />, document.getElementById('root'));
registerServiceWorker();

localhost:3000_輸出結果

總結上述案例:

1. 我們呼叫ReactDOM.render()去描繪SayHi元件
2. 呼叫SayHi元件並傳遞{"name": "John"}
3. SayHi元件回傳<h1>Hi, {this.props.name}</h1>
4. React DOM更新到root元素

React components除了可以單一使用外，也可以component再嵌入其它component，有點像是把一塊塊的component組成一大塊，所以設計元件時必須是低耦合才能重覆使用。

import React from 'react';
import ReactDOM from 'react-dom';
import SayHi from './SayHi';
import registerServiceWorker from './registerServiceWorker';

function Group() {
  return (
    <div>
      <SayHi name="John" />
      <SayHi name="Mary" />
      <SayHi name="Bill" />
    </div>
  );
}

ReactDOM.render(<Group />, document.getElementById('root'));
registerServiceWorker();