因為實務上的需要來熟悉 React，就趁機筆記一下從 Vue 3 轉 React Hooks 的一些細節差異。
內容
1. 畫面中的每一個區塊都是元件 ( Component )。一個網頁畫面可以依照自己的需要，切成多個元件
2. 元件名稱會用大寫駝峰的方式命名，並且是一個 arrow function
3. 開發時會用 babel 編譯，有些 html 字詞為了避免關鍵字衝突會作為調整，像是 className 代表 html 中的 class
4. inline-style 屬性會使用「物件」帶入；{ variable } 變數會用 {} 來表示
5. HTML 的多數是用小寫駝峰來寫
6. 函式別忘記要 return 內容，區域變數也如同 ES6 的定義來理解
7. 如果要讓畫面上的值有更新，那需要宣告要變化的變數 ( 如同 Vue3 的 ref )；透過 useState 來讓畫面更新 (這點跟 Vue3 不相同， React 沒有雙向綁定，需要額外透過 useState 方法來讓畫面更新 )
8. React 僅會更新畫面中有更換的地方 a.k.a. 資料驅動畫面
9. React 會用邏輯判斷子和三元表達式來簡化 if-else 的寫法
10. Vue 的 v-if 在 React 中可以改成在 Component 間用 { <條件> <邏輯運算子> ( <Component> )} 的型式來寫
11. 每個 Component 內的方法 ( 如同 Vue 的 Method ) 是可以共用的
12. 如果你的函式是帶有參數的話，那在撰寫時會因為 JS 的即時運行屬性而導致錯誤。這時你有兩種作法：將事件再用一個事件包覆，避免直接呼叫；函式可以回傳一個 arrow function 即可
13. 一個 JSX 只能有一個 root 元素 ( 跟 Vue2 年代相同 )；若有需要可以用 <></> (等同於 <React.Fragement> </React.Fragement> )
14. for 迴圈不會有回傳值，所以不能放在 JSX 中的 {} 去執行。通常要重複轉譯多個元件時，會使用 Array.map 方法。元件間建議要有 index ，如同 Vue 的 v-for, key 的概念
15. Hook 方法不能在 conditions, loops 和 nested functions 呼叫，因為 React Hooks 會去記錄其被呼叫的順序。不過 use 開頭的函式內部的方法就不在此限
