React介紹1
此篇文章參考 SuoChan 阿關技術筆記
React介紹
React 是一個專注於 UI（View）的 JavaScript 函式庫（Library）。
「框架」與「函式庫」的差異
使用「框架」的話，框架具有控制權，而身為這份軟體的開發者，開發者需要依照框架的設計把功能填上，填完的之後，程式便會照開發者的意思運作了；「函式庫」則是不同概念，它像是一個彈藥庫，裡面藏有各種武器供你使用，開發者有控制權去決定怎麼使用它們，甚至不使用。
把UI拆分成各個元件顯示的組合即為組件化開發。一個大網頁拆分成很多小小的獨立組件，再將編寫好的組件拼成一個完整的網頁，讓開發者可以重複使用這些組件，不必重複寫程式。
React.js 的兩大重點
- 宣告式 Declarative
在 React.js 中的 View 是採用宣告的方式並使用 Virtual DOM 的概念來進行綁定和渲染。它會在資料有變更時更有效率的自動更新並渲染 （Render）所有有產生變動的元件。
補充說明：Vue也有 Virtual DOM，概念一樣不過背後diff演算法不同。2. 元件式開發 Component-Based
React.js 是以元件為基礎來做開發的，因此開發者可以自行定義不同的元件並設定每個元件不同的狀態（state），以及透過傳送給子元件（props）的方式來進行資料的傳遞。基於這樣的元件基礎開發模式之下，開發者就可以將網站中會重複利用的東西（像是按鈕等）定義成一個元件，並針對不同用途或功能去做設定資料（像是按鈕上面的文字）。
建立新專案
打開終端機，先將位置移至Desktop，輸入：
npx create-react-app my-react-app
創建一個名為 my-react-app 的 React 應用。
cd my-react-app
npm start
此時瀏覽器的URL為 http://localhost:3000，並出現這個畫面。
看一下 index.js檔案
ReactDOM 是整個 React.js App 的進入點。App 所有的元件或參數都是由這個函式來進行渲染，目前綁定在一個 id 為 root 的 div 標籤。
JSX語法
JavaScript XML，是一個 JavaScript 的語法擴充，格式比較像是模版語言，可以在寫 React 的時候透過此語法來描述使用者介面的外觀，JSX看上去很像HTML。JSX與HTML最大的不同在於開發者可以在HTML中加入邏輯或者是動態變數。
另一範例：
使用 JSX 語法就可以將 UI 畫面和程式邏輯撰寫在一起（也就是結合 HTML 標籤和 JavaScript 邏輯），以減少程式碼的複雜程度和維護時的便利性。
JSX語法是特殊的語法擴充，所以一般的瀏覽器是沒辦法辨識JSX語法的。
這時候需要像是 Babel 等類似工具來轉譯成瀏覽器可以理解的JavaScript。
備註：使用 create-react-app 創建專案時，已有 Babel 等轉譯的設定所以可以直接使用。
- 使用
{}花括號去包 JavaScript Expression(表達式) - 由於
class是保留字，所以在JSX中要改為className
- CSS 中的屬性要使用駝峰式命名之外，在撰寫 style 的時候也必須使用 JavaScript 的物件格式。
- 根節點只能一個
React.js 的 v16.2.0 開始提供了 Fragment 的方法來解決必須要有一個根節點的問題- 在 JSX 中添加註釋使用 {/* */}
To be continued…
