AI辅助React Web应用开发实践：基于React 19和GitHub Copilot_宋一玮_9787115677174

本书旨在系统介绍React框架，围绕React18及后续版本的核心开发范式--函数组件和Hooks展开，并以一款聊天应用的开发为例演示如何运用现代React技术开发Web应用。另外，本书还将探讨 AI技术在React前端开发中的应用实践。
本书分为3个部分。第一部分是React基础，从创建React项目入手，先系统介绍JSX 语法、React组件、基础HooksAPI等基础知识，再介绍如何使用props、state、context等数据驱动 React开发，如何利用副作用和事件处理实现业务、交互逻辑，以及如何开发组件样式。第二部分是React 进阶，深入介绍生命周期与虚拟DOM、应用状态管理及相关框架、优化性能与用户体验，并从自定义Hooks、代码复用等角度介绍如何开发可扩展的React代码。第三部分是Web应用开发，以聊天应用为载体，结合 React技术生态，演示前端路由、表单处理、与服务器端通信、质量保证、工程化与架构等，并以开发 AI 聊天机器人为例探索AI时代前端开发的创新方向。同时，本书会在相关章节中融入AI辅助开发的内容，涵盖AIIDE、智能体代码生成、组件拆分辅助、性能问题分析、样式代码生成和单元测试、代码审查等。
本书既适合有一定编程经验的Web应用程序开发人员阅读，也可作为高校及培训机构相关专业课程的教学用书。

