Components介紹

  • 在html中，Element是個相當重要的東西，從大至一整個頁面、小至一個按鈕，都屬於Element
  • 而對於React，我們去思考哪些Elements的重複性較高，利用JSX語言去建立一個Elements的集合，也稱之為Components(組件)
  • 開啟src/index.js，可以看到以下程式碼 : 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    ReactDOM.render(
        //第一個 Element
        <React.StrictMode>
            <App />
        </React.StrictMode>,

        //第二個 Element
        document.getElementById('root')
    );
  • 其中，<React.StrictMode>...</React.StrictMode>與document.getElementById('root')都是Element，而利用ReactDOM.render，將第一個Element放進第二個Element中

接下來，我們來分開說明兩個Element的意義

<React.StrictMode>與<App/>

  • 第一個Element包含了<React.StrictMode>與<App /> :
    1. React.StrictMode(嚴格模式) :
      • 是一個用以標記出應用程式中潛在問題的工具，在不渲染任何真實UI的狀況下，為其子元素觸發額外的檢查與警告
    2. App :
      • 在index.js中有以下這行程式碼 : 
        1
        import App from './App';
      • 接著開啟App.js，可以看到function App(){...}，而這個函式就是回傳了一個Element
      • 總結來說，就是我們將要呈現的內容寫在App.js中，並import到index.js裡去做使用
      • 另外在App.js的最後面可以看到 : 
        1
        export default App;
      • 由於我們要回傳App這個Element，所以還要另外做Export的動作喔!
  • 補充 :
    • 如果你對html很熟悉的話，會發現在App()函式中回傳的Element，相當類似html的語法
    • 而這個就是上面所提及的JSX，此語法跟html長得差不多，但有個差異需要注意!
    • 因為在JavaScript中的class已經是保留關鍵字了，所以原本在html語法的的<class=...>在JSX中就被轉換成<className=...>

document.getElementById(‘root’)

  • 開啟public/index.html，其中可以看到這行程式碼 
    1
    <div id="root"></div>
  • 如果你對原生JS有一點了解的話，應該看得出來在index.js中的document.getElementById('root')就是指定html程式碼中id為root的Element，而這裡便是指定上述的<div>作為目標
  • 整體來看，我們就是將第一個Element指定到這個div中!

總結

  • OK! 我們這次認識到了Components的原理與簡單分析了其中程式碼的作用!
  • 下次將開始介紹在JSX要如何使用動態值(dynamic values)嘍!

引用與參考資料

  1. [筆記][React]關於Components的那件小事
  2. 严格模式(Strict Mode)