部分  基礎(chǔ)篇
第1章  React簡(jiǎn)介與開(kāi)發(fā)基礎(chǔ) 3
1.1  React簡(jiǎn)介 3
     1.1.1  React的定義 3
     1.1.2  React的特點(diǎn) 3
     1.1.3  React的發(fā)展簡(jiǎn)史 4
1.2  React應(yīng)用開(kāi)發(fā)的簡(jiǎn)單示例 5
     1.2.1  單個(gè)HTML文件應(yīng)用React的示例 5
     1.2.2  元素渲染說(shuō)明 8
     1.2.3  兩個(gè)文件應(yīng)用React的示例 9
     1.2.4  應(yīng)用React的示例對(duì)比分析 10
1.3  JSX應(yīng)用開(kāi)發(fā)入門(mén) 11
     1.3.1  JSX說(shuō)明 11
     1.3.2  JSX綜合應(yīng)用示例 11
     1.3.3  JSX綜合運(yùn)行效果 14
習(xí)題1 14
第2章  React組件 15
2.1  React組件概述 15
     2.1.1  組件和自定義組件 15
     2.1.2  函數(shù)組件和類組件 16
2.2  函數(shù)組件和類組件的應(yīng)用開(kāi)發(fā) 16
     2.2.1  開(kāi)發(fā)示例 16
     2.2.2  運(yùn)行效果 17
2.3  組件參數(shù)和組合組件 18
     2.3.1  說(shuō)明 18
     2.3.2  開(kāi)發(fā)示例 18
     2.3.3  運(yùn)行效果 21
2.4  組件的分解和組合 21
     2.4.1  說(shuō)明 21
     2.4.2  開(kāi)發(fā)示例 22
     2.4.3  運(yùn)行效果 24
2.5  組件的生命周期 24
     2.5.1  概述 24
     2.5.2  constructor()方法 25
     2.5.3  componentDidMount()方法 25
     2.5.4  componentDidUpdate()方法 25
     2.5.5  componentWillUnmount()方法 25
     2.5.6  開(kāi)發(fā)示例 26
     2.5.7  運(yùn)行效果 27
習(xí)題2 28
第3章  React事件處理 29
3.1  React事件處理概述 29
     3.1.1  事件 29
     3.1.2  合成事件 30
     3.1.3  支持的事件類型 30
3.2  鼠標(biāo)事件處理 31
     3.2.1  開(kāi)發(fā)示例 31
     3.2.2  運(yùn)行效果 34
3.3  焦點(diǎn)事件處理 36
     3.3.1  開(kāi)發(fā)示例 36
     3.3.2  運(yùn)行效果 38
3.4  鍵盤(pán)事件處理 39
     3.4.1  開(kāi)發(fā)示例 39
     3.4.2  運(yùn)行效果 40
3.5  圖像事件處理 41
     3.5.1  開(kāi)發(fā)示例 41
     3.5.2  運(yùn)行效果 43
習(xí)題3 44
第4章  React條件渲染、列表和key 45
4.1  React條件渲染、列表和key概述 45
     4.1.1  條件渲染 45
     4.1.2  列表 45
     4.1.3  key 46
4.2  條件渲染的應(yīng)用開(kāi)發(fā) 46
     4.2.1  開(kāi)發(fā)示例 46
     4.2.2  運(yùn)行效果 51
4.3  列表的應(yīng)用開(kāi)發(fā) 52
     4.3.1  開(kāi)發(fā)示例 52
     4.3.2  運(yùn)行效果 54
4.4  key的應(yīng)用開(kāi)發(fā) 55
     4.4.1  開(kāi)發(fā)示例 55
     4.4.2  運(yùn)行效果 58
4.5  列表和key的綜合應(yīng)用 58
     4.5.1  開(kāi)發(fā)示例 58
     4.5.2  運(yùn)行效果 60
習(xí)題4 61
第5章  React狀態(tài)管理 62
5.1  React狀態(tài)管理概述 62
     5.1.1  state 62
     5.1.2  setState()方法 63
     5.1.3  forceUpdate()方法 64
     5.1.4  狀態(tài)提升 64
5.2  狀態(tài)的基礎(chǔ)應(yīng)用 64
     5.2.1  開(kāi)發(fā)示例 64
     5.2.2  運(yùn)行效果 70
