React.js快速入門 — (2)Overview
Overview — React.js的概觀，針對16.8版後的React.js所製作的新手入門上手文章
在這裡我們要些提到React.js的整體概念，先了解React.js的大方向。若在這有不懂的地方可以往後看幾個章節，再回來複習。
檔案架構
以往我們在學網頁的時候必須把HTML、Javascript檔案切得越清楚越好，並且將同屬性檔案放在同一個資料夾。但是當專案越來越龐大的時候，會難以辨認這些檔案到底在描述哪個元件。
React 關注點分離的方法是將其拆分為很多同時包含 UI 與邏輯的 component，而彼此之間很少互相依賴。
如同官方所說的，React.js不是以副檔名為單位。是將HTML、Javascript融合到 .js 過後，以自己創造出來的區塊 — 也就是所謂的Component — 為單位 (Component將在下下篇介紹)。如此一來所有這個區塊需要的功能跟內部排版都寫在一起。
所以從封面圖示來看Create-React-App所產生的專案， index.js、 App.js 都是一個個Component，將HTML跟Javascript整合在 .js 裏頭。不過有些人會將這些檔案從 src 抽離，並且新增資料夾成 ./components/index/index.js 與 ./components/App/App.js 以便管理。
在React.js最上層，總要有一個顯示出畫面的檔案，這個檔案就叫做 ./public/index.html 它會綁定最高層的Component。
最簡單的例子 — Hello World!
一個最簡單官方例子在這，它描述了React.js應該使用到的東西：
- HTML方面長這樣，這個也是綁定最高層Component的地方：
<div id="root"></div>2. Javascript方面長這樣
const Hello = <h1>Hello, World!</h1>;
// 協助輸出的函式
ReactDOM.render(
// 綁定的變數
Hello,
// 要綁到HTML的哪個id
document.getElementById('root')
);
這裡的 Hello 是用JSX組成的Element(請先記住這個詞)，我只要在Javascript直接宣告一個像HTML結構的內容，並且再呼叫一些React.js函式協助它輸出，就可以得到我們想輸出的網頁。
而當Element在函式 return就是所謂的Component：
function Hello(props){
return <h1>Hello, World!</h1>;
}
ReactDOM.render(
//用函式型式的表達方式
<Hello/>,
document.getElementById('root')
);再次強調，若在這有不懂的地方可以往後看幾個章節，再回來複習。
生命週期
在上面已經提到了，component、 render 這些字眼，在這邊我們說明一下React.js的總覽流程。當有一個Component被生成(construct)的時候，是掛載階段。若是有資料被更新時(props與setState字眼會在第五章看到)，則是屬於更新時。卸載簡單來講就是關掉網頁或是不用到某個Component時會發生的。
藍色部分將會在 (4)Component 章節經常看到；綠色則是會在 (5)Prop&State&Hook 章節看到。至於黃色部分，偏進階概念不做太多著墨，但是會在這系列的程式碼有機會看到 DOM 的字眼。
所有事情只要產生改變一定會進入 render 。若有呈現到網頁，都一定會不斷刷新到網頁上。
與下一篇銜接
講完上方所有後，你一定會還是會納悶，怎麼HTML的東西可以直接在Javascript寫成這樣？這玩意兒就是React.js裡的功能 — JSX，將在下一篇介紹。
喜歡的話可以給我一點掌聲唷！
上一篇：React.js快速入門 — (1)Guideline & Create-React-App
下一篇：React.js快速入門 — (3)JSX
