細看 App component

接下來，進到 src 資料夾內的 App.js
根據先前提到 component 的種類，可以知道 App 是一個 function component
(function component 看起來就像是一般的 js function)

前幾行都是 import 最後一行是 export，import 跟 export 是 js es6 中的語法
會在後面的篇幅說明

簡單來說就是匯入 react 預設好的內容來建立 react component

import React from 'react';

匯入圖片 / css的位置

import logo from './logo.svg';
import './App.css';

先前提到 component 的命名以 大寫 為開頭
而搭配 component 的 css 檔，也建議與 component 同名

繼續往下看..
App component 看起來就像普通的 function
return 的值 看起來像是 html tag，但又有點些許不同..
這部分是 react 專屬的語法，叫做 jsx

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>...</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

JSX 是什麼

• js 語言的一種衍生語法 ( javascript syntax extension )
• 混和 html跟 javascript 型態的 xml (js + XML)
• jsx 並不是正式的 js ，要依賴 babel 來 進行轉譯
• 其實就是用 js 的變數來儲存 html markups

要在 jsx 內顯示 動態的值 (dynamic value) 用 {} (curly braces) 包起來

試著加點東西到 App component 內

在 App.js return 的 jsx 添加 一個文字段落

<p>加個新的段落看看</p>

卻發現馬上跑出錯誤..

一次只能 return 一個東西 以及 React.Fragments

顯然，return一次只能回傳 一個東西
試著將 <div></div> 分別加入到 <div className="App"> 跟 剛剛新增的 </p> 後
存檔後 開啟開發者工具，可以發現產生了新的 <div>
將所有元素都包在其中，但也因此多增加了一個 DOM 元素

要是想要在 component 中 return 多個 element，但又不希望因此多增加 DOM 節點的話
可以用 jsx 專屬的 blank tag 也就是 Fragments
Fragments 看起來就像 空的 html 標籤元素

return (
    <>
       <div className="App">...</div> 
    </>
)

經過編譯後，並不會額外再產生 DOM 元素

index.js 中的 ReactDOM

App.js 中執行了 component 的宣告(declaration)，但到底是誰把 App component 插入到頁面中 id='root'的位置？
進到 index.js 中，會看到這行

import ReactDOM from 'react-dom';

什麼是ReactDOM?

ReactDOM 是 react 中用來提供 DOM 特定方法的 package，通常會在應用程式的最頂層(top level)中使用，提供了有效管理跟操控 DOM 的方法，ReactDOM 中提供了幾個方法

• render()
• findDOMNode()
• unmountComponentAtNode()
• hydrate()
• createPortal()

針對這裡執行的 ReactDOM.render 做說明

ReactDOM.render

ReactDOM.render 是 ReactDOM 中用來將 component 或 JXS 片段 render 到 DOM 中，回傳的值為 reference of component 的方法(如果是 stateless component 則回傳的值是 null)
如果先前 react element 已被渲染到容器裡，這個方法會針對 react element 做更新，並只有在必要的時候才會變更 DOM 以反映 react element

ReactDOM.render 接受三個 parameter

• element: 要被渲染出來的 JSX 表達式或 react element(component)
• container: 插入 element 的 DOM 位置
• callback: 選擇性的 parameter，當 component 被渲染或更新後才會被執行

ReactDOM.render(element , container[ ,callback] )

藉由 ReactDOM.render 將 <App> append 到頁面中 id='root' 這個DOM 內

快速了解了 App component 跟將 App component 渲染到頁面上的機制
下一步來試著把 App component 從 functional component 改寫成 class component