AI辅助React Web应用开发实践:基于React 19和GitHub Copilot电子书

内容提要

前言

资源与支持

第一部分 React基础

第1章 你好，React

1.1 React技术简介

1.2 贯穿全书的聊天应用oh-my-chat

1.3 快速创建React项目

1.3.1 准备开发环境

1.3.2 选择代码编辑器

1.3.3 AI辅助：安装AI代码编辑器

1.3.4 使用create-vite创建React项目

1.3.5 提交代码到代码仓库

1.4 编写基础应用代码

1.4.1 项目实现：编写聊天视图代码

1.4.2 AI辅助：生成联系人视图代码

1.5 React的技术生态

1.5.1 一些开源React组件库

1.5.2 什么是“React全家桶”

1.5.3 React Native简介

1.6 AI辅助的前端开发概述

1.7 小结

第2章 JSX语法

2.1 JSX语法基础

2.1.1 JSX是一种语法糖

2.1.2 JSX的“X”：标记的基本写法

2.1.3 JSX的“JS”：JavaScript表达式

2.1.4 JSX与HTML的异同

2.2 进一步理解JSX

2.2.1 前端开发的声明式与命令式

2.2.2 JSX的产物：React元素

2.2.3 不用JSX还能写React代码吗

2.3 编写JSX的常用模式

2.3.1 条件渲染

2.3.2 循环渲染

2.3.3 透传子元素

2.3.4 属性展开语法

2.4 AI辅助：生成JSX代码

2.5 小结

第3章 React组件

3.1 前端开发组件化

3.2 用函数定义React组件

3.3 组件与Hooks API

3.3.1 借用函数式编程理解Hooks

3.3.2 React Hooks有哪些

3.3.3 Hooks的使用规则

3.4 组件树

3.5 如何拆分React组件

3.5.1 用React Developer Tools查看组件树

3.5.2 拆分组件的原则和常见方法

3.5.3 项目实现：继续拆分oh-my-chat的组件

3.5.4 项目实现：将组件拆分为独立文件

3.5.5 组件拆分的一些心得

3.6 AI辅助：AI与组件树设计

3.6.1 AI辅助：用AI指导组件拆分

3.6.2 AI辅助：根据代码画出组件树

3.7 过时API：类组件

3.7.1 函数组件的崛起

3.7.2 还有必要学习类组件吗

3.8 小结

第4章 数据驱动（上）：React的数据

4.1 React是数据驱动的前端框架

4.2 Props：父组件传给子组件的数据

4.2.1 如何声明和使用props

4.2.2 项目实现：利用props拆分oh-my-chat列表组件

4.3 state：组件自己的状态数据

4.3.1 组件状态

4.3.2 核心Hook：useState

4.3.3 项目实现：利用state管理oh-my-chat列表数据

4.3.4 更新state的自动批处理

4.4 context：组件树共享的全局数据

4.5 小结

第5章 数据驱动（下）：组件间通信

5.1 React组件间通信

5.2 组件间通信模式：状态提升

5.2.1 什么是状态提升

5.2.2 项目实现：利用状态提升实现联系人列表和详情的联动

5.3 组件间通信模式：属性钻取

5.3.1 什么是属性钻取

5.3.2 项目实现：用context代替props切换视图

5.4 AI辅助：重构组件代码

5.5 React中的单向数据流

5.5.1 什么是数据流

5.5.2 React单向数据流

5.5.3 项目实现：分析oh-my-chat的数据流

5.6 小结

第6章 React的副作用

6.1 什么是副作用

6.1.1 前端领域的副作用

6.1.2 React中的副作用

6.1.3 React中的渲染和提交

6.2 核心Hook：useEffect

6.2.1 useEffect的基本用法

6.2.2 副作用的条件执行

6.2.3 副作用的清理函数

6.3 项目实现：在oh-my-chat加入副作用

6.3.1 项目实现：利用副作用读取远程消息

6.3.2 项目实现：显示发送消息的相对时间

6.3.3 项目实现：自动滚动到消息列表末尾

6.4 开发模式下的useEffect

6.4.1 依赖项数组的静态检查

