《React實(shí)戰(zhàn)》涵蓋了構(gòu)建React應(yīng)用所涉及的概念和API,全書共13章,分為3個(gè)部分,從React的核心思想和關(guān)鍵點(diǎn)講起,并隨著進(jìn)展涉及更具體和高級的主題。首先介紹React的核心思想,探討了React的一些關(guān)鍵點(diǎn),展示React如何適應(yīng)使用者的開發(fā)過程;然后開始深入React,描述數(shù)據(jù)如何在React中流動(dòng),介紹組件生命周期API,開始構(gòu)建Letters Social示例項(xiàng)目,處理表單以及路由的關(guān)鍵部分;最后將注意力專門放在把應(yīng)用轉(zhuǎn)換到使用Redux,介紹Redux狀態(tài)管理方案,探索服務(wù)器端渲染,并簡要地介紹React Native項(xiàng)目。
本書結(jié)構(gòu)清晰,內(nèi)容由淺入深,適合任何對React感興趣,想學(xué)習(xí)React的讀者,也適合前端開發(fā)人群。
React的設(shè)計(jì)初衷就是,幫助開發(fā)者為用戶提供令人驚嘆的用戶體驗(yàn)。每位開發(fā)者都可以使用React這個(gè)強(qiáng)大的工具!管理狀態(tài)、數(shù)據(jù)流和渲染的巧妙設(shè)計(jì)是成功的關(guān)鍵,只有這樣設(shè)計(jì)的應(yīng)用才能運(yùn)行順暢、讓人記憶猶新。開發(fā)者只要進(jìn)入這個(gè)由組件和庫構(gòu)成的極其豐富的生態(tài)系統(tǒng),就可以掌握構(gòu)建讓開發(fā)者和用戶都賞心悅目的Web應(yīng)用的秘訣。
本書指導(dǎo)讀者像專家一樣思考用戶界面(UI),并教讀者用React構(gòu)建它們。本書非常實(shí)用,配有很多可實(shí)際操作的示例,讓讀者快速上手。本書的目標(biāo)是讓讀者掌握渲染、生命周期方法、JSX、數(shù)據(jù)流、表單、路由、與第三方庫集成和測試等核心概念,并且?guī)椭x者利用書中介紹的應(yīng)用設(shè)計(jì)理念推動(dòng)應(yīng)用的流行。在學(xué)習(xí)將React集成到全棧應(yīng)用的過程中,讀者還可以探索通過Redux進(jìn)行狀態(tài)管理和服務(wù)器端渲染,甚至可以接觸到用于移動(dòng)UI 的React Native。
本書專門寫給熟悉HTML、CSS 和JavaScript 的開發(fā)者。
本書主要內(nèi)容
● 從頭開始使用React。
● 用組件實(shí)現(xiàn)路由系統(tǒng)。
● 在Node.js中進(jìn)行服務(wù)器端渲染。
● 使用第三方庫。
● 測試React組件。
作者簡介
馬克·蒂倫斯·托馬斯(Mark Tielens Thomas)是一位經(jīng)驗(yàn)豐富的軟件工程師,他每天都在用React、JavaScript 和Node.js 工作。他喜愛整潔的代碼、優(yōu)美的系統(tǒng)和上好的咖啡。
譯者簡介
任發(fā)科 火幣高級研發(fā)總監(jiān),曾任職亞馬遜、唯品會(huì)等多家互聯(lián)網(wǎng)公司,擔(dān)任研發(fā)和技術(shù)管理工作,有豐富的軟件架構(gòu)、開發(fā)和管理經(jīng)驗(yàn)。個(gè)人長期從事和關(guān)注高效研發(fā)組織的構(gòu)建和管理,并有豐富的團(tuán)隊(duì)管理實(shí)踐。近年主要關(guān)注和從事研發(fā)效能和DevOps體系的建立,目前從事穩(wěn)定性工程的相關(guān)工作。
陳偉 嘩啦啦前端架構(gòu)師。曾在唯品會(huì)、火幣等公司任前端工程師和前端架構(gòu)師。深入理解JavaScript語言以及Node.js、Vue、React等前端框架,并在前端組件化方向有深入的工程化研究。目前致力于可視化的頁面編輯器的設(shè)計(jì)和開發(fā),賦能產(chǎn)品與前端,提升公司開發(fā)效率。
蔣峰 火幣網(wǎng)資深前端工程師,曾就職于國家農(nóng)業(yè)信息化中心、阿里健康、融數(shù)金服等從事軟件研發(fā)、基礎(chǔ)架構(gòu)等工作,目前主要負(fù)責(zé)火幣網(wǎng)前端相關(guān)產(chǎn)品研發(fā)管理工作。早年間致力于微軟.NET框架研發(fā),近年專注于前端研發(fā)體系架構(gòu),有大量的C#、Node.js和JavaScript項(xiàng)目開發(fā)經(jīng)驗(yàn),對Electron跨平臺應(yīng)用有極大的興趣與研究。目前正在積極推進(jìn)企業(yè)內(nèi)中后臺微前端應(yīng)用方案的驗(yàn)證與實(shí)施。
邱巍 現(xiàn)就職于嘩啦啦研發(fā)中心,曾就職于作業(yè)盒子、融數(shù)金服、火幣網(wǎng)等從事軟件研發(fā)工作,目前主要負(fù)責(zé)數(shù)據(jù)可視化基礎(chǔ)組件研發(fā)。對圖表繪制、圖表交互、數(shù)據(jù)建模與分析等相關(guān)內(nèi)容有極大興趣。目前致力于提供展現(xiàn)更準(zhǔn)確,分析更高效的數(shù)據(jù)可視化工具研發(fā)。
第 一部分 初識React
第 1章 初識React 3
1.1 初識React 3
1.1.1 本書的受眾 6
1.1.2 工具說明 6
1.1.3 誰在使用React 7
1.2 React不能做什么 8
1.3 虛擬DOM 11
1.3.1 DOM 11
1.3.2 虛擬DOM 13
1.3.3 更新與差異比對 13
1.3.4 虛擬DOM:渴求速度 14
1.4 組件:React的基本單元 14
1.4.1 組件概覽 15
1.4.2 React中的組件:封裝與復(fù)用 16
1.5 團(tuán)隊(duì)的React 16
1.6 小結(jié) 17
第 2章
:我們的第 一個(gè)組件 19
2.1 React組件介紹 21
2.1.1 理解應(yīng)用數(shù)據(jù) 22
2.1.2 多組件:組合關(guān)系和父子關(guān)系 23
2.1.3 建立組件關(guān)系 24
2.2 用React創(chuàng)建組件 26
2.2.1 創(chuàng)建React元素 26
2.2.2 渲染首個(gè)組件 29
2.2.3 創(chuàng)建React組件 31
2.2.4 創(chuàng)建React類 31
2.2.5 render方法 32
2.2.6 通過PropTypes校驗(yàn)屬性 33
2.3 組件的一生 36
2.3.1 React的狀態(tài) 37
2.3.2 設(shè)定初始狀態(tài) 38
2.4 認(rèn)識JSX 45
2.4.1 使用JSX創(chuàng)建組件 46
2.4.2 JSX的好處以及JSX與HTML的差別 48
2.5 小結(jié) 48
第二部分 React中的組件和數(shù)據(jù)
第3章 React中的數(shù)據(jù)和數(shù)據(jù)流 53
3.1 狀態(tài)介紹 53
3.1.1 什么是狀態(tài) 54
3.1.2 可變狀態(tài)與不可變狀態(tài) 56
3.2 React中的狀態(tài) 57
3.2.1 React中的可變狀態(tài):組件狀態(tài) 58
3.2.2 React中的不可變狀態(tài):屬性 61
3.2.3 使用屬性:PropTypes和默認(rèn)屬性 62
3.2.4 無狀態(tài)函數(shù)組件 63
3.3 組件通信 65
3.4 單向數(shù)據(jù)流 66
3.5 小結(jié) 67
第4章 React中的渲染和生命周期方法 69
4.1 搭建Letters Social倉庫 69
4.1.1 獲取源代碼 71
4.1.2 應(yīng)該使用哪個(gè)版本的Node 71
4.1.3 關(guān)于工具和CSS的注意事項(xiàng) 72
4.1.4 部署 72
4.1.5 API服務(wù)器和數(shù)據(jù)庫 72
4.1.6 運(yùn)行應(yīng)用程序 73
4.2 渲染過程和生命周期方法 73
4.2.1 生命周期方法概覽 73
4.2.2 生命周期方法的類型 75
4.2.3 初始方法和“將執(zhí)行”方法 78
4.2.4 掛載組件 79
4.2.5 更新方法 82
4.2.6 卸載方法 85
4.2.7 捕捉錯(cuò)誤 86
4.3 開始創(chuàng)建Letters Social 90
4.4 小結(jié) 96
第5章 在React中使用表單 99
5.1 在Letters Social中創(chuàng)建帖子 100
5.1.1 數(shù)據(jù)需求 100
5.1.2 組件概覽與層級 100
5.2 React中的表單 102
5.2.1 開始使用表單 103
5.2.2 表單元素和事件 103
5.2.3 更新表單狀態(tài) 106
5.2.4 受控和非受控組件 107
5.2.5 表單驗(yàn)證與清理 109
5.3 創(chuàng)建新帖子 112
5.4 小結(jié) 114
第6章 將第三方庫與React集成 115
6.1 向Letters Social API發(fā)送帖子 116
6.2 用地圖增強(qiáng)組件 117
6.2.1 使用refs創(chuàng)建DisplayMap組件 118
6.2.2 創(chuàng)建LocationTypeAhead組件 124
6.2.3 更新CreatePost,給帖子添加地圖 130
6.3 小結(jié) 134
第7章 React的路由 135
7.1 什么是路由 136
7.2 創(chuàng)建路由器 137
7.2.1 組件路由 138
7.2.2 創(chuàng)建
組件 139
7.2.3 開始構(gòu)建
組件 140
7.2.4 匹配URL路徑和參數(shù)化
路由 143
7.2.5 向Router組件添加路由 144
7.3 小結(jié) 150
第8章 再談路由以及集成Firebase 153
8.1 使用路由器 154
8.1.1 創(chuàng)建帖子頁面 159
8.1.2 創(chuàng)建
組件 161
8.1.3 創(chuàng)建
組件 164
8.2 集成Firebase 165
8.3 小結(jié) 172
第9章 測試React組件 173
9.1 測試的類型 174
9.2 用Jest、Enzyme和
React-test-render測試React組件 177
9.3 編寫第 一個(gè)測試 178
9.3.1 開始使用Jest 179
9.3.2 測試無狀態(tài)函數(shù)組件 180
9.3.3 不使用Enzyme測試CreatePost組件 183
9.3.4 測試覆蓋率 192
9.4 小結(jié) 194
第三部分 React應(yīng)用架構(gòu)
第 10章 Redux應(yīng)用架構(gòu) 197
10.1 Flux應(yīng)用架構(gòu) 198
10.1.1 初識Redux:Flux的一個(gè)變種 200
10.1.2 為Redux做準(zhǔn)備 201
10.2 在Redux中創(chuàng)建action 203
10.2.1 定義action類型 204
10.2.2 在Redux中創(chuàng)建action 205
10.2.3 創(chuàng)建Redux store并派發(fā)action 206
10.2.4 異步action和中間件 210
10.2.5 要不要使用Redux 215
10.2.6 測試action 218
10.2.7 創(chuàng)建用于崩潰報(bào)告的自定義Redux中間件 219
10.3 小結(jié) 221
第 11章 Redux進(jìn)階及Redux與React集成 223
11.1 reducer決定狀態(tài)應(yīng)該如何改變 224
11.1.1 狀態(tài)的結(jié)構(gòu)與初始狀態(tài) 225
11.1.2 設(shè)置reducer來響應(yīng)傳入的action 226
11.1.3 將reducer合并到store 232
11.1.4 測試reducer 233
11.2 將React和Redux結(jié)合起來 234
11.2.1 容器組件與展示組件 235
11.2.2 使用
將組件連接到Redux store 237
11.2.3 將action綁定到組件的事件處理器上 241
11.2.4 更新測試 244
11.3 小結(jié) 245
第 12章 服務(wù)器端React與集成React Router 247
12.1 什么是服務(wù)器端渲染 248
12.2 為什么在服務(wù)器上 渲染 251
12.3 可能并不需要SSR 253
12.4 在服務(wù)器上渲染 組件 254
12.5 切換到React Router 259
12.6 使用React Router處理已 驗(yàn)證的路由器 264
12.7 帶數(shù)據(jù)獲取的服務(wù)器端 渲染 268
12.8 小結(jié) 276
第 13章 React Native介紹 279
13.1 介紹React Native 279
13.2 React和React Native 282
13.3 何時(shí)使用React Native 284
13.4 最簡單的“Hello World” 285
13.5 下一站 289
13.6 小結(jié) 290