AI辅助React Web应用开发实践：基于React 19和GitHub Copilot

版权信息

书名：AI辅助React Web应用开发实践：基于React 19和GitHub Copilot

ISBN：978-7-115-67717-4

本书由人民邮电出版社发行数字版。版权所有，侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。

如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。

版  权

著    宋一玮

责任编辑 贾 静

人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

邮编　100164 　电子邮件　315@ptpress.com.cn

网址　http://www.ptpress.com.cn

读者服务热线：(010)81055410

反盗版热线：(010)81055315

内 容 提 要

本书旨在系统介绍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辅助开发的内容，涵盖AI IDE、智能体代码生成、组件拆分辅助、性能问题分析、样式代码生成和单元测试、代码审查等。

本书既适合有一定编程经验的Web应用程序开发人员阅读，也可作为高校及培训机构相关专业课程的教学用书。

前  言

当生成式AI能在30s内产出完整页面代码，前端开发者该如何重新定义自己的价值？

2023年以来，生成式AI技术的爆发式发展，正在重塑软件开发的基本范式。目前，这项技术已经可以有效地辅助生产级别的软件开发。不只是编程环节，软件开发的其他环节，如设计、测试、持续集成、运维等，都在不同程度上引入了AI技术。在前端领域，GitHub Copilot、Vercel v0等工具已实现通过自然语言生成组件代码，Claude等大模型甚至能独立完成模块开发。

根据Gartner预测，到2028年将有75%的软件工程师使用AI辅助开发。这带来了如下两个问题。

● 在生成式AI能产出可用代码的今天，为何还要深入掌握React等框架？

● 前端工程师是否会被AI取代？

其实，答案就藏在技术变革的规律中：AI越是强大，开发者越需要精准、高效的技术判断力。作为一位拥有20多年前端开发经验的“老兵”，我的观点是，持续夯实技术基础、深入业务实践、保持开放学习心态。具体来说，就是以下两点。

（1）只有扎实掌握基础的开发框架，才能有效运用AI辅助编程。目前，AI在执行大型任务时仍存在较高不确定性，但如果将大型任务分解为足够“小”的任务，AI完成任务的成功率和准确度将显著提升。因此，工程师（无论是前端工程师还是后端工程师）需要具备以下能力。

● 能够精准拆解开发任务。

● 熟练掌握常用的开发框架的原理与实践性内容。

● 明确AI工具的能力边界，掌握提示语（Prompt）设计技巧。

● 能够准确评估AI的产出质量。

（2）AI与前端工程师间是协同关系，而不是替代关系。目前，无论是Cursor还是GitHub Copilot都在积极推进智能体（Agent）技术的发展。在智能体中，AI能自主决策、完成更复杂的开发任务，开发者如何与智能体高效协作已成为业界新课题，同时也带来了企业实践中无法回避的问题：AI开发的代码由谁来负责。所谓负责，包括产品经理与谁对接，谁与后端开发者整合联调，谁来负责部署上线、运维，谁负责修复bug，谁负责版本迭代，等等。只要代码的负责人还是工程师，就意味着工程师不仅要理解智能体的工作过程或生成的代码，还必须有能力随时接管智能体的工作。

AI能够显著提升开发效率，但它永远无法替代开发者对技术本质的深刻理解和对业务需求的精准把控。

在这样的背景下，React展现了强大的生命力。在2024年，React迎来了时隔3年的重大版本更新，即React 19。React 19带来了多项突破性改进；内置表单处理减少了冗余代码，增强的异步处理能够灵活应对复杂交互场景，服务器组件则为全栈开发开辟了新路径。这些改进直击长期存在的开发痛点，使React在AI时代依然保持着强大的竞争力。

作为Meta开源的声明式UI框架，React始终引领着前端技术趋势。

● 2023年以40.58%使用率稳居框架榜首（Stack Overflow数据）。

● 从React 18开始全面支持“函数组件+ Hooks”的现代开发范式。

● 生态库（如Zustand、React Router）持续进化，形成了完整的技术矩阵。

无论是门户网站、企业级Web应用，还是移动端甚至PC端桌面App，React框架展现出广泛的应用前景。从就业方面来看，2021年以来，初、中、高级React前端开发岗位的数量、薪资水平均显著高于其他框架。

但不可忽视的是，技术快速迭代也带来学习焦虑：当框架不断升级，开发者应该如何避免陷入“学不动了”的困境？这种焦虑本质上源于“为学而学”的误区。本书给出的解决方案是，以Web应用开发为目标驱动学习，使技术真正为业务需求服务。

因此，本书有如下两大技术支点。

（1）现代React深度实践。

本书对React的讲解不局限于React框架本身，而是全面覆盖使用React开发Web应用的各个环节，包括React的概念、API和使用方法，以及为满足Web应用开发需求而衍生的React相关技术生态，如Zustand、React Router、React Hook Form等。

● 基于React 19（兼容React 18），聚焦函数组件与Hooks。

● 淡化类组件等传统模式，首选useState/useEffect等核心API。

● 选用React Hook Form等适配Hooks的生态库。

● 详解React 19新增和增强的部分API，如startTransition支持异步回调、ref可作为prop传递等，相关内容以“React 19”作为标题前缀。

（2）AI辅助开发实战。

为应对未来AI技术与开发工作深度融合的趋势，本书在系统讲解React应用开发的基础上，特别加入有关AI辅助开发的实践内容。本书以React及相关技术生态为主线，将AI相关内容嵌入对应章节中，并以“AI辅助”作为标题前缀。

● 在组件开发、单元测试等环节植入AI辅助场景。

● 演示如何用大模型开发聊天机器人等AI功能。

● 构建“人工-AI”协作的完整工作流。

通过系统学习全书AI相关内容，你将全面了解AI辅助前端开发的最新实践，并掌握基于AI辅助的React Web应用开发技能。

为了尽可能降低学习门槛并确保能够学以致用，本书贯彻如下写作策略。

● 循序渐进，以一款聊天应用的完整开发过程为线索串联知识点。为实现这一目标，部分复杂知识点被特意放在后续章节中，以避免打断学习思路。例如，useReducer接口虽然在设计实现上与useState相近，但如果放在第一部分介绍React基础知识时讲解有可能会打乱学习节奏，因此特意被安排在第二部分介绍React技术进阶时再做讲解。

● 学习一门技术，重在触类旁通。因此，本书在讲解React技术细节的同时深入剖析每个知识点所解决的实际问题，旨在培养迁移应用的能力。

● 采用贯穿全书的聊天应用，各章节围绕这个聊天应用循序渐进地拓展功能，而不是孤立展示分散的示例代码，这种方式有助于快速掌握项目上下文、理解局部功能与整体架构的关联。

贯穿全书的样例应用

无论是学习React技术还是其他软件开发技术，动手编写代码都是最有效的学习方式之一。本书主要讲解使用现代React技术开发Web应用，动手编写实践项目代码自然成为核心内容。纵观市面上的图书和在线课程，大多会为单个知识点提供相对独立的样例代码。这种方式更具针对性，可以通过更少的代码阐释相关知识点，但同时也存在明显缺陷——与项目实践存在巨大差距。在现实的软件开发项目中，开发者需要整合多种技术栈，即使限定于单一项技术领域，也需要综合应用这项技术所包含的多个技术点。

