iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
0
自我挑戰組

React基礎系列 第 6

第六天, React 元件

元件:

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/


上一篇
第五天,建立一個React的新專案Create React App
下一篇
第七天,React 關於JSX
系列文
React基礎12

尚未有邦友留言

立即登入留言