5.3  狀態(tài)的提升應(yīng)用 71
     5.3.1  開(kāi)發(fā)示例 71
     5.3.2  運(yùn)行效果 75
習(xí)題5 77
第6章  React表單 78
6.1  React表單概述 78
     6.1.1  表單 78
     6.1.2  受控組件 78
     6.1.3  非受控組件 79
6.2  表單組件 79
     6.2.1  開(kāi)發(fā)示例 79
     6.2.2  運(yùn)行效果 86
6.3  ref 87
     6.3.1 開(kāi)發(fā)示例 87
     6.3.2  運(yùn)行效果 89
習(xí)題6 91
第7章  React組件的組合和繼承 92
7.1  React組件的組合和繼承概述 92
     7.1.1  組合 92
     7.1.2  繼承 92
7.2  帶樣式的組合組件 93
     7.2.1  引入包、樣式和功能文件 93
     7.2.2  定義樣式 93
     7.2.3  定義功能 94
     7.2.4  帶樣式組件綜合應(yīng)用的運(yùn)行效果 95
7.3  頁(yè)面布局 96
     7.3.1  定義樣式和功能 96
     7.3.2  運(yùn)行效果 98
7.4  特例關(guān)系組合 99
     7.4.1  定義樣式和功能 99
     7.4.2  運(yùn)行效果 100
7.5  類組合 101
     7.5.1  定義樣式和功能 101
     7.5.2  運(yùn)行效果 103
習(xí)題7 104
第二部分  高階篇
第8章  React使用Hook增強(qiáng)組件 107
8.1  Hook概述 107
     8.1.1  Hook 107
     8.1.2  Hook API 108
     8.1.3  自定義Hook 109
     8.1.4  Hook的使用規(guī)則 109
8.2  State Hook的應(yīng)用 110
     8.2.1  創(chuàng)建項(xiàng)目reactjsbook 110
     8.2.2  修改文件index.js 113
     8.2.3  創(chuàng)建組件 113
     8.2.4  運(yùn)行項(xiàng)目reactjsbook 114
     8.2.5  useState()函數(shù)的應(yīng)用說(shuō)明 115
     8.2.6  State Hook的等價(jià)實(shí)現(xiàn) 115
8.3  State Hook的綜合應(yīng)用 116
     8.3.1  創(chuàng)建組件 116
     8.3.2  運(yùn)行項(xiàng)目reactjsbook 119
8.4  Effect Hook的應(yīng)用 119
     8.4.1  說(shuō)明 119
     8.4.2  創(chuàng)建文件HookExample2.js 120
     8.4.3  Effect Hook的等價(jià)實(shí)現(xiàn) 121
     8.4.4  創(chuàng)建組件 122
     8.4.5  修改文件index.js 124
     8.4.6  運(yùn)行項(xiàng)目reactjsbook 125
8.5  其他Hook的應(yīng)用 125
     8.5.1  useState()函數(shù)應(yīng)用 125
     8.5.2  useReducer()函數(shù)應(yīng)用 126
     8.5.3  useMemo()函數(shù)應(yīng)用 127
     8.5.4  useRef()函數(shù)應(yīng)用 128
     8.5.5  創(chuàng)建組件 128
     8.5.6  修改文件index.js 129
     8.5.7  運(yùn)行項(xiàng)目reactjsbook 129
習(xí)題8 130
第9章  React基礎(chǔ)原理和高級(jí)指引 131
9.1  React基礎(chǔ)原理 131
     9.1.1  選擇性地使用React 131
     9.1.2  JSX表示對(duì)象 131
     9.1.3  類組件的執(zhí)行順序 133
     9.1.4  異步編程 135
     9.1.5  Fiber 135
     9.1.6  模塊 136
9.2  React應(yīng)用開(kāi)發(fā)的一般步驟 136
     9.2.1  將UI界面分解為組件 136
     9.2.2  實(shí)現(xiàn)應(yīng)用程序的靜態(tài)版本 136
     9.2.3  確定state 137
     9.2.4  確定state的放置位置 137
     9.2.5  添加反向數(shù)據(jù)流 137
9.3  React片段 138
     9.3.1  說(shuō)明 138
     9.3.2  創(chuàng)建組件 138
     9.3.3  修改文件index.js 140
     9.3.4  運(yùn)行項(xiàng)目reactjsbook 140