鉴于此，选择一款合适的应用作为本书的示例至关重要。首先，该应用应具备典型性、扩展性和复杂性，但涉及的业务逻辑又不宜过于复杂，以确保不受行业背景或技术门槛的限制。基于这些考量，本书选择一款名为“我聊”的聊天应用（项目名为oh-my-chat）作为示例，其功能和界面与“微信”桌面端类似。

本书建议跟随各章节内容，逐步动手编写oh-my-chat项目的代码。在完成全书学习后，你不仅能掌握React的核心知识点，还可以收获一套类似“微信”桌面端的Web应用前端源代码。如果希望系统学习React核心知识点后再动手实践，可以从https://github.com/evisong/oh-my-chat或https://gitee.com/evisong/oh-my-chat获取oh-my-chat应用的完整代码。在oh-my-chat的代码中，我已经根据章节划分记录了修改历史，并添加了版本标签。

本书内容

全书共18章，可以分成React基础、React进阶、应用开发3个部分。这3个部分形成的知识体系结构及其与聊天应用之间的关系，可以参考图0-1。

图0-1中由上至下的箭头展示了本书的学习路径：从基础知识开始逐步深入，同时从实现基本功能开始不断为oh-my-chat添加更高级的功能，并针对开发中遇到的具体问题持续优化和重构代码。

图0-1　全书知识体系结构

第一部分“React基础”（第1章到第8章）。本部分以React概述为起点，在简要介绍React技术的同时，介绍如何从零开始逐步创建React项目，并实现oh-my-chat的初始页面；然后，逐章介绍JSX语法、React组件、基础Hooks API，其间穿插如何在oh-my-chat页面中创建和分拆React组件；最后，讲解props、state、context等数据是如何驱动React开发的，以及如何利用React的副作用和事件处理实现业务、交互逻辑，同时会为oh-my-chat加入数据流和基础的交互功能。

第二部分“React进阶”（第9章到第12章）。本部分聚焦React底层的原理，首先介绍React的生命周期与虚拟DOM机制；然后展开React应用开发中的3个关键主题，包括应用状态管理及相关框架，性能与用户体验的优化，以及React代码的可扩展性；最后，展示如何将不可变数据、独立应用状态管理框架和公共组件等技术应用到oh-my-chat项目中。

第三部分“Web应用开发”（第13章到第18章）。本部分将跳出React本身，探索React的技术生态。首先，以开发完整的Web应用为线索，系统讲解前端路由、表单处理、与服务器端通信这3大主题，并在oh-my-chat中实践React Router、React Hook Form和React Query这3个框架；然后，介绍包含单元测试、端到端测试在内的React项目的质量保证，以及前端工程化实践，以帮助大家更好地应对大型React项目的开发和团队协作；最后，利用开源大语言模型（Large Language Model，LLM）为oh-my-chat项目加入聊天机器人功能，探索React应用在AI时代的新边界！

从第2章开始，每章开篇均会提供本章的知识地图及项目实现，用来展示本章的核心知识点，以及与oh-my-chat项目相关的实践内容。“React基础”“React进阶”“Web应用开发”这3大部分的叶子节点，基本与本节目录一一对应，其中带有星星图标的节点代表对应章节包含oh-my-chat项目的实现；带有小飞机图标的节点则代表AI辅助React Web应用开发的相关内容；带有对钩图标的节点则代表已在前面章节介绍过的内容。知识点与项目实现通过虚线关联，形成直观对应关系。

需要注意的是，本书以CSR（Client-Side Rendering）架构为核心，系统讲解React在浏览器环境中的应用；17.5节会简要提及React的另一大趋势SSR（Server-Side Rendering），即React在服务器环境中的应用，但不会深入展开介绍。这是因为在实际开发中，基于SSR功能的需求通常通过Next.js等全栈框架实现，直接使用React SSR API的场景较少。

本书适合以下人士阅读。

● 初级前端开发者，具备HTML、CSS和JavaScript基础，希望系统掌握React技术。

● 中级前端开发者，熟悉Vue、Angular或其他Web前端技术，计划转向React技术栈。

● 曾使用React 16.8之前版本的开发者，希望学习React技术最新特性和最佳实践。

本书配套资源

从https://github.com/evisong/oh-my-chat或https://gitee.com/evisong/oh-my-chat，可以获取本书oh-my-chat应用的完整代码，本书的知识地图及项目实现，以及其他彩图文件。

写给AI时代的开发者

作为一名从jQuery到React技术演进的亲历者，我深刻认识到：框架会变，但解决问题的思维方式永不过时。在oh-my-chat项目中实践AI辅助开发时，你将真切体会到：

● 只有能够精准描述需求的开发者，才能训练出真正有效的AI助手；

● 只有深入理解Hooks依赖数组等核心机制，才能识别出AI生成代码中的潜在bug；

● 只有具备组件设计经验的开发者，才能将AI生成的代码重构为可维护的优雅实现。

这并不是简单的技术迭代，而是开发者能力的全面进化。当AI承担基础代码的“搬运”工作，工程师就能更专注于业务的本质——用技术为用户创造价值。

一款软件能否被用户认可，很大程度上取决于其“看得见、摸得到”的部分：用户界面（User Interface，UI）。UI是用户与软件交互的桥梁，用户通过UI传递操作指令，软件也通过UI反馈系统响应。在AI重构代码生产的新时代，前端开发者作为用户与产品的第一触点，凭借对界面交互细节的极致把控和对用户需求的精准解码，具备不可替代的核心竞争力。

宋一玮

2025年3月于北京

资源与支持

资源获取

本书提供如下资源：

● 配套代码

● 配套视频及PPT

● 书中彩图文件

● 本书知识地图及项目实现

● 异步社区7天VIP会员

要获得以上资源，您可以扫描下方二维码，根据指引领取。

提交勘误

作者和编辑已尽最大努力来确保书中内容的准确性，但难免会存在疏漏。欢迎您将发现的问题反馈给我们，帮助我们提升图书的质量。

当您发现错误时，请登录异步社区（https://www.epubit.com），按书名搜索，进入本书页面，点击“发表勘误”，输入勘误信息，点击“提交勘误”按钮即可（见下图）。本书的作者和编辑会对您提交的勘误进行审核，确认并接受后，您将获赠异步社区的100积分。积分可用于在异步社区兑换优惠券、样书或奖品。

与我们联系

我们的联系邮箱是contact@epubit.com.cn。

如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名，以便我们更高效地做出反馈。

如果您有兴趣出版图书、录制教学视频，或者参与图书翻译、技术审校等工作，可以发邮件给本书的责任编辑（jiajing@ptpress.com.cn）。

如果您所在的学校、培训机构或企业想批量购买本书或异步社区出版的其他图书，也可以发邮件给我们。

如果您在网上发现有针对异步社区出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接发邮件给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。

关于异步社区和异步图书

