前言:
react 是啥 ?
React 是 facebook 開發的一個 JS 函式庫，負責產生與管理前端的 UI 。並不是框架，
react 特色
- 用純 JS 在前端產生 HTML （一般來說是在後端產生 HTML 送到前端）
- 使用 Virtual DOM，重繪時效率高
- 自定義 Component，方便開發 (可以說react 就是由 component 組成)
- 父子 Component 可透過 props 通訊
- 只負責 MVC 的 View 部份，所以不算框架，彈性高
- 因為完全是 JS 操作 UI 的關係，使得它可以跟後端分離，達到即時互動、自動更新的效果
- 只是一個 JS 函式庫，所以容量小易移植
React 安裝
剛剛前言介紹過了 ， react 不是框架，只是一個 lib 函式庫，所以要讓專案可執行 react 就執行以下
Virtual DOM
虛擬 DOM ，使用 JS 打造的虛擬中界層
前言介紹過 react 的特色可以達到JS 操作 UI 畫面來即時更新，而這是因為 Virtual DOM 技術。
傳統重繪DOM時，每當變更一次就需要整個重繪一次。
而 React 在需要重繪 DOM，會先藉由在 Virtual DOM 重繪，然後再使用 diff 演算法將 Virtual DOM 跟實際 DOM 比對，再去修改不同的地方達成只重繪一次，
而 Virtual DOM 重繪是使用 Js ，所以重繪速度非常快，跟傳統 DOM 重繪差非常多。
JSX
JS / ECMAScript 對 XML 的擴充語法，以 XML-like 的語法表達 JS 產生元件的函數
為什麼用 JSX
React 是以純 js 來產生 html，但使用原生 js 寫會很麻煩，所以我們可以是用 JSX 來寫程式並使用babel 來編譯，如下
JSX 怎麼寫
HTML :
- html class 屬性在 jsx 需改寫為 className
- html for 屬性在 jsx 需改寫為 htmlFor
- 所有 tag 都要閉合 ⇒ <br> 要寫成 <br />
- 註解可以用 /**/ 或 // ，在tag 中使用的話用大括弧包住
- 事件觸發使用駝峰式命名法 ( focus 事件為 onFocus )
- style 屬性要以 JS 物件的格式設定 (JSON)，使用 {{ }} 包住
JS:
- js 語法在 jsx 皆可使用 ，而要在 tag 中使用 js 語法時，請使用 { } 包住
- 可以用 class 自定義 Component 來使用 ( 第一個字母需要為大寫 )
Babel
react 可以使用 jsx 寫，而 Babel 是 jsx 轉成 js 的工具
使用方法:
在專案目錄下新增 .babelrc 檔案，內容為: