React Cookbook中文版 87个案例带你精通React框架

React可以帮助你便捷地创建和处理应用程序，但要掌握如何将各部分功能有机地整合在一起却并不容易。如何验证表单？如何在保持代码精简的情况下实现复杂的多步骤用户操作？如何测试代码？如何保证可维护性？如何连接后端？如何提高代码可读性？本书可以帮你快速解决这些问题。 许多书籍教你如何入门、理解框架，或者如何将组件库与React结合使用，但很少提供代码示例来帮助你解决具体的问题。本书简明易懂，包含开发人员使用React解决常见问题时的示例代码，这些解决方案按主题和问题类型分类，便于你索引和查找。 通过阅读本书，你将学会： ? 向使用React构建的单页面应用程序引入丰富多彩的UI。 ? 创建可以离线安装和使用的渐进式Web应用程序。 ? 与REST、GraphQL等后端服务集成。 ? 自动测试应用程序的可访问性。 ? 使用WebAuthn引入指纹验证和安全令牌，增强应用程序的安全性。 ? 处理bug，并避免常见的功能和性能问题。

React可以帮助你便捷地创建和处理应用程序，但要掌握如何将各部分功能有机地整合在一起却并不容易。如何验证表单？如何在保持代码精简的情况下实现复杂的多步骤用户操作？如何测试代码？如何保证可维护性？如何连接后端？如何提高代码可读性？本书可以帮你快速解决这些问题。
许多书籍教你如何入门、理解框架，或者如何将组件库与React结合使用，但很少提供代码示例来帮助你解决具体的问题。本书简明易懂，包含开发人员使用React解决常见问题时的示例代码，这些解决方案按主题和问题类型分类，便于你索引和查找。
通过阅读本书，你将学会：
*向使用React构建的单页面应用程序引入丰富多彩的UI。
*创建可以离线安装和使用的渐进式Web应用程序。
*与REST、GraphQL等后端服务集成。
*自动测试应用程序的可访问性。
*使用WebAuthn引入指纹验证和安全令牌，增强应用程序的安全性。
*处理bug，并避免常见的功能和性能问题。

前言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