React.js 16從入門到實戰(zhàn)

目 錄

第1章 React簡介 1
1.1 React概述 1
1.2 React優(yōu)勢 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腳手架開發(fā)第一個應用 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函數(shù)表達式 28
2.8 JSX增強函數(shù)表達式 29
2.9 JSX數(shù)組表達式 32
2.10 JSX樣式表達式 33
2.11 JSX注釋表達式 35

第3章 React組件與Props 37
3.1 React組件介紹 37
3.2 React函數(shù)組件 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 實現(xiàn)時鐘UI的自動更新 68
4.5 自我更新的時鐘UI類 69
4.6 在時鐘組件類中引入State狀態(tài) 72
4.7 React生命周期介紹 76
4.8 在時鐘組件類中使用生命周期 77
4.9 正確的使用State狀態(tài) 79
4.10 自頂向下的數(shù)據(jù)流 84
第5章 React事件處理 92
5.1 React事件介紹 92
5.2 React單擊事件 94
5.3 React阻止事件默認行為 97
5.4 React類的事件處理方法 99
5.5 綁定回調(diào)方法的其他方式 101
5.6 在事件處理方法中傳遞參數(shù) 105
5.7 實戰(zhàn)：開關按鈕 109
5.8 React文本框事件 113
5.9 實戰(zhàn)：水溫監(jiān)控控件 117
第6章 React條件渲染 122
6.1 React條件渲染介紹 122
6.2 元素變量的條件渲染 125
6.3 邏輯“與”運算符的條件渲染 133
6.4 邏輯“或”運算符的條件渲染 135
6.5 三元邏輯表達式的條件渲染 137
6.6 實戰(zhàn)：改進登錄組件 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章 狀態(tài)提升 229
10.1 設計構想 229
10.2 實現(xiàn)水溫監(jiān)控功能 230
10.3 加入第二個水溫輸入框 233
10.4 同步二個水溫輸入框 237
10.5 將水溫“狀態(tài)共享” 240
10.6 將水溫“狀態(tài)提升” 244
10.7 實現(xiàn)水溫同步換算 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環(huán)境 261
11.5 Browserify模塊打包器 268
11.6 React Router與單頁面應用 271
11.7 Redux與React 273
第12章 實戰(zhàn)1：基于React + Redux 實現(xiàn)計數(shù)器應用 279
12.1 設計思想 279
12.2 計數(shù)器應用頁面 280
12.3 主入口模塊 281
12.4 視圖模塊 282
12.5 Action定義 285
12.6 Reducer設計 285
12.7 計數(shù)器應用測試 286
第13章 實戰(zhàn)2：基于React+Redux 實現(xiàn)計算器應用 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章 實戰(zhàn)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章 實戰(zhàn)4：基于Redux 實現(xiàn)任務管理器應用 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章 實戰(zhàn)5：基于React+Router+Redux 的網(wǎng)站架構 328
16.1 設計思想 328
16.2 網(wǎng)站架構應用頁面 329
16.3 主入口模塊 330
16.4 App組件 330
16.5 Reducer設計 332
16.6 視圖組件 335
16.7 Action定義 338
16.8 網(wǎng)站架構應用測試 339