元件:

React的是希望你把許多功能都元件化，元件化後可以重覆使用，而JSX則是元件化一個很重要的工具。但不像前幾天講的，jsx的資料放到某變數中，再把變數放到ReactDOM.render()中再回傳到index.html。

而是我們將一組一組的jsx做成元件，我們再呼叫它，放到index.js中。

那什麼是元件呢?應該就是一個模組算是一個元，而一個模組是，一個或數個tag所組成。(按鈕，文字方塊，及圖片)

一個模組吧!!像底下這些

那當然你可以一頁網頁算一個元件，也可以一個TAG算一個元件。
如下:

而元件中還是可以再放元件。像下圖就有四個元件

主要就是你覺得這樣可以當一個模組，就可以將它做成一個元件。

實作:

1.把Hello page1做成一個元件放在/components/Page1.js裡

/components/Page1.js

import React from 'react';

const Page1=()=>{
    return( 
        <div>Hello page1</div>
        );
}
export default Page1;

1.引用page1元件

import Page1 from './components/Page1.js';

2.在ReactDOM.render中放入使用該元件

ReactDOM.render(
  <React.StrictMode>
    <Page1 />    
  </React.StrictMode>,
  document.getElementById('root')
);

index.js

import React from 'react';
import Page1 from './components/Page1.js';

ReactDOM.render(
  <React.StrictMode>
    <Page1 />    
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

圖片資料來源:https://tinybot.cc/
圖片資料來源:https://ithelp.ithome.com.tw/