“异步社区”（www.epubit.com）是由人民邮电出版社创办的IT专业图书社区，于2015年8月上线运营，致力于优质内容的出版和分享，为读者提供高品质的学习内容，为作译者提供专业的出版服务，实现作者与读者的在线交流互动，以及传统出版与数字出版的融合发展。

“异步图书”是异步社区策划的精品IT图书的品牌，依托人民邮电出版社在计算机图书领域30余年的发展与积淀。异步图书面向IT行业以及各行业使用相关技术的用户。

第一部分 React基础

本部分介绍React基础内容，共8章。

首先以快速创建React项目的方式介绍React的基础概念，然后逐章介绍JSX语法、React组件、基础Hooks API，讲解props、state、context等数据是如何驱动React开发的，如何利用副作用和事件处理实现业务、交互逻辑，以及如何开发组件样式。

经过这一部分的学习，你可以掌握React的基本概念、代码写法和主要接口，同时跟随相关章节完成基础oh-my-chat应用的开发实践，具备独立开发简单React Web应用的能力。

第1章 你好，React

学习一门新技术往往令人充满期待又伴随“能否学好”的担忧，而经典的“Hello, World！”程序正是消除这种不安的最佳起点。本章将带领你在入门和精进React的路上迈出坚实的一步。

本章首先简要介绍React技术，然后提出贯穿全书的聊天应用oh-my-chat的需求和原型设计，接着介绍如何搭建开发环境、创建React项目脚手架、为oh-my-chat应用编写第一段React代码，随后从全局视角出发介绍React技术的生态，最后介绍AI IDE的安装与利用AI生成代码的方法。

1.1　React技术简介

React是声明式、组件化的前端开发框架。与传统的前端开发框架相比较，React具有以下显著优势。

● React采用声明式的JSX语法，融合模板功能与JavaScript语言的表达能力，易学性、灵活性和性能表现远超其他模板引擎。

● 在视图之外，React设计了一套单向数据流机制进行应用状态管理。从视图事件触发状态变更，到状态变更结果汇总，再通过不可变数据传递给相关视图，最终由视图根据传入的数据决定是否重新渲染。

● 开发者将视图和相关逻辑封装为独立的React组件，React底层基于轻量级虚拟DOM模型，通过智能对比新旧两个虚拟DOM来实现高效渲染。

● 从16.8版本起，React引入的Hooks API显著增强了函数式编程能力，在极大程度上简化了组件开发和代码复用。Hooks不仅引领了前端技术开发的新趋势，还巩固了React的领先地位。

与同期的Angular等框架相比，React的设计理念更为克制，并没有试图囊括所有Web应用开发需求。这正是React得以流行的重要原因之一。React专注于自身的核心优势（声明式、组件化、单向数据流），有效避免了功能冗余带来的学习成本和使用负担，并且通过开放生态鼓励第三方创新，从而造就了繁荣的React技术生态。

这种架构使React既能保持轻量高效，又能满足各类Web应用开发需求。

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

本书将设计一个名为“我聊”的聊天应用作为案例，参考微信macOS版的交互设计。为方便阅读，全书正文及代码均使用oh-my-chat作为项目名称。

oh-my-chat的产品需求可以分为功能需求和非功能需求。oh-my-chat的核心功能是基于短文本的、类似短信的即时通信，辅以联系人管理功能，因此功能需求包括消息功能、联系人功能和其他功能。

其中，消息功能可以描述为如下两项。

● 用户可以与特定联系人建立对话。在对话中用户可以发送、接收消息，消息格式为纯文本，已发送或已接收的消息不可以修改。

● 用户可以删除消息，也可以删除整个对话。

联系人功能可以描述为如下3项。

● 用户可以添加、修改联系人。修改联系人时，与该联系人的对话中显示的联系人信息应自动同步更新。

● 用户可以修改本人信息。

● 用户可以删除联系人，同时将自动删除与该联系人的对话。

其他功能包括用户注册登录等，但考虑到篇幅和代码复杂度，本书将忽略这些功能实现。

oh-my-chat的非功能需求是仅开发桌面端Web应用，需支持主流现代浏览器，无须支持IE等老旧浏览器和移动端浏览器。由于oh-my-chat项目的主要用途是辅助学习React的样例代码，因此其服务器端接口均采用模拟实现，不涉及多用户系统和即时通信功能。

接下来是oh-my-chat的原型设计。oh-my-chat有两个主要视图——聊天视图和联系人视图，产品界面左侧的纵向导航图标按钮用于实现视图切换功能。在两种视图下，主要内容区域都是两栏式设计——左栏是列表栏，右栏是详情栏。

聊天视图的原型如图1-1所示。左栏是对话列表，左栏顶部可以搜索对话，也可以新建对话。当选中左栏某一对话后，右栏会显示该对话的详细信息，顶部显示联系人名称，中部显示聊天消息，底部输入框可以输入新消息。

图1-1　oh-my-chat原型设计：聊天视图

联系人视图的原型如图1-2所示。左栏是联系人列表，左栏顶部可以搜索联系人，也可以添加联系人。当选中左栏某一联系人后，右栏会显示联系人的详情（包括联系人的头像和昵称），右栏底部有3个功能按钮，分别用于给该联系人发消息、修改联系人和删除联系人。

图1-2　oh-my-chat原型设计：联系人视图

这里描述的oh-my-chat的功能需求比传统软件需求文档更加简明扼要。同时，上述功能只是oh-my-chat项目整体需求中的一小部分，其他需求会在后续章节中随着项目进展逐步完善和补充。

1.3　快速创建React项目

在明确产品需求后，本节将以尽量简化的步骤，快速创建一个可以在浏览器中运行的React项目。

1.3.1　准备开发环境

在各大主流操作系统中，前端开发环境都有成熟的解决方案。本书将以macOS作为主要开发环境并编写样例代码。当然，其中涉及的大多数技术和技巧均具有跨平台特性，本书也会在必要时特别说明Windows系统的开发注意事项。

前端开发环境的基础是Node.js，大部分主流前端开发工具都依赖Node.js运行。下面将介绍Node.js的安装方法。如果已安装Node.js 22，可以跳过本节内容。

Node.js的版本迭代迅速，2023年的主流版本是Node.js 18，2025年则升级为Node.js 22，具体可以参考其官网的“Node.js版本”页面。虽然在实际开发中不必追逐Node.js的最新版本，但这里建议尽量使用最新或次新的长期支持（long term support，LTS）版本。选择新的LTS版本意味着加入新功能的同时，既有功能更加成熟稳定，安全补丁等的维护和更新也更及时。本书使用的是Node.js 22。

由于Node.js的版本迭代迅速，开发者不仅需要确保开发环境的相对稳定，还要应对不同项目因使用不同Node.js版本带来的挑战。因此，建议开发者利用Node.js版本管理工具提升切换Node.js版本的效率，以降低切换过程对开发环境的影响。

