入手原因
- 新公司需要。
- 在之前找工作過程中感覺到react確實在國內的使用場合更多一點。
- 學習嘛，不能停。
環境搭建
用webpack一套標準的搭建流程，具體搭建還是跟隨着官方文檔中的自己構建工具鏈來一步一步搭起來的。大致分爲幾個步驟
1. 初始化npm和git（如果需要）；
2. 構建大致文件結構；
3. 配置babel，安裝babel下的core、cli、preset-env、preset-react，配置 .babelrc 文件
4. 配置webpack，這裏從實際項目出發，發現普遍的做法是將webpack內容中的不同部分拆分出一個單獨的文件夾。方便管理和編寫很多。
5. 安裝react，react-dom
6. 配置熱更新，對應的包叫做react-hot-loader
7. 寫config中的script，配置開發指令。
基礎學習
基礎組件方面沒有太多難點。有幾個需要注意的點在這裏列一下。
- JSX就是一個可以帶着HTML標籤的表達式，其中HTML標籤內再引用變量需要用{}括起來。
- 元素渲染是用ReactDOM.render()來執行的，傳入參數分別是渲染成什麼和渲染到哪。
- 函數就可以作爲組件，當然類更好（之後因爲有hooks的存在，所以推薦還是用函數組件）
- 數據是單向流動的，這個和vue一樣，數據通過props從父到子傳播。
- 狀態state之前一般定義在class上（現在有hooks了）基本上是在構造函數的時候新建this.state屬性，給這個組件增加class。修改屬性要調用this.setState()來修改。
- 生命週期：他的生命週期一般叫做DidMount、Unmount等。
- 事件處理：記着要在構造函數中新增綁定bind來確保調用時候的this指向。
- 條件渲染：因爲這裏很多都是js直接寫，所以通過return不同值直接改變會返回的內容。因此可以用一些短路（&&）或者三元運算符等進行操作。return null會默認不渲染，但是他的生命週期還是會走一遍。
- 列表用map去遍歷，挨個返回元素就好。注意，每個列表具體項都應該對應一個key以便tree shaking
- 表單：還要再看。
- 狀態提升：從來都是用傳入的props來作爲數據來源，用來使用統一的數據來源。
- 組合繼承：可以通過props.children來獲取組件被組件包裹的子組件。
hooks應用
今天明確的會用了兩個hooks
- 用來修改state的自帶hook stateHook，他的存在就是爲啥現在可以不用class去寫了。再函數組件內可以調用useState(default)來新建這個組件的state，返回第一個數屬性名，第二個是設置屬性方法。
- context 這個是一個全局的狀態。其實之後再reduce裏面還會多次看到這個鉤子。新建context是使用React.createContext來創建，他會產生一個新的全局state對象。在<myContext.Provider>中包裹的內容會在其值改變的時候重新渲染，也可以通過組件函數的.contentType來掛載給class組件。組件內使用context需要調用對應的context（就是調用create的時候的返回值）