9.4  context 141
     9.4.1  說(shuō)明 141
     9.4.2  創(chuàng)建組件 142
     9.4.3  修改文件index.js 144
     9.4.4  運(yùn)行項(xiàng)目reactjsbook 144
9.5  高階組件 145
     9.5.1  說(shuō)明 145
     9.5.2  創(chuàng)建組件 145
     9.5.3  修改文件index.js 146
     9.5.4  運(yùn)行項(xiàng)目reactjsbook 147
9.6  ref轉(zhuǎn)發(fā) 147
     9.6.1  說(shuō)明 147
     9.6.2  創(chuàng)建組件 148
     9.6.3  修改文件index.js 149
     9.6.4  運(yùn)行項(xiàng)目reactjsbook 149
9.7  portal 149
     9.7.1  說(shuō)明 149
     9.7.2  創(chuàng)建組件 150
     9.7.3  修改文件index.js 151
     9.7.4  運(yùn)行項(xiàng)目reactjsbook 152
9.8  ref和DOM 152
     9.8.1  說(shuō)明 152
     9.8.2  創(chuàng)建組件 153
     9.8.3  修改文件index.js 156
     9.8.4  運(yùn)行項(xiàng)目reactjsbook 156
9.9  Web Component 157
     9.9.1  說(shuō)明 157
     9.9.2  創(chuàng)建組件 157
     9.9.3  修改文件index.js 158
     9.9.4  運(yùn)行項(xiàng)目reactjsbook 158