目前主流的Node.js版本管理工具有nvm和fnm等。nvm基于SHELL脚本语言开发，在macOS和Linux上运行良好，但不支持Windows系统。fnm是基于Rust语言开发的跨平台工具，其功能与nvm类似，可以在一台计算机上安装多个Node.js版本，并根据需要随时切换。fnm具备智能版本切换功能，能够根据项目配置文件（支持nvm的.nvmrc文件）在开发者切换工作目录时自动切换至对应的Node.js版本。相比nvm，fnm不仅运行效率更高，而且支持包含Windows在内的多平台环境。

无论你使用的操作系统是macOS、Linux还是Windows，都可以访问fnm官网下载对应的版本，再按照安装向导将其集成到命令行环境中。

当然，对于macOS系统，更便捷的安装方式是直接通过命令行执行以下命令：

brew install fnm

安装成功后在.bashrc或.zshrc配置文件中添加以下配置，保存并重启命令行窗口使配置生效：

eval "$(fnm env --use-on-cd)"

其中，--use-on-cd参数会为cd命令添加一个智能钩子，在切换工作目录时自动检测当前目录是否存在.nvmrc或.node-version配置文件，若存在则自动切换至指定的Node.js版本。这一特性对需要同时维护多个依赖不同Node.js版本的项目非常实用。

安装fnm后，可以使用以下命令安装最新的Node.jsLTS版本：

$ fnm install --lts
Installing Node v22.15.0 (arm64)

使用以下命令查看版本信息：

$ node -v
v22.15.0

当开发环境中安装有多个Node.js版本时，新建命令行窗口后默认使用不同的Node.js版本。这时可以通过以下命令查看当前已经安装的所有版本：

$ fnm list
* v16.20.2
* v18.18.2 default
* v22.15.0 lts-latest
* system

如果希望默认使用新安装的LTS版本，可以设置别名default指向的版本：

$ fnm alias 20 default
$ fnm list
* v16.20.2
* v18.18.2
* v22.15.0 default, lts-latest
* system

这样，每当用户新开命令行时，都会默认使用Node.js的22 LTS版本。

1.3.2　选择代码编辑器

准备好开发环境后，建议安装一个适合前端开发的代码编辑器。本书推荐微软的Visual Studio Code（即VS Code），它为JavaScript和TypeScript提供了强大的语言服务器（Language Server）支持，在语法检查、代码补全等方面表现优异，其丰富的插件生态能够显著提升React前端开发效率。

安装VS Code后，用户可以通过在VS Code菜单上单击View→Command Palette→输入install code→选择提示的Shell Command: Install 'code' command in PATH并按下Enter键将其添加到命令行环境，即可在命令行环境中通过code/path/to/my/project命令快速用VS Code打开项目目录。

新安装的VS Code默认已内置对JavaScript和React的支持，开箱即用。在开始编写代码之前，建议为VS Code安装以下插件（extension）。具体方法是在菜单栏中单击View→Extensions打开插件市场，在搜索框中输入插件名称或标识符（Identifier），找到对应插件后安装。

● VS Code的简体中文语言包标识符为ms-ceintl.vscode-language-pack-zh-hans。VS Code默认提供英文界面，如果希望使用简体中文界面，可以安装这个语言包。

● ESLint插件标识符为dbaeumer.vscode-eslint。ESLint是JavaScript和TypeScript语言生态中广泛使用的静态代码检查工具，可以根据社区规范或者自定义规则检测代码问题，并提供自动修复功能。例如，检测JavaScript代码中声明后未使用的变量，或使用了未声明的变量，这些都会被ESLint及时检查出来，并在代码编辑器中高亮显示，方便开发者根据提示及时修正。

● Stylelint插件标识符为stylelint.vscode-stylelint。Stylelint插件专注于CSS等样式表的静态代码检查，帮助开发者发现CSS代码中的潜在错误并应用代码规范。

