本书共11章,内容包括:创建应用程序、路由、管理状态、交互设计、连接后端服务、组件库、安全性、测试、无障碍访问、性能、渐进式Web应用。
“本书将带你了解React开发的整个生命周期。每个代码案例都简明易懂,是作者智慧的结晶。这是一本所有开发者必读之书!”
——Sam Warner
软件工程师
工欲善其事,必先利其器。亲爱的读者,首先恭喜你入手了这本React技术的神级武器库。
兜兜转转,历时一年多,React Cookbook中文版终于和大家见面了。很荣幸,译者团队先于广大读者仔细拜读了此书,这里略微谈谈本书的特色。
正如本书的英文原名一样,作为cookbook(菜谱),本书将呈现React各个方面的“精美菜肴”。
具体说来,本书具有如下特点:
1. 涉及React技术的方方面面
从目录就可以看出,本书覆盖了所有React技术使用者可能会涉及的方方面面。译者团队频频感慨,这本书真是太全了,如果能把书中内容都研究透,绝对可以成为React大拿。如果你是前端架构师,本书应该常伴你左右。
2. 内容讲解循序渐进
相信每个爱钻研技术的开发者,看一般技术书籍的时候往往有这种感觉:内容流于泛泛,看完好像学了很多,却又很容易遗忘。而本书作为一本“菜谱”,每章的目标都是做出一道“菜肴”(即一个前端项目),每个小节又都以问题为牵引,让我们在不断跟随书中节奏解决问题的过程中,逐步对这个项目不断完善和迭代,在该章完结的时候,正好完成一个完整的可运行实例。其中要说明的是,这些问题来源于我们React技术开发者工作中真正遇到的最常见难题,因此本书又具备了另一个特点,即可以直接当成工具书,随用随查(这也是书名的本意)。
3. 翔实的参考资料
每个小节除了“问题”和“解决方案”之外,还有“讨论”,很多时候还会给出重要资料的相关链接,便于读者进一步学习。相信每一个想在前端领域不断精进的小伙伴,在阅读的过程中,都会不断感知到自己的知识网络又拓展了。
以上只是大体介绍了本书的特色,本书还有很多亮点需要读者在阅读过程中去探索,比如在书中项目选取上的匠心独运,需要读者亲自去体会,相信你通读完全书后,也会跟我们得出同样的结论:本书是React技术的神级武器库。
本书能顺利出版,译者团队只是付出了一点苦劳。在这里,译者团队郑重感谢本书的作者David Griffiths和Dawn Griffiths,感谢他们给我们带来了这么好的作品,让React技术使用者能更好地提升自己。
David Griffiths是一位作家、培训师和软件开发者,拥有6年React开发经验。他为初创公司、零售商店、汽车制造商、国家体育机构和大型软件供应商编写过应用程序。
Dawn Griffiths是一位作家和培训师,拥有20多年的软件开发经验,有创建桌面和Web应用程序的丰富实践经验。
David和Dawn一起编写了数本书籍,其中包括Head First Android Development和Head First Kotlin。他们还为O'Reilly提供实时的在线培训。
前言1
第1章 创建应用程序7
1.1 创建简单的应用程序7
1.2 用Gatsby创建内容丰富的应用程序11
1.3 用Razzle创建通用应用程序14
1.4 使用Next.js管理服务端和客户端代码16
1.5 用Preact创建轻量级应用程序19
1.6 用nwb创建组件库22
1.7 用Webpacker给Rails项目添加React24
1.8 用Preact创建自定义HTML标签26
1.9 在组件开发中使用Storybook30
1.10 用Cypress在浏览器中测试代码33
第2章 路由37
2.1 使用响应式路由创建界面37
2.2 将状态移入路由43
2.3 使用MemoryRouter进行单元测试49
2.4 使用提示窗确认页面退出操作52
2.5 用React Transition Group创建过渡58
2.6 创建安全路由63
第3章 管理状态69
3.1 用reducer来管理复杂状态69
3.2 实现撤销功能78
3.3 创建和验证表单84
3.4 根据时间变化设置定时任务92
3.5 监控在线状态96
3.6 用Redux管理全局状态97
3.7 用Redux持久化库实现页面重新加载104
3.8 用reselect计算派生状态107
第4章 交互设计113
4.1 建立错误集中处理器113
4.2 创建交互式帮助向导118
4.3 在复杂交互中使用reducer125
4.4 添加按键交互131
4.5 对丰富的内容使用Markdown133
4.6 使用CSS类引入动画效果138
4.7 在React中引入动画库140
4.8 使用TweenOne给信息图添加动画145
第5章 连接后端服务151
5.1 将网络请求转化为Hook151
5.2 使用状态计数器自动更新数据157
5.3 使用token来取消网络请求165
5.4 使用Redux的中间件发起网络请求168
5.5 连接到GraphQL174
5.6 通过防抖减少网络负载181
第6章 组件库185
6.1 使用Material-UI创建Material Design风格的应用185
6.2 使用React Bootstrap为应用引入简单的用户界面192
6.3 使用React Window展示大量数据196
6.4 使用Material-UI创建响应式对话框199
6.5 使用React Admin创建管理控制台202
6.6 没有设计师?使用Semantic UI209
第7章 安全性215
7.1 使用安全API替代安全路由215
7.2 使用物理令牌进行身份验证223
7.3 使用HTTPS233
7.4 使用指纹认证236
7.5 敏感操作前验证登录信息243
7.6 使用单因素身份验证249
7.7 在Android设备上测试254
7.8 使用ESlint检查代码安全性256
7.9 让登录表单对浏览器更加友好260
第8章 测试263
8.1 使用React Testing Library264
8.2 使用Storybook做渲染测试271
8.3 使用Cypress做无服务器测试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 使用地标元素315
9.2 应用role、alt和title321
9.3 使用ESlint检查可访问性329
9.4 在运行时使用axe DevTools334
9.5 使用Cypress Axe自动化浏览器测试338
9.6 添加跳过按钮342
9.7 添加跳过区域348
9.8 将焦点锁定在模态窗口中356
9.9 使用Speech API创建页面阅读器359
第10章 性能365
10.1 使用浏览器性能工具366
10.2 使用Profiler跟踪渲染372
10.3 创建Profiler单元测试377
10.4 精确测量时间381
10.5 使用代码分割技术减小应用程序体积384
10.6 使用promise实现网络请求异步化391
10.7 使用服务端渲染394
10.8 使用Web Vitals404
第11章 渐进式Web应用407
11.1 使用Workbox创建Service Worker407
11.2 使用Create React App创建渐进式Web应用423
11.3 缓存第三方资源426
11.4 自动重新加载Service Worker430
11.5 添加通知434
11.6 使用后台同步进行离线修改441
11.7 添加自定义安装界面446
11.8 提供离线响应450