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

第一部分 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 ReactNative简介
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 组件与HooksAPI
3.3.1 借用函数式编程理解Hooks
3.3.2 ReactHooks有哪些
3.3.3 Hooks的使用规则
3.4 组件树
3.5 如何拆分React组件
3.5.1 用ReactDeveloperTools查看组件树
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 CSSModules
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