● Prettier代码格式化插件标识符为esbenp.prettier-vscode。Prettier是一个智能的代码格式化工具。例如，决定使用空格还是tab进行缩进，控制左大括号“{”写在行尾还是另起一行，if语句与相连的左括号“(”之间是否需要保留空格，Prettier默认应用社区主流的代码规范，来确保不同开发者写出的代码风格保持统一，提高团队协作的效率。

● Code Spell Checker插件标识符为streetsidesoftware.code-spell-checker。这是一个英语拼写检查工具，可以提示常见的拼写错误，并给出修改建议。

后文中提及IDE（整合开发环境）时，如无特殊说明默认指代VS Code。

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

如果希望在后续开发过程中使用AI辅助开发，需要安装一款AI代码编辑器。这里推荐在VS Code中安装微软推出的GitHub Copilot（后文简称为Copilot）插件，其标识符为github.copilot。安装该插件时，系统会自动同步安装配套的GitHub Copilot Chat插件。

使用Copilot需要先登录GitHub账号，具体操作步骤：在Command Palette→输入copilot→选择提示的GitHub Copilot: Sign In并按Enter键，然后在弹出的浏览器页面中完成GitHub登录，最后返回VS Code完成授权。安装配置成功后，可通过VS Code菜单中的“查看”→“聊天”选项在主界面右侧打开Copilot视图，如图1-3（a）所示。为验证Copilot能否正常工作，可以在聊天框中输入“React是什么”进行测试，如图1-3（b）所示。

（a）VS Code 中的 GitHub Copilot 插件

（b）测试 Copilot 能否正常工作

图1-3　在VS Code中安装GitHub Copilot插件

除VS Code扩展方案外，可以选择安装专业AI IDE，如Cursor或字节跳动推出的Trae。这两款AI IDE均基于VS Code定制开发，其基础开发体验与VS Code一致，同时兼容VS Code插件，但它们的AI辅助开发功能各有特色，可以根据需求选择。

后文提及AI IDE时，如无特殊说明，默认指代VS Code + GitHub Copilot。

1.3.4　使用create-vite创建React项目

前端技术栈的配置比较复杂，这与日益提升的前端技术复杂性正相关。配置流程主要包括创建Node.js项目、安装依赖库、安装配置前端打包工具和创建入口的代码文件等。尽管流程较为烦琐，但当前主流前端技术大都配套有脚手架工具来帮助开发者搭建项目。

Vite作为现代JavaScript打包工具，其官方提供的create-vite工具内置React项目脚手架。关于该工具的具体实现细节及React工程化配置，将在17.1节介绍前端工程化实践时有所涉及，本节则重点演示create-vite的基础用法。

下面将介绍create-vite的用法。首先，在命令行创建一个工作目录，然后借助npm执行create-vite命令：

mkdir ~/workspaces
cd ~/workspaces
npm create vite@latest

如果命令行提示需要安装create-vite包，键入y并按Enter键即可完成安装：

Need to install the following packages:
create-vite@6.5.0
Ok to proceed? (y) y

如下面代码所示，运行create-vite后命令行后将进入交互式配置向导，当提示Project name时输入项目名称oh-my-chat，提示Select a framework时选择React，提示Select a variant时选择JavaScript。值得注意的是，向导同样提供TypeScript选项，使用TypeScript编写React应用已成为主要趋势，相关内容将在17.2节简单介绍。完成安装向导后，create-vite将自动创建React项目的脚手架。

✔ Project name: ... oh-my-chat
✔ Select a framework: › React
✔ Select a variant: › JavaScript

按照create-vite提示，继续执行如下命令：

$ cd oh-my-chat
$ npm install
$ npm run dev
 
  VITE v6.5.0  ready in 509 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

这时在浏览器地址栏手动输入http://localhost:5173/并按Enter键，即可在浏览器窗口中运行React的代码示例，如图1-4所示。

图1-4　通过Vite创建的React脚手架项目默认页面

用IDE打开项目目录，可以看到项目脚手架的代码。代码文件结构和主要代码文件的内容如图1-5所示。在package.json文件中可以看到，新项目使用的React版本是9.1.0。

图1-5　在VS Code中查看Vite创建的React脚手架项目代码结构

此项目的代码风格与React社区规范存在显著差异，例如JavaScript语句末尾省略分号（;）。为了保持整个项目的代码风格统一，可以使用Prettier来格式化代码。具体做法是打开src/App.jsx文件，在VS Code菜单上单击View→Command Palette→输入formatdoc→选择提示的Format Document...并按Enter键，当VS Code弹出“选择格式化程序”提示（如图1-6所示）时，选择Prettier。

图1-6　在VS Code中对Vite创建的React脚手架项目代码进行格式化

使用Prettier格式化前后的项目代码对比，如图1-7所示。可以看到App.jsx文件每行代码末尾都自动添加了分号。用户可在格式化过的代码基础上进行修改，例如修改<h1>标题，完成修改后保存文件即可使代码生效。

（a）格式化前 （b）格式化后

图1-7　对Vite创建的React脚手架项目代码格式化的结果

浏览器页面会自动更新，如图1-8所示。

图1-8　修改后的Vite脚手架项目默认页面

这种即时反馈是前端开发领域为开发者提供的高效体验：每次修改代码后开发者都能直观看到页面变化，从而快速验证代码的正确性。使用Vite搭建的React环境均具备这一特性。

对比Prettier格式化前后的代码，可以发现格式化后的代码中的所有引号均被统一替换为双引号，这是因为Prettier认为，在英文环境中，与单引号字符串'It\'s Jim\'s book.'相比，双引号字符串"It's Jim's book."中的转义符（ \ ）明显少得多。虽然本书认为使用单引号或者双引号没有优劣之分，关键在于保持全局一致性，但考虑到国内开发者的习惯，本书将优先使用单引号。用户只需要在项目根目录中添加配置文件.prettierrc，使用如下方式修改Prettier的默认引号规则为使用单引号，然后重新格式化即可：

{
  "singleQuote": true
}

需要说明的是，尽管本节选用了create-vite创建React项目，但截至2025年初，在React技术社区广泛应用的脚手架工具是Meta公司推出的Create React App（CRA）工具（不过，CRA已于2025年2月被Meta官方正式弃用）。除了CRA和create-vite，市面上还有其他优秀的脚手架工具供React开发者选择。在开发样例代码时，开发者可能难以察觉各种脚手架工具的差异。但在实际应用中，当前端项目规模不断增大，源文件数成百上千时，CRA的打包性能将成为瓶颈，启动npm start甚至需要数分钟，这会显著影响开发效率。

Vite是一款现代JavaScript打包工具，它创新性地利用现代浏览器对原生ES模块的支持，将部分打包任务交由浏览器处理。此外，通过其他方面的优化，Vite比传统JavaScript打包工具具备更高的打包性能。因此，本书后续的样例代码将统一使用Vite进行打包。当然，开发者也可以根据实际开发需求自行选择打包工具。

1.3.5　提交代码到代码仓库

利用版本控制（version control）工具将本地开发的代码及时提交到代码仓库，是个好习惯。我曾多次目睹因本地代码丢失导致的事故，其代价往往是数日的工作成果化为乌有，开发者只能凭记忆重新编写代码，严重影响项目进度。

在本书中，将代码提交到代码仓库还包含另一层含义。你可以跟随本书的节奏练习编写相关代码，并在每章结束时提交代码到代码仓库以保存该版本，如果在学习后续章节时需要反复修改当前代码以验证某些功能，可以再回滚到前面章节的版本。当然，你也可以选择直接下载本书附带的代码，在本地阅读、执行和调试。在这种情况下，比起下载zip包格式的代码，本书更建议使用VCS工具克隆代码，这样既能在本地查看完整的代码修改历史，也便于理解各章节内容和回滚本地代码。

本书选用Git作为VCS工具。Windows用户可以从Git官网安装，macOS用户则有多种安装方法，其中较简单的是安装Xcode内置的Git。

在命令行中执行如下命令：

git --version

如果macOS未安装Git，系统会提示安装命令行工具。

此外，也可以使用HomeBrew来安装：

brew install git

安装Git后，VS Code内置的源代码管理功能即可正常使用。

这时可以将1.3.4节使用create-vite工具创建的脚手架代码提交到代码仓库中。在提交代码之前，可以先使用Prettier将所有源文件格式化。

当然，你也可以选择线上的Git代码仓库，如GitHub或Gitee。本书样例代码的开发过程将以GitHub代码仓库为例，同时也会提供在Gitee上的镜像代码仓库。

首先在GitHub上创建一个代码仓库，命名为oh-my-chat。按照GitHub官方文档“通过SSH连接到GitHub”的指导，配置好本地的SSH密钥。然后通过命令行进入项目目录，执行如下命令：

$ cd oh-my-chat
$ git init
Initialized empty Git repository in /Users/user/workspaces/oh-my-chat/.git/
 
$ git add .
$ git commit -m "初次提交"
[master (root-commit) 7215194] 初次提交
 14 files changed, 6205 insertions(+)
 ...
 
$ git branch -M main
$ git remote add origin git@github.com:evisong/oh-my-chat.git
$ git push -u origin main
Enumerating objects: 19, done.
...
Writing objects: 100% (19/19), 67.16 KiB | 6.71 MiB/s, done.
Total 19 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:evisong/oh-my-chat.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

以上提示信息说明代码已成功提交，这时可以在GitHub网站上查看刚提交的代码。

回顾已经提交代码的文件名，可以发现其中混用了大小写字母。目前，前端社区推荐使用帕斯卡命名法（PascalCase）来命名React组件源码文件（如App.jsx、MessageList.jsx等），使用驼峰命名法（camelCase）来命名非React组件的其他源码文件，如index.js、useTabs.js等。这种命名法的好处在于保持文件名与文件导出的组件或其他模块命名的一致性。然而，在macOS和Windows等不区分大小写（case-insensitive）的操作系统中，混用大小写字母的文件名配合Git使用可能会引发诸多问题，如Git认为A.txt和a.txt是两个不同文件，但操作系统将其识别为同一个文件。本书不对这些问题作过多展开，唯一的建议是，对于已提交的文件，应避免再修改文件名中的大小写，如果已提交messageList.jsx，应避免在本地将其重命名为MessageList.jsx，否则可能导致Git提交时会出现一系列错误。

1.4　编写基础应用代码

完成准备工作后，现在开始编写oh-my-chat的代码。

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

本节将使用尽可能简单的代码和模拟数据，实现1.2节定义的oh-my-chat的第一个视图——聊天视图。实现这部分代码的目的有以下3个。

● 展示React组件及其样式代码的基本构成。

● 直观展示React应用开发的过程。

● 作为后续章节的基础，以不断迭代的方式逐步引入新知识点。

为了更好地实现上述目标，建议你跟随本节内容动手编写应用代码，也可以从本书配套的代码仓库直接将完整代码复制到本地，然后进入第1章目录/ch01_3_5，运行npm install && npm run dev查看效果。

首先使用IDE打开1.3.4节通过create-vite创建的oh-my-chat项目，清理并调整项目脚手架代码。在项目根目录新建.nvmrc文件，指定Node.js版本为22：

22

该配置结合fnm工具，能够确保每次进入项目根目录时会自动切换至Node.js 22 LTS版本，该.nvmrc文件将纳入版本控制，以确保所有项目参与者使用同一Node.js版本。

修改index.html文件中的标题：

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>我聊 - 现代React Web应用设计开发实践</title>
</head>

另外，脚手架代码样式支持暗黑主题。为了简化示例，我们先清理相关的配色CSS样式。打开src/index.css文件删除多余样式代码，并增加overflow属性：

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  /* 保留... */
}
body {
  /* 保留... */
  min-height: 100vh;
  overflow: hidden;
}
  /* 删掉 button 和 @media (prefers-color-scheme: light) */

在src/assets目录下，准备好本节示例所需的SVG图标：icon-contact.svg、icon-menu.svg和icon-message.svg。将src/App.jsx中全部内容替换成如下代码，在应用最外层构建基础的三栏式DOM结构：

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import contactIcon from './assets/icon-contact.svg';
import messageIcon from './assets/icon-message.svg';
import './App.css';
 
function App() {
  const [activeView, setActiveView] = useState('chat');
 
  return (
    <div className="root">
      <nav>
        <img src={reactLogo} className="my-avatar" alt="我的头像"/>
        <ul className="top-nav">
          <li className={activeView === 'chat' ? 'active' : undefined}>
            <a href="#" onClick={() => setActiveView('chat')}>
              <img src={messageIcon} />
            </a>
          </li>
          <li className={activeView === 'contact' ? 'active' : undefined}>
            <a href="#" onClick={() => setActiveView('contact')}>
              <img src={contactIcon} />
            </a>
          </li>
        </ul>
      </nav>
      <aside>{/* TODO: 对话列表 */}</aside>
      <main>{/* TODO: 消息列表 */}</main>
    </div>
  );
}
 
export default App;

这段代码的主体是JavaScript，但在函数返回值中嵌入了HTML标签结构，这种语法被称作JSX。对于仅接触过HTML和JavaScript的初学者而言，初次看到React的语法可能会有些陌生，甚至不适应。2.1节将会重点介绍JSX语法。

在src/App.css文件中将所有样式代码替换成如下代码，可以在前面构建的三栏式DOM结构基础上实现“左中右”的布局样式：

#root {/* 省略... */}
 
.root {
  display: flex;
  flex-direction: row;
  height: 100%;
}
 
.root > nav {
  margin: 28px 0;
  flex: 0 0 80px;
  display: flex;
  /* 省略... */
}
 
.root > aside {
  margin: 12px 0;
  border-radius: 20px 0 0 20px;
  border-right: 1px solid #9a9a9a;
  flex: 0 0 400px;
  display: flex;
  /* 省略... */
}
 
.root > main {
  margin: 12px 12px 12px 0;
  border-radius: 0 20px 20px 0;
  flex-grow: 1;
  display: flex;
  /* 省略... */
}
 
.top-nav {/* 以下省略，请参考代码仓库 */}

可以看到，oh-my-chat主要采用CSS的Flexbox布局技术。与传统的绝对定位、浮动等布局技术相比，Flexbox的灵活性更高、所需的DOM元素更少，从而提升HTML的代码整洁度（Code Cleanliness）。需要特别说明的是，为了优化阅读体验，本书正文中的代码片段在换行等部分格式上有细微调整，对于重复出现的或非关键的代码片段会使用JavaScript或CSS注释进行省略处理；如果需要查看经过格式化的完整代码，可以参考代码仓库。

在命令行中运行npm run dev命令并在浏览器中打开页面，布局如图1-9所示。前面的代码实现了左侧的纵向导航栏功能，单击页面左侧导航栏中的聊天、联系人图标还可以切换高亮项目，同时预留了中栏和右栏的空白区域，用于后续实现对话列表和消息列表。

图1-9　为oh-my-chat主页面加入页面布局

接下来实现对话列表栏。在src/App.jsx文件App()函数前，插入对话列表的代码：

const ThreadsPane = () => {
  const threads = [
    {
      id: 1,
      contactName: '小帅',
      updateTime: '2023-11-04',
      latestMessage: '书的主题是现代React Web应用的设计开发实践。',
    },
    {
      id: 2,
      contactName: '小白',
      updateTime: '2023-11-03',
      latestMessage: '有的，就叫《我聊》。',
      active: true,
    },
    // 省略id: 3 ~ id: 5
  ];
 
  return (
    <>
      <header className="thread-top-menu">
        <form><input maxLength={20} /><input type="submit" value="搜索对话" /></form>
        <button>新建对话</button>
      </header>
      <ul className="thread-list">
        {threads.map((thread) => (
          <li key={thread.id} className={thread.active && 'active'}>
            <a href="#">
              <img src={reactLogo} className="avatar" alt="头像" />
              <div className="thread">
                <span className="contact-name">{thread.contactName}</span>
                <span className="update-time">{thread.updateTime}</span>
                <span className="latest-message">{thread.latestMessage}</span>
              </div>
            </a>
          </li>
        ))}
      </ul>
    </>
  );
};

ThreadsPane()函数为对话列表创建了多条模拟数据，并在后面的HTML标签中使用了这些数据，相关的写法和原理将在2.3.2节进行详细介绍。

需要说明的是，如果在安装VS Code时安装了AI辅助开发工具Copilot，那么在编辑器界面中输入上述代码的过程中，会频繁收到来自Copilot的代码补全提示，如图1-10所示。这时可以预览代码补全建议，如果基本符合要求，则可以按Tab键直接采纳。与传统的自动代码补全不同，基于AI的智能代码补全通常会提供多行连贯代码，而且与项目中既有代码的业务逻辑关联性更强，这大大提高了开发者编写代码的效率。为了快速熟悉React基础代码的编写过程，本书建议暂时禁用Copilot的自动补全功能（可以暂时关闭Copilot），全程采用手动编码方式。

图1-10　Copilot的自动代码补全

将App()函数返回值中的注释“TODO: 对话列表”替换为以下标签，即可将完成的对话列表嵌入到中栏布局中：

      <aside>{activeView === 'chat' && <ThreadsPane />}</aside>

在src/App.css中添加对话列表及对话列表顶栏的样式定义：

.thread-top-menu {
  flex: 0 0 5rem;
  display: flex;
  flex-direction: row;
  /* 省略... */
}
 
.thread-list {
  /* 省略... */
  list-style: none;
  overflow-x: hidden;
  overflow-y: auto;
}
.thread-list li.active {
  background-color: #ffffff99;
}
.thread-list li > a:hover,
.thread-list li > a:active {
  background-color: #ffffff77;
}
 
/* 省略其他样式... */

保存修改，浏览器页面将自动更新为图1-11所示效果。新增代码实现了对话列表及用于管理对话列表的顶栏，但是暂未实现交互功能，相关逻辑将在后续章节逐步添加。

图1-11　为oh-my-chat主页面加入对话列表

最后实现消息列表栏功能。在src/App.jsx文件顶部导入新的SVG图标：

import menuIcon from './assets/icon-menu.svg';

React支持引用图片，将图片导入JavaScript的方式将在17.1.2节介绍前端构建时详细说明。

在App()函数前插入如下代码，实现消息列表：

const MessagesPane = () => (
  <>
    <header className="message-top-menu">
      <h1>小白</h1>
      <button><img src={menuIcon} alt="消息菜单" /></button>
    </header>
    <ul className="message-list">
      <li className="from-me">
        <img src={reactLogo} className="avatar" />
        <p className="message">你好React！</p>
      </li>
      <li>
        <img src={reactLogo} className="avatar" />
        <p className="message">你好React！</p>
      </li>
      <li className="from-me">
        <img src={reactLogo} className="avatar" />
        <p className="message">欢迎学习React Web应用开发，你现在看到的是本书的聊天应用。</p>
      </li>
      <li>
        <img src={reactLogo} className="avatar" />
        <p className="message">这款应用有名字吗？</p>
      </li>
      <li className="from-me">
        <img src={reactLogo} className="avatar" />
        <p className="message">有的，就叫《我聊》"。</p>
      </li>
    </ul>
    <form className="compose-message">
      <textarea placeholder="请输入消息..." />
      <input type="submit" value="发送" />
    </form>
  </>
);

将App()函数返回值中的注释“TODO: 消息列表”，整行替换成如下标签以嵌入刚实现的消息列表功能：

      <main>{activeView === 'chat' && <MessagesPane />}</main>

从当前src/App.jsx文件中包含的HTML标签可以看出，oh-my-chat并没有过度依赖<div>标签，而是根据实际业务语义选择符合Web标准的标签，这种做法可以显著提升代码的可读性和可维护性。这里可以尝试清空所有CSS样式，观察在样式文件加载失败的情况下，oh-my-chat的HTML默认呈现效果。

在src/App.css中添加消息列表相关样式：

.message-top-menu {/* 省略... */}
 
.message-list {
  flex: 1;
  margin: 0 1.2rem;
  padding: 1.2rem 0;
  list-style: none;
  overflow-x: hidden;
  overflow-y: auto;
}
.message-list li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: 1.2rem;
  min-height: 2rem;
}
.message-list li.active {
  background-color: #ffffff99;
}
.message-list li.from-me {
  flex-direction: row-reverse;
}
 