第一部分 React基础
第 1章你好，React 3
1.1 React技术简介 3
1.2 贯穿全书的聊天应用oh-my-chat 3
1.3 快速创建React项目 5
1.3.1 准备开发环境 5
1.3.2 选择代码编辑器 7
1.3.3 AI辅助：安装AI代码编辑器 7
1.3.4 使用create-vite创建React项目 8
1.3.5 提交代码到代码仓库 12
1.4 编写基础应用代码 13
1.4.1 项目实现：编写聊天视图代码 13
1.4.2 AI辅助：生成联系人视图代码 20
1.5 React的技术生态 22
1.5.1 一些开源React组件库 23
1.5.2 什么是React全家桶 23
1.5.3 React Native简介 24
1.6 AI辅助的前端开发概述 24
1.7 小结 25
第 2章 JSX语法 26
2.1 JSX语法基础 27
2.1.1 JSX是一种语法糖 27
2.1.2 JSX的X：标记的基本写法 30
2.1.3 JSX的JS：JavaScript表达式 34
2.1.4 JSX与HTML的异同 35
2.2 进一步理解JSX 36
2.2.1 前端开发的声明式与命令式 36
2.2.2 JSX的产物：React元素 37
2.2.3 不用JSX还能写React代码吗 39
2.3 编写JSX的常用模式 39
2.3.1 条件渲染 40
2.3.2 循环渲染 42
2.3.3 透传子元素 45
2.3.4 属性展开语法 45
2.4 AI辅助：生成JSX代码 46
2.5 小结 48
第3章 React组件 49
3.1 前端开发组件化 50
3.2 用函数定义React组件 51
3.3 组件与Hooks API 52
3.3.1 借用函数式编程理解Hooks 53
3.3.2 React Hooks有哪些 55
3.3.3 Hooks的使用规则 55
3.4 组件树 56
3.5 如何拆分React组件 57
3.5.1 用React Developer Tools查看组件树 58
3.5.2 拆分组件的原则和常见方法 59
3.5.3 项目实现：继续拆分oh-my-chat的组件 60
3.5.4 项目实现：将组件拆分为独立文件 63
3.5.5 组件拆分的一些心得 65
3.6 AI辅助：AI与组件树设计 66
3.6.1 AI辅助：用AI指导组件拆分 66
3.6.2 AI辅助：根据代码画出组件树 67
3.7 过时API：类组件 68
3.7.1 函数组件的崛起 68
3.7.2 还有必要学习类组件吗 70
3.8 小结 71
第4章数据驱动（上）：React的数据 72
4.1 React是数据驱动的前端框架 73
4.2 Props：父组件传给子组件的数据 73
4.2.1 如何声明和使用props 74
4.2.2 项目实现：利用props拆分oh-my-chat列表组件 75
4.3 state：组件自己的状态数据 76
4.3.1 组件状态 76
4.3.2 核心Hook：useState 77
4.3.3 项目实现：利用state管理oh-my-chat列表数据 80
4.3.4 更新state的自动批处理 85
4.4 context：组件树共享的全局数据 86
4.5 小结 88
第5章数据驱动（下）：组件间通信 89
5.1 React组件间通信 89
5.2 组件间通信模式：状态提升 90
5.2.1 什么是状态提升 90
5.2.2 项目实现：利用状态提升实现联系人列表和详情的联动 91
5.3 组件间通信模式：属性钻取 93
5.3.1 什么是属性钻取 93
5.3.2 项目实现：用context代替props切换视图 94
5.4 AI辅助：重构组件代码 98
5.5 React中的单向数据流 100
5.5.1 什么是数据流 101
5.5.2 React单向数据流 101
5.5.3 项目实现：分析oh-my-chat的数据流 102
5.6 小结 103
第6章 React的副作用 104
6.1 什么是副作用 104
6.1.1 前端领域的副作用 105
6.1.2 React中的副作用 105
6.1.3 React中的渲染和提交 105
6.2 核心Hook：useEffect 106
6.2.1 useEffect的基本用法 106
6.2.2 副作用的条件执行 107
6.2.3 副作用的清理函数 109
6.3 项目实现：在oh-my-chat加入副作用 110
6.3.1 项目实现：利用副作用读取远程消息 110
6.3.2 项目实现：显示发送消息的相对时间 114
6.3.3 项目实现：自动滚动到消息列表末尾 116
6.4 开发模式下的useEffect 117
6.4.1 依赖项数组的静态检查 117
6.4.2 为什么副作用会被触发两次 118
6.5 小结 118
第7章事件处理 119
7.1 React合成事件 120
7.2 合成事件与原生DOM事件的区别 120
7.2.1 注册事件监听函数的方式不同 120
7.2.2 特定事件的行为不同 121
7.2.3 实际注册的目标DOM元素不同 122
7.3 合成事件的冒泡与捕获 122
7.4 受控组件 123
7.5 在React中使用原生DOM事件 124
7.5.1 使用原生DOM事件的典型场景 124
7.5.2 项目实现：使用原生DOM事件实现Click-outside 125
7.6 小结 126
第8章组件样式 127
8.1 现代前端样式开发面临的挑战 128
8.2 React应用中开发样式的方案 128
8.2.1 内联样式 128
8.2.2 CSS Modules 129
8.2.3 CSS-in-JS 130
8.2.4 原子化CSS 131
8.3 如何选择合适的CSS方案 131
8.4 项目实现：为oh-my-chat实现CSS组件化 132
8.4.1 技术选型：Linaria框架 133
8.4.2 Linaria框架的安装和基本用法 133
8.4.3 嵌套选择器 136
8.4.4 在样式中使用组件数据 138
8.5 AI辅助：修改组件样式 139
8.5 小结 140
第二部分 React进阶
第9章生命周期与虚拟DOM 143
9.1 React的生命周期 144
9.1.1 React更新过程 144
9.1.2 组件生命周期 144
9.1.3 副作用的生命周期 147
9.2 虚拟DOM 147
9.2.1 什么是虚拟DOM 147
9.2.2 真实DOM有什么问题 148
9.3 协调 149
9.3.1 Diffing算法 149
9.3.2 触发协调的场景 150
9.3.3 什么是Fiber协调引擎 150
9.3.4 Fiber中的重要概念和模型 151
9.3.5 协调过程是怎样的 152
9.4 小结 155
第 10章应用状态管理 156
10.1 什么是应用状态管理 157
10.2 不可变数据 158
10.2.1 什么是不可变数据 158
10.2.2 不可变数据在React中的作用 159
10.3 不可变数据的实现 160
10.3.1 手动实现 160
10.3.2 可持久化数据结构和Immutable.js 160
10.3.3 如何解决原理和直觉的矛盾 161
10.3.4 在React中使用Immer 161
10.4 再谈React应用状态 162
10.4.1 React应用中的状态分类 162
10.4.2 全局状态与局部状态 164
10.4.3 状态Hook：useReducer 165
10.5 状态管理框架Zustand 166
10.5.1 何时引入独立的状态管理框架 166
10.5.2 Zustand简介 167
10.5.3 利用Immer在Zustand中操作不可变数据 168
10.5.4 项目实现：利用Zustand Immer共享状态数据 169
10.5.5 项目实现：利用Zustand Immer实现修改和删除联系人 170
10.5.6 可否混用React内建state和Zustand 172
10.6 小结 172
第 11章优化性能与用户体验 173
11.1 性能优化的时机与思路 173
11.1.1 不要过早做性能优化 174
11.1.2 应用性能问题的表现 174
11.1.3 定位性能问题的根源 175
11.2 React组件的性能优化 176
11.2.1 利用性能优化Hook：useMemo缓存计算结果 176
11.2.2 利用React纯组件避免不必要的渲染 177
11.2.3 利用性能优化Hook：useCallback避免纯组件失效 179
11.2.4 区分低优先级的更新：startTransition和useTransition 181
11.3 React应用的整体性能优化 183
11.3.1 为生产环境构建 183
11.3.2 代码分割 183
11.4 AI辅助：分析React性能问题 183
11.5 AI辅助：分析React报错信息 185
11.6 小结 186
第 12章可扩展的React代码 187
12.1 React代码的分解和抽象 187
12.1.1 React应用代码中的抽象 188
12.1.2 项目实现：自定义Hooks 188
12.1.3 组件组合 190
12.2 可复用的自定义Hooks 190
12.3 可复用的React组件 191
12.3.1 项目实现：抽取公共组件 192
12.3.2 项目实现：在组件中暴露DOM元素 194
12.3.3 高阶组件 196
12.3.4 React组件库 198
12.4 可扩展的代码目录结构 198
12.4.1 典型的React项目文件目录结构 198
12.4.2 项目实现：大中型React项目推荐的文件目录结构 199
12.4.3 项目实现：模块导入路径过长怎么办 200
12.5 AI辅助：代码审查 201
12.6 小结 202
第三部分 Web应用开发
第 13章前端路由 205
13.1 前端路由简介 205
13.1.1 什么是前端路由 205
13.1.2 前端路由与传统后端路由的区别 206
13.2 利用React Router实现React前端路由 207
13.2.1 React Router基本用法 207
13.2.2 项目实现：为oh-my-chat加入前端路由 208
13.3 React代码分割和懒加载 210
13.3.1 React的代码分割 210
13.3.2 利用React.lazy和Suspense进行懒加载 211
13.3.3 利用React Router进行懒加载 212
13.4 小结 212
第 14章表单处理 213
14.1 表单处理的要素 214
14.2 表单的数据绑定 214
14.2.1 双向数据绑定 214
14.2.2 单向数据绑定 215
14.2.3 操作原生表单控件DOM 215
14.2.4 针对整个表单的批量数据绑定 216
14.3 表单验证 217
14.4 表单提交和错误处理 219
14.5 非受控组件与受控组件的区别 220
14.6 React 19新API：Form Actions 221
14.6.1 React 19中的Action 221
14.6.2 React 19新Hook：useFormStatus 223
14.6.3 React 19新Hook：useActionState 224
14.6.4 React 19新Hook：useOptimistic 225
14.7 基于React Hook Form开发表单 227
14.7.1 React Hook Form的基本用法 227
14.7.2 项目实现：用React Hook Form实现联系人表单 228
14.8 小结 231
第 15章与服务器端通信 232
15.1 与服务器端通信的要点 233
15.1.1 服务器端通信的异步性 233
15.1.2 HTTP请求的数据格式 234
15.1.3 认证授权 234
15.1.4 错误处理 235
15.1.5 缓存HTTP请求 235
15.1.6 安全性 235
15.2 在React中实现与服务器端通信 236
15.2.1 使用浏览器标准fetch API 236
15.2.2 使用开源网络请求库Axios 237
15.3 React 19：新use API 237
15.3.1 React 19新API：use(Promise) 237
15.3.2 React 19新API：use(Context) 240
15.4 异步状态管理库React Query 240
15.4.1 什么是异步状态管理 240
15.4.2 项目实现：使用React Query缓存对话列表的网络请求 241
15.4.3 项目实现：使用React Query变更对话列表数据 242
15.4.4 React Query的其他功能 245
15.5 小结 245
第 16章质量保证 246
16.1 前端项目的质量保证 246
16.1.1 质量保证与软件测试的区别与联系 247
16.1.2 人工测试与自动化测试 247
16.1.3 前端开发者应该了解的测试金字塔 248
16.2 React项目的端到端测试 249
16.2.1 使用Playwright创建端到端测试项目 249
16.2.2 项目实现：设计端到端测试用例 250
16.2.3 项目实现：使用Playwright开发端到端测试用例 251
16.2.4 项目实现：提升Playwright测试用例的可维护性 252
16.2.5 其他端到端测试工具 253
16.3 React单元测试 254
16.3.1 React单元测试的范围和目标 254
16.3.2 项目实现：用Jest RTL编写单元测试 254
16.3.3 项目实现：为oh-my-chat的React组件编写单元测试 257
16.4 AI辅助：生成测试代码 258
16.5 小结 260
第 17章工程化与架构 261
17.1 配置React项目 261
17.1.1 React项目脚手架 262
17.1.2 构建与转译 262
17.1.3 静态代码检查与格式化 264
17.1.4 代码自动补全 264
17.1.5 自动化测试与代码覆盖率统计 264
17.2 使用TypeScript语言开发React项目 265
17.2.1 什么是TypeScript 265
17.2.2 项目实现：在React项目中使用TypeScript 266
17.2.3 项目实现：用TypeScript定义组件props类型 266
17.2.4 用TypeScript定义Hooks类型 267
17.2.5 在React项目中使用TypeScript的建议 268
17.3 部署React项目 268
17.3.1 部署构建后的静态资源文件 268
17.3.2 CI CD持续集成与交付 269
17.4 线上监控 269
17.5 灵活的React架构 270
17.5.1 CSR、SSR与SSG 270
17.5.2 基于React的Web开发框架Next.js 272
17.6 对React未来的展望 272
17.7 AI辅助：前端开发的其他环节 273
17.8 小结 274
第 18章 AI聊天机器人 275
18.1 项目实现：安装Ollama 276
18.2 项目实现：基于LangChain实现聊天机器人功能 276
18.2.1 项目实现：基础的机器人回复 276
18.2.2 项目实现：流式对话 278
18.2.3 项目实现：多轮对话 279
18.3 小结 280

你还可能感兴趣

我要评论