React.js 16 從入門到實戰

王金柱

對JavaScript語言、jQuery框架、Node.js、React等Web前端開發有著獨到的經驗，並精通HTML/XHTML、CSS與PHP等開發語言的應用。
有著10多年豐富的IT從業經歷，完成過多家大型央企與上市公司的企業級Web系統平台項目的前端模塊開發工作。

目 錄
第1章 React簡介 1
1.1 React概述 1
1.2 React優勢 1
1.3 第一個React應用 2
1.4 React腳手架 5
1.4.1 關於React腳手架 5
1.4.2 Node.js與npm 6
1.4.3 Webpack模塊打包器 7
1.4.4 ES6和Babel 7
1.4.5 使用create-react-app腳手架開發第一個應用 8
1.4.6 React項目架構 9
1.5 React虛擬DOM 10
1.6 JSX簡單入門 14
1.7 React渲染機制 16

第2章 React JSX 19
2.1 JSX介紹 19
2.2 JSX獨立文件 19
2.3 JSX算術表達式 21
2.4 JSX條件表達式 23
2.5 JSX嵌入表達式 24
2.6 JSX對象表達式 26
2.7 JSX函數表達式 28
2.8 JSX增強函數表達式 29
2.9 JSX數組表達式 32
2.10 JSX樣式表達式 33
2.11 JSX註釋表達式 35

第3章 React組件與Props 37
3.1 React組件介紹 37
3.2 React函數組件 38
3.3 React類組件 39
3.4 React組合組件 42
3.5 React Props介紹 45
3.6 React Props應用 47
3.7 React Props只讀性 49
3.8 React Props默認值 52
3.9 React組件切分與提取 54

第4章 React State與生命週期 63
4.1 React State介紹 63
4.2 關於定時器時鐘的思考 65
4.3 開始封裝時鐘UI 66
4.4 實現時鐘UI的自動更新 68
4.5 自我更新的時鐘UI類 69
4.6 在時鐘組件類中引入State狀態 72
4.7 React生命週期介紹 76
4.8 在時鐘組件類中使用生命週期 77
4.9 正確的使用State狀態 79
4.10 自頂向下的數據流 84

第5章 React事件處理 92
5.1 React事件介紹 92
5.2 React單擊事件 94
5.3 React阻止事件默認行為 97
5.4 React類的事件處理方法 99
5.5 綁定回調方法的其他方式 101
5.6 在事件處理方法中傳遞參數 105
5.7 實戰：開關按鈕 109
5.8 React文本框事件 113
5.9 實戰：水溫監控控件 117

第6章 React條件渲染 122
6.1 React條件渲染介紹 122
6.2 元素變量的條件渲染 125
6.3 邏輯“與”運算符的條件渲染 133
6.4 邏輯“或”運算符的條件渲染 135
6.5 三元邏輯表達式的條件渲染 137
6.6 實戰：改進登錄組件 139
6.7 阻止組件渲染 142

第7章 React列表與Key 145
7.1 React列表介紹 145
7.2 基礎列表組件 147
7.3 多級列表組件 149
7.4 React Key介紹 152
7.5 React Key使用 155
7.6 React通過Key提取組件 157
7.7 React Key局部唯一性 162
7.8 React Key有效性 164

第8章 React表單 168
8.1 React表單介紹 168
8.2 表單受控組件 171
8.3 強制轉換大寫字母 177
8.4 校驗手機號碼格式 181
8.5 格式化序列號 187
8.6 文本域關鍵字 190
8.7 下拉列表受控組件 194
8.8 處理多個輸入 197
8.9 React表單提交操作 200
8.10 React表單提交服務器 205
8.11 受控組件與非受控組件 210

第9章 組合與繼承 215
9.1 組合與繼承概述 215
9.2 定義組件容器 215
9.3 定義子組件 216
9.4 自定義Props屬性 221
9.5 特例關係組合 223
9.6 類組合方式確認框 225

第10章 狀態提升 229
10.1 設計構想 229
10.2 實現水溫監控功能 230
10.3 加入第二個水溫輸入框 233
10.4 同步二個水溫輸入框 237
10.5 將水溫“狀態共享” 240
10.6 將水溫“狀態提升” 244
10.7 實現水溫同步換算 249

第11章 React擴展 255
11.1 Node.js與React 255
11.2 Babel與React 256
11.3 Webpack模塊打包器 257
11.4 Node+Babel+Webpack搭建React環境 261
11.5 Browserify模塊打包器 268
11.6 React Router與單頁面應用 271
11.7 Redux與React 273

第12章 實戰1：基於React + Redux 實現計數器應用 279
12.1 設計思想 279
12.2 計數器應用頁面 280
12.3 主入口模塊 281
12.4 視圖模塊 282
12.5 Action定義 285
12.6 Reducer設計 285
12.7 計數器應用測試 286

第13章 實戰2：基於React+Redux 實現計算器應用 289
13.1 設計思想 289
13.2 計算器應用頁面 290
13.3 主入口模塊 291
13.4 視圖模塊 292
13.5 Action定義 296
13.6 Reducer設計 297
13.7 計算器應用測試 299

第14章 實戰3：基於Provider容器組件重構計算器應用 301
14.1 設計思想 301
14.2 主入口模塊 303
14.3 App組件 303
14.4 視圖模塊 305
14.5 Action定義 309
14.6 Reducer設計 309
14.7 重構的計算器應用測試 312

第15章 實戰4：基於Redux 實現任務管理器應用 313
15.1 設計思想 313
15.2 任務管理器應用頁面 314
15.3 主入口模塊 315
15.4 App組件 315
15.5 AddTodo組件 316
15.6 VisibleTodoList組件 317
15.7 Footer組件 320
15.8 Action定義 322
15.9 Reducer設計 323
15.10 任務管理器應用測試 325

第16章 實戰5：基於React+Router+Redux 的網站架構 328
16.1 設計思想 328
16.2 網站架構應用頁面 329
16.3 主入口模塊 330
16.4 App組件 330
16.5 Reducer設計 332
16.6 視圖組件 335
16.7 Action定義 338
16.8 網站架構應用測試 339