6.4.2 为什么副作用会被触发两次

6.5 小结

第7章 事件处理

7.1 React合成事件

7.2 合成事件与原生DOM事件的区别

7.2.1 注册事件监听函数的方式不同

7.2.2 特定事件的行为不同

7.2.3 实际注册的目标DOM元素不同

7.3 合成事件的冒泡与捕获

7.4 受控组件

7.5 在React中使用原生DOM事件

7.5.1 使用原生DOM事件的典型场景

7.5.2 项目实现：使用原生DOM事件实现Click-outside

7.6 小结

第8章 组件样式

8.1 现代前端样式开发面临的挑战

8.2 React应用中开发样式的方案

8.2.1 内联样式

8.2.2 CSS Modules

8.2.3 CSS-in-JS

8.2.4 原子化CSS

8.3 如何选择合适的CSS方案

8.4 项目实现：为oh-my-chat实现CSS组件化

8.4.1 技术选型：Linaria框架

8.4.2 Linaria框架的安装和基本用法

8.4.3 嵌套选择器

8.4.4 在样式中使用组件数据

8.5 AI辅助：修改组件样式

8.5 小结

第二部分 React进阶

第9章 生命周期与虚拟DOM

9.1 React的生命周期

9.1.1 React更新过程

9.1.2 组件生命周期

9.1.3 副作用的生命周期

9.2 虚拟DOM

9.2.1 什么是虚拟DOM

9.2.2 真实DOM有什么问题

9.3 协调

9.3.1 Diffing算法

9.3.2 触发协调的场景

9.3.3 什么是Fiber协调引擎

9.3.4 Fiber中的重要概念和模型

9.3.5 协调过程是怎样的

9.4 小结

第10章 应用状态管理

10.1 什么是应用状态管理

10.2 不可变数据

10.2.1 什么是不可变数据

10.2.2 不可变数据在React中的作用

10.3 不可变数据的实现

10.3.1 手动实现

10.3.2 可持久化数据结构和Immutable.js

10.3.3 如何解决原理和直觉的矛盾

10.3.4 在React中使用Immer

10.4 再谈React应用状态

10.4.1 React应用中的状态分类

10.4.2 全局状态与局部状态

10.4.3 状态Hook：useReducer

10.5 状态管理框架Zustand

10.5.1 何时引入独立的状态管理框架

10.5.2 Zustand简介

10.5.3 利用Immer在Zustand中操作不可变数据

10.5.4 项目实现：利用Zustand + Immer共享状态数据

10.5.5 项目实现：利用Zustand + Immer实现修改和删除联系人

10.5.6 可否混用React内建state和Zustand

10.6 小结

第11章 优化性能与用户体验

11.1 性能优化的时机与思路

11.1.1 不要过早做性能优化

11.1.2 应用性能问题的表现

11.1.3 定位性能问题的根源

11.2 React组件的性能优化

11.2.1 利用性能优化Hook：useMemo缓存计算结果

11.2.2 利用React纯组件避免不必要的渲染

11.2.3 利用性能优化Hook：useCallback避免纯组件失效

11.2.4 区分低优先级的更新：startTransition和useTransition

11.3 React应用的整体性能优化

11.3.1 为生产环境构建

11.3.2 代码分割

11.4 AI辅助：分析React性能问题

11.5 AI辅助：分析React报错信息

11.6 小结

第12章 可扩展的React代码

12.1 React代码的分解和抽象

12.1.1 React应用代码中的抽象

12.1.2 项目实现：自定义Hooks

12.1.3 组件组合

12.2 可复用的自定义Hooks

12.3 可复用的React组件

12.3.1 项目实现：抽取公共组件

12.3.2 项目实现：在组件中暴露DOM元素

12.3.3 高阶组件

12.3.4 React组件库

12.4 可扩展的代码目录结构

12.4.1 典型的React项目文件目录结构

12.4.2 项目实现：大中型React项目推荐的文件目录结构

12.4.3 项目实现：模块导入路径过长怎么办

12.5 AI辅助：代码审查

12.6 小结

第三部分 Web应用开发