.compose-message {/* 省略... */}
/* 省略其他样式... */

保存文件后，浏览器将显示如图1-12所示的完整界面，当前已实现的功能包括：消息列表、消息列表的顶栏，以及底部的发送消息表单。目前，消息列表为硬编码，表单交互功能暂未实现，这些将在后续章节中逐步完善。至此，聊天视图已经基本实现。

建议将当前所有代码修改提交至代码仓库，以方便后续使用。

图1-12　为oh-my-chat主页面加入消息列表

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

本节将实践AI辅助开发的内容。

值得注意的是，本节的AI生成代码仅作为实验用途，在完成本节内容学习后将被清除，请务必保存1.4.1节手动编写的代码，以方便回滚。下面基于1.2节联系人视图的原型设计图，利用AI生成相关代码。作为准备工作，需要先从代码仓库中下载原型设计图文件oh-my-chat-mockup_2.png。

首先在VS Code中打开App.jsx文件，然后打开Copilot视图，将刚才的原型设计图拖拽到聊天框中，输入以下提示语：

请在当前文件中，根据上传的图片生成联系人视图的代码。代码中已经包含聊天视图，在用户点击导航中的“联系人”链接时，切换到联系人视图。

在聊天框底部，将默认的“询问（Ask）”模式切换至“代理（Agent）”模式，并将默认的“GPT-4o”模型切换至“Claude 3.5 Sonnet”模型。如图1-13所示，完成设置后点击“发送”按钮。首次使用可能需要确认是否启用Claude模型，确认启用即可。

