本書共11章,內(nèi)容包括:創(chuàng)建應(yīng)用程序、路由、管理狀態(tài)、交互設(shè)計(jì)、連接后端服務(wù)、組件庫、安全性、測(cè)試、無障礙訪問、性能、漸進(jìn)式Web應(yīng)用。
“本書將帶你了解React開發(fā)的整個(gè)生命周期。每個(gè)代碼案例都簡明易懂,是作者智慧的結(jié)晶。這是一本所有開發(fā)者必讀之書!”
——Sam Warner
軟件工程師
工欲善其事,必先利其器。親愛的讀者,首先恭喜你入手了這本React技術(shù)的神級(jí)武器庫。
兜兜轉(zhuǎn)轉(zhuǎn),歷時(shí)一年多,React Cookbook中文版終于和大家見面了。很榮幸,譯者團(tuán)隊(duì)先于廣大讀者仔細(xì)拜讀了此書,這里略微談?wù)劚緯奶厣?
正如本書的英文原名一樣,作為cookbook(菜譜),本書將呈現(xiàn)React各個(gè)方面的“精美菜肴”。
具體說來,本書具有如下特點(diǎn):
1. 涉及React技術(shù)的方方面面
從目錄就可以看出,本書覆蓋了所有React技術(shù)使用者可能會(huì)涉及的方方面面。譯者團(tuán)隊(duì)頻頻感慨,這本書真是太全了,如果能把書中內(nèi)容都研究透,絕對(duì)可以成為React大拿。如果你是前端架構(gòu)師,本書應(yīng)該常伴你左右。
2. 內(nèi)容講解循序漸進(jìn)
相信每個(gè)愛鉆研技術(shù)的開發(fā)者,看一般技術(shù)書籍的時(shí)候往往有這種感覺:內(nèi)容流于泛泛,看完好像學(xué)了很多,卻又很容易遺忘。而本書作為一本“菜譜”,每章的目標(biāo)都是做出一道“菜肴”(即一個(gè)前端項(xiàng)目),每個(gè)小節(jié)又都以問題為牽引,讓我們?cè)诓粩喔S書中節(jié)奏解決問題的過程中,逐步對(duì)這個(gè)項(xiàng)目不斷完善和迭代,在該章完結(jié)的時(shí)候,正好完成一個(gè)完整的可運(yùn)行實(shí)例。其中要說明的是,這些問題來源于我們React技術(shù)開發(fā)者工作中真正遇到的最常見難題,因此本書又具備了另一個(gè)特點(diǎn),即可以直接當(dāng)成工具書,隨用隨查(這也是書名的本意)。
3. 翔實(shí)的參考資料
每個(gè)小節(jié)除了“問題”和“解決方案”之外,還有“討論”,很多時(shí)候還會(huì)給出重要資料的相關(guān)鏈接,便于讀者進(jìn)一步學(xué)習(xí)。相信每一個(gè)想在前端領(lǐng)域不斷精進(jìn)的小伙伴,在閱讀的過程中,都會(huì)不斷感知到自己的知識(shí)網(wǎng)絡(luò)又拓展了。
以上只是大體介紹了本書的特色,本書還有很多亮點(diǎn)需要讀者在閱讀過程中去探索,比如在書中項(xiàng)目選取上的匠心獨(dú)運(yùn),需要讀者親自去體會(huì),相信你通讀完全書后,也會(huì)跟我們得出同樣的結(jié)論:本書是React技術(shù)的神級(jí)武器庫。
本書能順利出版,譯者團(tuán)隊(duì)只是付出了一點(diǎn)苦勞。在這里,譯者團(tuán)隊(duì)鄭重感謝本書的作者David Griffiths和Dawn Griffiths,感謝他們給我們帶來了這么好的作品,讓React技術(shù)使用者能更好地提升自己。
David Griffiths是一位作家、培訓(xùn)師和軟件開發(fā)者,擁有6年React開發(fā)經(jīng)驗(yàn)。他為初創(chuàng)公司、零售商店、汽車制造商、國家體育機(jī)構(gòu)和大型軟件供應(yīng)商編寫過應(yīng)用程序。
Dawn Griffiths是一位作家和培訓(xùn)師,擁有20多年的軟件開發(fā)經(jīng)驗(yàn),有創(chuàng)建桌面和Web應(yīng)用程序的豐富實(shí)踐經(jīng)驗(yàn)。
David和Dawn一起編寫了數(shù)本書籍,其中包括Head First Android Development和Head First Kotlin。他們還為O'Reilly提供實(shí)時(shí)的在線培訓(xùn)。
前言1
第1章 創(chuàng)建應(yīng)用程序7
1.1 創(chuàng)建簡單的應(yīng)用程序7
1.2 用Gatsby創(chuàng)建內(nèi)容豐富的應(yīng)用程序11
1.3 用Razzle創(chuàng)建通用應(yīng)用程序14
1.4 使用Next.js管理服務(wù)端和客戶端代碼16
1.5 用Preact創(chuàng)建輕量級(jí)應(yīng)用程序19
1.6 用nwb創(chuàng)建組件庫22
1.7 用Webpacker給Rails項(xiàng)目添加React24
1.8 用Preact創(chuàng)建自定義HTML標(biāo)簽26
1.9 在組件開發(fā)中使用Storybook30
1.10 用Cypress在瀏覽器中測(cè)試代碼33
第2章 路由37
2.1 使用響應(yīng)式路由創(chuàng)建界面37
2.2 將狀態(tài)移入路由43
2.3 使用MemoryRouter進(jìn)行單元測(cè)試49
2.4 使用提示窗確認(rèn)頁面退出操作52
2.5 用React Transition Group創(chuàng)建過渡58
2.6 創(chuàng)建安全路由63
第3章 管理狀態(tài)69
3.1 用reducer來管理復(fù)雜狀態(tài)69
3.2 實(shí)現(xiàn)撤銷功能78
3.3 創(chuàng)建和驗(yàn)證表單84
3.4 根據(jù)時(shí)間變化設(shè)置定時(shí)任務(wù)92
3.5 監(jiān)控在線狀態(tài)96
3.6 用Redux管理全局狀態(tài)97
3.7 用Redux持久化庫實(shí)現(xiàn)頁面重新加載104
3.8 用reselect計(jì)算派生狀態(tài)107
第4章 交互設(shè)計(jì)113
4.1 建立錯(cuò)誤集中處理器113
4.2 創(chuàng)建交互式幫助向?qū)?18
4.3 在復(fù)雜交互中使用reducer125
4.4 添加按鍵交互131
4.5 對(duì)豐富的內(nèi)容使用Markdown133
4.6 使用CSS類引入動(dòng)畫效果138
4.7 在React中引入動(dòng)畫庫140
4.8 使用TweenOne給信息圖添加動(dòng)畫145
第5章 連接后端服務(wù)151
5.1 將網(wǎng)絡(luò)請(qǐng)求轉(zhuǎn)化為Hook151
5.2 使用狀態(tài)計(jì)數(shù)器自動(dòng)更新數(shù)據(jù)157
5.3 使用token來取消網(wǎng)絡(luò)請(qǐng)求165
5.4 使用Redux的中間件發(fā)起網(wǎng)絡(luò)請(qǐng)求168
5.5 連接到GraphQL174
5.6 通過防抖減少網(wǎng)絡(luò)負(fù)載181
第6章 組件庫185
6.1 使用Material-UI創(chuàng)建Material Design風(fēng)格的應(yīng)用185
6.2 使用React Bootstrap為應(yīng)用引入簡單的用戶界面192
6.3 使用React Window展示大量數(shù)據(jù)196
6.4 使用Material-UI創(chuàng)建響應(yīng)式對(duì)話框199
6.5 使用React Admin創(chuàng)建管理控制臺(tái)202
6.6 沒有設(shè)計(jì)師?使用Semantic UI209
第7章 安全性215
7.1 使用安全API替代安全路由215
7.2 使用物理令牌進(jìn)行身份驗(yàn)證223
7.3 使用HTTPS233
7.4 使用指紋認(rèn)證236
7.5 敏感操作前驗(yàn)證登錄信息243
7.6 使用單因素身份驗(yàn)證249
7.7 在Android設(shè)備上測(cè)試254
7.8 使用ESlint檢查代碼安全性256
7.9 讓登錄表單對(duì)瀏覽器更加友好260
第8章 測(cè)試263
8.1 使用React Testing Library264
8.2 使用Storybook做渲染測(cè)試271
8.3 使用Cypress做無服務(wù)器測(cè)試277
8.4 使用Cypress做離線測(cè)試284
8.5 使用Selenium在瀏覽器中測(cè)試287
8.6 用ImageMagick測(cè)試跨瀏覽器的視覺效果294
8.7 給移動(dòng)端瀏覽器添加控制臺(tái)301
8.8 消除測(cè)試中的隨機(jī)性306
8.9 時(shí)間旅行309
第9章 無障礙訪問315
9.1 使用地標(biāo)元素315
9.2 應(yīng)用role、alt和title321
9.3 使用ESlint檢查可訪問性329
9.4 在運(yùn)行時(shí)使用axe DevTools334
9.5 使用Cypress Axe自動(dòng)化瀏覽器測(cè)試338
9.6 添加跳過按鈕342
9.7 添加跳過區(qū)域348
9.8 將焦點(diǎn)鎖定在模態(tài)窗口中356
9.9 使用Speech API創(chuàng)建頁面閱讀器359
第10章 性能365
10.1 使用瀏覽器性能工具366
10.2 使用Profiler跟蹤渲染372
10.3 創(chuàng)建Profiler單元測(cè)試377
10.4 精確測(cè)量時(shí)間381
10.5 使用代碼分割技術(shù)減小應(yīng)用程序體積384
10.6 使用promise實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求異步化391
10.7 使用服務(wù)端渲染394
10.8 使用Web Vitals404
第11章 漸進(jìn)式Web應(yīng)用407
11.1 使用Workbox創(chuàng)建Service Worker407
11.2 使用Create React App創(chuàng)建漸進(jìn)式Web應(yīng)用423
11.3 緩存第三方資源426
11.4 自動(dòng)重新加載Service Worker430
11.5 添加通知434
11.6 使用后臺(tái)同步進(jìn)行離線修改441
11.7 添加自定義安裝界面446
11.8 提供離線響應(yīng)450