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

VI

VII

React（或稱為React.js）作為三大前端開發框架之一，有著廣泛的應用。本書由淺入深、循序漸進地介紹React的應用開發，不包含React Native的應用開發。在介紹React應用開發的基礎上，考慮到開發時前後端分離的需求和React的靈活性，本書還介紹了不同的框架（語言）與React的整合開發，如Spring Boot、Python框架（Django和Flask）、Go等與React的整合開發。結合不同框架（語言）與React的整合開發還介紹了fetch、axios、把前端打包到後端、XMLHttpRequest等方式的前後端整合開發。
本書主要內容
本書分為三部分，共15章。
部分基礎篇，包括第1～7章。
第1章React簡介與開發基礎，內容包括React簡介、React應用開發的簡單示例、JSX應用開發入門。
第2章React組件，內容包括React組件概述、函數組件和類組件的應用開發、組件參數和組合組件、組件的分解和組合、組件的生命周期。
第3章React事件處理，內容包括React事件處理概述、鼠標事件處理、焦點事件處理、鍵盤事件處理和圖像事件處理。
第4章React條件渲染、列表和key，內容包括React條件渲染、列表和key概述、條件渲染的應用開發、列表的應用開發、key的應用開發、列表和key的綜合應用。
第5章React狀態管理，內容包括React狀態管理概述、狀態的基礎應用、狀態的提升        應用。
第6章React表單，內容包括React表單概述、表單組件和ref。
第7章React組件的組合和繼承，內容包括React組件的組合和繼承概述、帶樣式的組合組件、頁面布局、特例關繫組合和類組合。
第二部分高階篇，包括第8～10章。
第8章React使用Hook增強組件，內容包括Hook概述、State Hook的應用、State Hook的綜合應用、Effect Hook的應用和其他Hook的應用。
第9章React基礎原理和高級指引，內容包括React基礎原理、React應用開發的一般步驟、React片段、context、高階組件、ref轉發、portal、ref和DOM、Web Component、render props、錯誤邊界和測試。
第10章React應用開發的工具，內容包括包管理器、安裝React、編譯器和編輯器、構建工具、服務器端渲染工具和React Router。
第三部分實戰篇，包括第11～15章。
第11章React與Redux的整合開發，內容包括React和Redux概述、計數器的開發、待辦事項管理小工具的開發。
第12章React與Spring Boot的整合開發，內容包括Spring Boot簡介、Spring Boot作為後端的開發、React作為前端的開發。
第13章React與Python框架的整合開發，內容包括React與Django的整合開發、React與Flask的整合開發。
第14章React與Go的整合開發，內容包括Go作為後端的開發、React作為前端的開發。
第15章案例——實現一個簡易的員工信息管理繫統，內容包括Spring Boot作為後端的開發、React作為前端的開發。
本書特色
（1）內容新。本書使用的React版本是18.2.0版，涵蓋新內容（如自動批處理）。
（2）易理解。本書避免對官方文檔的簡單引用，按照學習的先後順序和開發步驟由淺入深地編排知識點，適合讀者自學，同時也能滿足全國高等院校教學的需要。
（3）全棧式。本書包括官方文檔的大部分內容，在介紹React應用開發的基礎上，考慮到開發時前後端分離的需求和React的靈活性，本書實戰演練了采用Spring Boot、Python框架、Go等不同技術棧和React整合開發的案例。
（4）示例多。實戰案例豐富，涵蓋48個知識點示例、6個整合開發案例、1個完整項目案例。
配套資源
為便於教與學，本書配有微課視頻（210分鐘）、源代碼、教學課件、教學大綱、教學進度表、習題答案。
（1）獲取微課視頻方式：先刮開並掃描本書封底的文泉雲盤防盜碼，再掃描書中相應的視頻二維碼，觀看教學視頻。
（2）獲取源代碼方式：先刮開並掃描本書封底的文泉雲盤防盜碼，再掃描下方二維碼，即可獲取。
       
源代碼      源代碼使用說明

（3）其他配套資源可以掃描本書封底的“書圈”二維碼，關注後回復本書書號，即可下載。
讀者對像
本書適合作為全國高等院校前端開發類課程的教材，也可供從事React應用開發和Web前端開發人員參考。

本書的主要內容參考了React官方文檔，在參考文獻已經列出，在此向React開發者和官方文檔的作者表示衷心的感謝和深深的敬意。本書的編寫還參考了諸多同行的相關資料，在此表示衷心的感謝。
限於個人水平和時間倉促，書中難免存在疏漏之處，歡迎讀者批評指正。

編者  
2022年10月



II

III