React.js 16從入門(mén)到實(shí)戰(zhàn)

目 錄

第1章 React簡(jiǎn)介 1
1.1 React概述 1
1.2 React優(yōu)勢(shì) 1
1.3 第一個(gè)React應(yīng)用 2
1.4 React腳手架 5
1.4.1 關(guān)于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腳手架開(kāi)發(fā)第一個(gè)應(yīng)用 8
1.4.6 React項(xiàng)目架構(gòu) 9
1.5 React虛擬DOM 10
1.6 JSX簡(jiǎn)單入門(mén) 14
1.7 React渲染機(jī)制 16
第2章 React JSX 19
2.1 JSX介紹 19
2.2 JSX獨(dú)立文件 19
2.3 JSX算術(shù)表達(dá)式 21
2.4 JSX條件表達(dá)式 23
2.5 JSX嵌入表達(dá)式 24
2.6 JSX對(duì)象表達(dá)式 26
2.7 JSX函數(shù)表達(dá)式 28
2.8 JSX增強(qiáng)函數(shù)表達(dá)式 29
2.9 JSX數(shù)組表達(dá)式 32
2.10 JSX樣式表達(dá)式 33
2.11 JSX注釋表達(dá)式 35

第3章 React組件與Props 37
3.1 React組件介紹 37
3.2 React函數(shù)組件 38
3.3 React類(lèi)組件 39
3.4 React組合組件 42
3.5 React Props介紹 45
3.6 React Props應(yīng)用 47
3.7 React Props只讀性 49
3.8 React Props默認(rèn)值 52
3.9 React組件切分與提取 54
第4章 React State與生命周期 63
4.1 React State介紹 63
4.2 關(guān)于定時(shí)器時(shí)鐘的思考 65
4.3 開(kāi)始封裝時(shí)鐘UI 66
4.4 實(shí)現(xiàn)時(shí)鐘UI的自動(dòng)更新 68
4.5 自我更新的時(shí)鐘UI類(lèi) 69
4.6 在時(shí)鐘組件類(lèi)中引入State狀態(tài) 72
4.7 React生命周期介紹 76
4.8 在時(shí)鐘組件類(lèi)中使用生命周期 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阻止事件默認(rèn)行為 97
5.4 React類(lèi)的事件處理方法 99
5.5 綁定回調(diào)方法的其他方式 101
5.6 在事件處理方法中傳遞參數(shù) 105
5.7 實(shí)戰(zhàn)：開(kāi)關(guān)按鈕 109
5.8 React文本框事件 113
5.9 實(shí)戰(zhàn)：水溫監(jiān)控控件 117
第6章 React條件渲染 122
6.1 React條件渲染介紹 122
6.2 元素變量的條件渲染 125
6.3 邏輯“與”運(yùn)算符的條件渲染 133
6.4 邏輯“或”運(yùn)算符的條件渲染 135
6.5 三元邏輯表達(dá)式的條件渲染 137
6.6 實(shí)戰(zhàn)：改進(jìn)登錄組件 139
6.7 阻止組件渲染 142
第7章 React列表與Key 145
7.1 React列表介紹 145
7.2 基礎(chǔ)列表組件 147
7.3 多級(jí)列表組件 149
7.4 React Key介紹 152
7.5 React Key使用 155
7.6 React通過(guò)Key提取組件 157
7.7 React Key局部唯一性 162
7.8 React Key有效性 164
第8章 React表單 168
8.1 React表單介紹 168
8.2 表單受控組件 171
8.3 強(qiáng)制轉(zhuǎn)換大寫(xiě)字母 177
8.4 校驗(yàn)手機(jī)號(hào)碼格式 181
8.5 格式化序列號(hào) 187
8.6 文本域關(guān)鍵字 190
8.7 下拉列表受控組件 194
8.8 處理多個(gè)輸入 197
8.9 React表單提交操作 200
8.10 React表單提交服務(wù)器 205
8.11 受控組件與非受控組件 210
第9章 組合與繼承 215
9.1 組合與繼承概述 215
9.2 定義組件容器 215
9.3 定義子組件 216
9.4 自定義Props屬性 221
9.5 特例關(guān)系組合 223
9.6 類(lèi)組合方式確認(rèn)框 225

第10章 狀態(tài)提升 229
10.1 設(shè)計(jì)構(gòu)想 229
10.2 實(shí)現(xiàn)水溫監(jiān)控功能 230
10.3 加入第二個(gè)水溫輸入框 233
10.4 同步二個(gè)水溫輸入框 237
10.5 將水溫“狀態(tài)共享” 240
10.6 將水溫“狀態(tài)提升” 244
10.7 實(shí)現(xiàn)水溫同步換算 249
第11章 React擴(kuò)展 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與單頁(yè)面應(yīng)用 271
11.7 Redux與React 273
第12章 實(shí)戰(zhàn)1：基于React + Redux 實(shí)現(xiàn)計(jì)數(shù)器應(yīng)用 279
12.1 設(shè)計(jì)思想 279
12.2 計(jì)數(shù)器應(yīng)用頁(yè)面 280
12.3 主入口模塊 281
12.4 視圖模塊 282
12.5 Action定義 285
12.6 Reducer設(shè)計(jì) 285
12.7 計(jì)數(shù)器應(yīng)用測(cè)試 286
第13章 實(shí)戰(zhàn)2：基于React+Redux 實(shí)現(xiàn)計(jì)算器應(yīng)用 289
13.1 設(shè)計(jì)思想 289
13.2 計(jì)算器應(yīng)用頁(yè)面 290
13.3 主入口模塊 291
13.4 視圖模塊 292
13.5 Action定義 296
13.6 Reducer設(shè)計(jì) 297
13.7 計(jì)算器應(yīng)用測(cè)試 299

第14章 實(shí)戰(zhàn)3：基于Provider容器組件重構(gòu)計(jì)算器應(yīng)用 301
14.1 設(shè)計(jì)思想 301
14.2 主入口模塊 303
14.3 App組件 303
14.4 視圖模塊 305
14.5 Action定義 309
14.6 Reducer設(shè)計(jì) 309
14.7 重構(gòu)的計(jì)算器應(yīng)用測(cè)試 312
第15章 實(shí)戰(zhàn)4：基于Redux 實(shí)現(xiàn)任務(wù)管理器應(yīng)用 313
15.1 設(shè)計(jì)思想 313
15.2 任務(wù)管理器應(yīng)用頁(yè)面 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設(shè)計(jì) 323
15.10 任務(wù)管理器應(yīng)用測(cè)試 325
第16章 實(shí)戰(zhàn)5：基于React+Router+Redux 的網(wǎng)站架構(gòu) 328
16.1 設(shè)計(jì)思想 328
16.2 網(wǎng)站架構(gòu)應(yīng)用頁(yè)面 329
16.3 主入口模塊 330
16.4 App組件 330
16.5 Reducer設(shè)計(jì) 332
16.6 視圖組件 335
16.7 Action定義 338
16.8 網(wǎng)站架構(gòu)應(yīng)用測(cè)試 339