9.10  render props 159
　　　9.10.1  說(shuō)明 159
　　　9.10.2  創(chuàng)建組件 159
　　　9.10.3  修改文件index.js 164
　　　9.10.4  運(yùn)行項(xiàng)目reactjsbook 164
9.11  錯(cuò)誤邊界 164
　　　9.11.1  說(shuō)明 164
　　　9.11.2  創(chuàng)建組件 165
　　　9.11.3  修改文件index.js 166
　　　9.11.4  運(yùn)行項(xiàng)目reactjsbook 167
9.12  測(cè)試 167
　　　9.12.1  說(shuō)明 167
　　　9.12.2  測(cè)試簡(jiǎn)單示例 167
　　　9.12.3  異步測(cè)試示例 169
　　　9.12.4  mock測(cè)試示例 171
　　　9.12.5  事件測(cè)試示例 173
習(xí)題9 174
第10章  React應(yīng)用開(kāi)發(fā)的工具 176
10.1  包管理器 176
　　　10.1.1  NPM 176
　　　10.1.2  Yarn 177
10.2  安裝React 177
　　　10.2.1  CDN鏈接 177
　　　10.2.2  Create React App 178
10.3  編譯器和編輯器 178
　　　10.3.1  Babel 178
　　　10.3.2  ESLint 178
　　　10.3.3  Prettier 179
　　　10.3.4  PropTypes 179
10.4  構(gòu)建工具 179
　　　10.4.1  webpack 179
　　　10.4.2  Parcel 179
10.5  服務(wù)器端渲染工具 180
　　　10.5.1  Next.js 180
　　　10.5.2  Razzle 180
　　　10.5.3  Gatsby 181
10.6  React Router 181
　　　10.6.1  說(shuō)明 181
　　　10.6.2  創(chuàng)建組件 181
　　　10.6.3  修改文件index.js 183
　　　10.6.4  運(yùn)行項(xiàng)目reactjsbook 183
習(xí)題10 184
第三部分  實(shí)戰(zhàn)篇
第11章  React與Redux的整合開(kāi)發(fā) 187
11.1  React與Redux概述 187
　　　11.1.1  Redux動(dòng)機(jī) 187
　　　11.1.2  Redux核心內(nèi)容 187
　　　11.1.3  React與Redux對(duì)比 189
11.2  計(jì)數(shù)器的開(kāi)發(fā) 189
　　　11.2.1  創(chuàng)建action 189
　　　11.2.2  創(chuàng)建reducer 190
　　　11.2.3  創(chuàng)建組件 190
　　　11.2.4  修改文件index.js 191
　　　11.2.5  運(yùn)行項(xiàng)目reactjsbook 192
11.3  待辦事項(xiàng)管理小工具的開(kāi)發(fā) 192
　　　11.3.1  創(chuàng)建action 192
　　　11.3.2  創(chuàng)建reducer 193
　　　11.3.3  創(chuàng)建組件 194
　　　11.3.4  修改文件index.js 198
　　　11.3.5  運(yùn)行項(xiàng)目reactjsbook 198
習(xí)題11 200
第12章  React與Spring Boot的整合開(kāi)發(fā) 201
12.1  Spring Boot簡(jiǎn)介 201
　　　12.1.1  Spring的構(gòu)成 201
　　　12.1.2  Spring Boot的特點(diǎn) 201
12.2  Spring Boot作為后端的開(kāi)發(fā) 202
　　　12.2.1  創(chuàng)建項(xiàng)目backendforreactjs 202
　　　12.2.2  創(chuàng)建類和接口 203
　　　12.2.3  修改后端配置文件 205
　　　12.2.4  數(shù)據(jù)庫(kù)文件db_mediablog.sql 206
　　　12.2.5  運(yùn)行后端Spring Boot程序 206
12.3  React作為前端的開(kāi)發(fā) 206
　　　12.3.1  修改文件index.js 206
　　　12.3.2  創(chuàng)建組件 207
　　　12.3.3  修改前端配置文件 208
　　　12.3.4  運(yùn)行前端React程序 209
習(xí)題12 210
第13章  React與Python框架的整合開(kāi)發(fā) 211
13.1  React與Django的整合開(kāi)發(fā) 211
　　　13.1.1  Django作為后端開(kāi)發(fā) 211
　　　13.1.2  運(yùn)行后端Django程序 214
　　　13.1.3  React作為前端開(kāi)發(fā) 215
　　　13.1.4  運(yùn)行前端React程序 218
13.2  React與Flask的整合開(kāi)發(fā) 220
　　　13.2.1  Flask作為后端開(kāi)發(fā)和運(yùn)行后端Flask程序 220
　　　13.2.2  React作為前端開(kāi)發(fā) 221
　　　13.2.3  運(yùn)行前端React程序 221
　　　13.2.4  打包前端React程序代碼并手工復(fù)制到后端 222
　　　13.2.5  運(yùn)行后端Flask程序 222
習(xí)題13 223
第14章  React與Go的整合開(kāi)發(fā) 224
14.1  Go作為后端的開(kāi)發(fā) 224
　　　14.1.1  創(chuàng)建項(xiàng)目server和入口文件 224
　　　14.1.2  創(chuàng)建API 225
　　　14.1.3  創(chuàng)建工具類 228
　　　14.1.4  創(chuàng)建數(shù)據(jù)庫(kù)處理類 229
　　　14.1.5  創(chuàng)建數(shù)據(jù)類型 231
　　　14.1.6  數(shù)據(jù)庫(kù)文件godatabase.sql 232
　　　14.1.7  運(yùn)行后端Go程序 232
14.2  React作為前端的開(kāi)發(fā) 233
　　　14.2.1  創(chuàng)建項(xiàng)目并修改文件index.js 233
　　　14.2.2  創(chuàng)建用戶界面 233
　　　14.2.3  創(chuàng)建組件 234
　　　14.2.4  運(yùn)行前端React程序 236
習(xí)題14 237
第15章  案例——實(shí)現(xiàn)一個(gè)簡(jiǎn)易的員工信息管理系統(tǒng) 238
15.1  Spring Boot作為后端的開(kāi)發(fā) 238
　　　15.1.1  創(chuàng)建項(xiàng)目excase和實(shí)體類 238
　　　15.1.2  創(chuàng)建DAO層 240
　　　15.1.3  創(chuàng)建Service層 241
　　　15.1.4  創(chuàng)建Controller層 242
　　　15.1.5  修改后端配置文件 243
　　　15.1.6  數(shù)據(jù)庫(kù)文件studywebsite.sql 243
　　　15.1.7  修改后端入口類 244
　　　15.1.8  運(yùn)行后端Spring Boot程序 244
15.2  React作為前端的開(kāi)發(fā) 244
　　　15.2.1  修改文件App.js和App.css 244
　　　15.2.2  創(chuàng)建組件 246
　　　15.2.3  運(yùn)行前端React程序 251
習(xí)題15 253
附錄 254
參考文獻(xiàn) 255
VI
VII