图1-13　将Copilot切换至代理模式

在响应阶段，Copilot会智能分析用户需求，自动生成代码修改方案并直接应用到App.jsx源文件中。如图1-14所示，代码变更将在代码编辑器中被高亮显示。在审查每处修改后，用户可以点击右侧的“保留”按钮确认代码修改方案；或者点击“撤销”按钮放弃修改，使代码回滚至原始状态。

图1-14　Copilot代理模式生成代码的结果

在浏览器中查看页面，点击左侧导航栏的联系人视图按钮，可以发现Copilot部分实现了原型设计，如图1-15所示。

图1-15　Copilot代理模式实现的联系人视图

尽管Copilot实现的联系人视图并不完整，但是还原了原型设计中的界面布局和数据展示，其代码结构与1.4.1节手动编写的示例基本一致。关于AI生成的代码质量将在第2章系统学习JSX语法后再做讨论。本节实践暂时结束，需要将Copilot生成的代码回滚，为第2章的实践做好准备。

1.5　React的技术生态

1.4节运用React为oh-my-chat项目实现了基础功能，对于一个完整Web应用而言，这仅是一小部分。面对日益复杂的前端开发场景，仅依靠React框架难以构建符合生产环境标准的完整Web应用。这一现状可能会让初学者感到困惑，但它恰恰反映了当前前端开发领域的真实情况。与10年前相比，Web前端开发的复杂度显著提升，但与之对应的是，Web前端的技术能力实现了质的飞跃，其应用场环境得到了极大拓展。这种演进在为开发者带来更多挑战的同时，也创造了更多机遇。React技术凭借其独特优势在这样的背景下脱颖而出。正如1.1节所述，对比各大主流前端框架，React的内置功能并不是最多最全的，但其克制的设计理念和对第三方库的开放性，造就了繁荣的React技术生态。使用React的开发者越多，为React开发的第三方开源库就越丰富；React技术生态越繁荣，又会吸引更多开发者选择React。这种良性循环形成了React的马太效应。

因此，开发者无须担忧学习React与开发完整Web应用之间的差距。以React为基础，结合其强大的技术生态，前端开发者完全可以应对各种规模、各种复杂度的Web应用开发需求。这也带来一个新的课题，开发者需要明确React框架的能力边界，并了解其生态中的重要组成，从而针对不同场景选择最合适的技术方案。

1.5.1　一些开源React组件库

HTML和DOM API作为浏览器原生技术，最初是为网页设计而开发的。尽管HTML标准化工作已取得显著成果，新增了许多标签和API，但面对现代Web应用开发需求，仍然缺乏富交互应用（Rich Web Application）所需要的、开箱即用的前端组件。

