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