第13章 前端路由

13.1 前端路由简介

13.1.1 什么是前端路由

13.1.2 前端路由与传统后端路由的区别

13.2 利用React Router实现React前端路由

13.2.1 React Router基本用法

13.2.2 项目实现：为oh-my-chat加入前端路由

13.3 React代码分割和懒加载

13.3.1 React的代码分割

13.3.2 利用React.lazy和Suspense进行懒加载

13.3.3 利用React Router进行懒加载

13.4 小结

第14章 表单处理

14.1 表单处理的要素

14.2 表单的数据绑定

14.2.1 双向数据绑定

14.2.2 单向数据绑定

14.2.3 操作原生表单控件DOM

14.2.4 针对整个表单的批量数据绑定

14.3 表单验证

14.4 表单提交和错误处理

14.5 非受控组件与受控组件的区别

14.6 React 19新API：Form Actions

14.6.1 React 19中的Action

14.6.2 React 19新Hook：useFormStatus

14.6.3 React 19新Hook：useActionState

14.6.4 React 19新Hook：useOptimistic

14.7 基于React Hook Form开发表单

14.7.1 React Hook Form的基本用法

14.7.2 项目实现：用React Hook Form实现联系人表单

14.8 小结

第15章 与服务器端通信

15.1 与服务器端通信的要点

15.1.1 服务器端通信的异步性

15.1.2 HTTP请求的数据格式

15.1.3 认证授权

15.1.4 错误处理

15.1.5 缓存HTTP请求

15.1.6 安全性

15.2 在React中实现与服务器端通信

15.2.1 使用浏览器标准fetch API

15.2.2 使用开源网络请求库Axios

15.3 React 19：新use API

15.3.1 React 19新API：use(Promise)

15.3.2 React 19新API：use(Context)

15.4 异步状态管理库React Query

15.4.1 什么是异步状态管理

15.4.2 项目实现：使用React Query缓存对话列表的网络请求

15.4.3 项目实现：使用React Query变更对话列表数据

15.4.4 React Query的其他功能

15.5 小结

第16章 质量保证

16.1 前端项目的质量保证

16.1.1 质量保证与软件测试的区别与联系

16.1.2 人工测试与自动化测试

16.1.3 前端开发者应该了解的测试金字塔

16.2 React项目的端到端测试

16.2.1 使用Playwright创建端到端测试项目

16.2.2 项目实现：设计端到端测试用例

16.2.3 项目实现：使用Playwright开发端到端测试用例

16.2.4 项目实现：提升Playwright测试用例的可维护性

16.2.5 其他端到端测试工具

16.3 React单元测试

16.3.1 React单元测试的范围和目标

16.3.2 项目实现：用Jest + RTL编写单元测试

16.3.3 项目实现：为oh-my-chat的React组件编写单元测试

16.4 AI辅助：生成测试代码

16.5 小结

第17章 工程化与架构

17.1 配置React项目

17.1.1 React项目脚手架

17.1.2 构建与转译

17.1.3 静态代码检查与格式化

17.1.4 代码自动补全

17.1.5 自动化测试与代码覆盖率统计

17.2 使用TypeScript语言开发React项目

17.2.1 什么是TypeScript

17.2.2 项目实现：在React项目中使用TypeScript

17.2.3 项目实现：用TypeScript定义组件props类型

17.2.4 用TypeScript定义Hooks类型

17.2.5 在React项目中使用TypeScript的建议

17.3 部署React项目

17.3.1 部署构建后的静态资源文件

17.3.2 CI/CD持续集成与交付

17.4 线上监控

17.5 灵活的React架构

17.5.1 CSR、SSR与SSG

17.5.2 基于React的Web开发框架Next.js

17.6 对React未来的展望

17.7 AI辅助：前端开发的其他环节

17.8 小结

第18章 AI聊天机器人

18.1 项目实现：安装Ollama

18.2 项目实现：基于LangChain实现聊天机器人功能

18.2.1 项目实现：基础的机器人回复

18.2.2 项目实现：流式对话

18.2.3 项目实现：多轮对话

18.3 小结