React框架虽然在底层封装了DOM API的实现细节，但其面向用户的组件仍基于HTML原生元素，例如<button>、<input>、<select>和<div>等。对于更高级的组件需求，如<Tab>、<ToggleButton>和<Tree>等，需要开发者自行实现。此外，如果希望统一所有组件的视觉风格、交互行为和编程接口，往往需要对基础组件进行深度封装或重写。另一种更高效的选择则是利用现成的React组件库。

组件库本质上是经过系统设计、具备统一风格、完善封装和一致接口的可复用前端组件的集合。React组件库，尤其是开源组件库，是React生态的重要组成部分。以下是2023年11月npm单周下载量排名前三的React组件库。

● MUI，前身是著名的material-ui，基于谷歌的质感设计（Material Design）语言，提供丰富的组件和稳定的接口。MUI官方已经分化出一套Base UI，支持开发者脱离质感设计定制主题。

● AntD，全称Ant Design，是蚂蚁集团开源的组件库，提供完整的设计体系与丰富的组件，以及数十种国际化语言支持。

● React Bootstrap，基于传统前端组件库Bootstrap，JavaScript部分完全为React重写，摒弃了jQuery依赖。组件种类齐全，保留了传统Bootstrap的分栏布局和定制主题的功能。

上述3个开源组件库都采用了商用友好的MIT协议，在各类Web应用项目中被广泛应用。考虑到组件开发是React学习过程中的关键环节，本书后续章节将不会采用现成的开源组件库。如需了解组件库的具体用法，可以参考各项目的官方网站。

1.5.2　什么是“React全家桶”

当开发Web应用时，除了组件库，开发者还需要关注如下领域。

● 应用状态管理框架：Zustand、Redux、MobX等。

● 服务器通信：浏览器标准的fetch API框架、Axios框架，以及React Query框架。

● 表单处理：React Hook Form框架、Formik框架。

● 前端路由：事实标准的React Router框架。

● 组件样式：诸多CSS-in-JS框架，Linaria。

● 打包编译工具：Webpack、Babel，以及集成了Webpack、Babel的Create React App脚手架，目前Vite凭借其出色的性能表现成为许多新项目的首选构建工具。

● 自动化测试框架：Jest、React Testing Library。

这些工具与框架的组合，在中文技术社区常被称为“React全家桶”。例如React+Zustand+React Router+Axios+Vite +Jest。

上述框架、工具对于现代Web应用开发大都是必需的，后续章节将会详细介绍其使用方法，并在oh-my-chat项目中实践应用。

1.5.3　React Native简介

在React的发展历程中，移动互联网的兴起对React的技术演进产生了深远影响。自iOS和Android主导移动互联网以来，跨平台代码复用成为关键的技术方向——即实现一份代码可同时运行于iOS、Android和Web端平台。目前该领域的主流技术方案当属Flutter和React Native，其中后者凭借其独特优势占据了重要地位。

其实，oh-my-chat的package.json文件中有两个依赖项（dependencies）：react和react-dom，前者是React的核心逻辑，后者则实现React在Web端的特有接口和功能。这种架构设计自然引出一个问题：是否存在其他平台的实现方案？React Native是对应移动端的接口和实现，对应的npm包为react-native，与React的Web端共享React内核。这种跨平台能力的基础正是React的虚拟DOM设计，具体原理将在后续章节详细讨论。

React Native秉承“Learn once, write anywhere”的理念。它极具创新性地将JavaScript和iOS/Android上的原生组件结合在一起，既将JavaScript和React这两种主流Web开发技术引入移动端开发，又利用移动端的原生组件提高了渲染和交互性能，并且通过在组件接口层面的抽象从一定程度上屏蔽了iOS和Android的差异，实现了高效的跨平台代码复用。对于业务导向型且对移动端原生功能依赖度较低的应用程序，采用React Native是比较理想的开发方案。

Facebook早期推广React技术时，React Native曾力其生态扩张，许多开发者希望通过掌握React技术把握住移动互联网时代的机遇。时至今日，React的架构设计与功能实现都充分考虑了Web端和移动端开发需求的双重支持。

需要说明的是，本书聚焦于Web前端开发，后续章节不会深入探讨React Native接口的具体应用。如需要进一步了解移动端开发，可以参考React Native的官方文档获取详细信息。

1.6　AI辅助的前端开发概述

为了理解AI辅助的前端开发模式，首先需要了解AI辅助软件开发生命周期（AI-assisted Software Development Lifecycle）的运行机制。

本章在配置开发环境和编写基础应用代码时，以GitHub Copilot为例演示了AI辅助编程工具的部分功能。初次接触这类AI工具的开发人员可能会对这些功能留下深刻印象。但需要明确的是，无论是Copilot还是其他AI辅助编程工具，都只是AI辅助在软件开发生命周期中的部分应用体现。

软件开发生命周期（Software Development Lifecycle）通常包括计划、设计、实现、测试、部署和维护这6个阶段，每个阶段都涉及大量任务，这些任务的自动化程度直接影响软件开发效率。在生成式AI技术出现之前，软件开发自动化工具和相关实践已经相对成熟，效率提升空间逐渐缩小。而生成式AI技术为整个领域注入了新的活力，几乎在每个开发阶段都能提供智能化支持。

在软件开发生命周期的各阶段，AI可以辅助的具体任务如表1-1所示。其中标记“↑↑”的项目表示已有较为成熟的商业产品或开源工具支持，并且已被较多企业采用；标记“↑”的成熟度稍低，但发展迅速，受到业界广泛关注；未做标记的则表示仍处于探索阶段。

表1-1　AI辅助的软件开发生命周期

本书聚焦于React和Web前端开发领域，因此关于AI辅助的软件开发生命周期不做深入介绍。Copilot作为一款AI编程辅助工具，主要覆盖代码编写、代码审查、单元测试等核心开发环节。在此基础上，原型设计、系统监控、故障分析等任务都可以被整合到AI辅助的前端开发流程中。

本书会在后续章节中适时引入AI辅助开发的相关内容，这些内容将以AI辅助React代码开发为核心，同时根据不同章节的主题，也会涉及其他环节的工作，如AI辅助编写单元测试等。

1.7　小结

本章首先介绍了React技术的概况，并说明了贯穿全书的oh-my-chat项目的主要功能。然后，详细说明如何在本地配置Node.js开发环境，推荐使用VS Code作为代码编辑器，并使用create-vite脚手架工具创建oh-my-chat的项目基础结构。在此基础上，我们为oh-my-chat的聊天视图编写了基础的React代码，实现了左栏、中栏和右栏的三栏布局，以及基于模拟数据、暂未实现交互逻辑的对话列表和消息列表功能。随后，本章简要介绍了包括开源组件库、“React全家桶”在内的React生态，构建了使用React开发Web应用的完整技术全景图。

此外，本章演示了AI代码编辑工具GitHub Copilot的安装配置过程和Copilot的代码补全功能，体验了通过Copilot的代理模式来生成大段代码，并探讨了AI技术在软件开发生命周期中的辅助作用。