第一章：前言与课程介绍

React 是由 Facebook（现 Meta）开发的开源 JavaScript 库，用于构建用户界面。它由 Jordan Walke 创建，于 2013 年 5 月开源发布。React 采用组件化开发思想，让你可以将 UI 拆分为独立、可复用的代码片段。

React 的核心特点：

• 声明式编程：你只需要描述界面应该是什么样子，React 会自动处理 DOM 更新
• 组件化：将 UI 拆分为独立的、可复用的组件
• 学习一次，随处编写：React 可以用于 Web、移动端（React Native）、桌面端（Electron）等多个平台
• 单向数据流：数据从父组件流向子组件，便于追踪和调试

React 已成为目前最流行的前端框架之一，根据 Stack Overflow 和 GitHub 的统计数据，React 在开发者满意度、就业市场需求、社区活跃度等方面都名列前茅。

就业市场需求：

LinkedIn、Indeed 等招聘网站的数据显示，React 开发者的需求量持续走高。掌握 React 意味着更多的就业机会和更高的薪资水平。

生态系统成熟：

React 拥有庞大而成熟的生态系统：

• 路由：React Router 是行业标准
• 状态管理：Redux、MobX、Zustand、Recoil 等多种选择
• UI 组件库：Material-UI、Ant Design、Chakra UI 等
• 服务端渲染：Next.js、Remix 等框架
• 移动端：React Native 让你用相同的技能开发 iOS/Android 应用
• 测试工具：Jest、React Testing Library、Cypress 等

性能优秀：

React 使用虚拟 DOM（Virtual DOM）技术，通过 Diff 算法最小化实际 DOM 操作，大幅提升应用性能。Fiber 架构的引入让 React 能够更好地处理大型应用和复杂动画。

社区活跃：

React 拥有全球最活跃的开源社区之一。遇到问题时，你几乎总能在 Stack Overflow、GitHub Issues 或各种技术博客中找到解决方案。

React 0.x（2013-2015）：

最初的 React 版本，引入了 JSX、组件、虚拟 DOM 等核心概念。这个时期的 React 还在快速迭代中，API 经常变化。

React 15（2016）：

这是一个重要的稳定版本。React 团队重构了核心算法，提升了性能和稳定性。

React 16 - Fiber（2017）：

这是 React 历史上最重要的更新之一。Fiber 架构的引入彻底重写了 React 的核心协调算法，带来了：

• 更流畅的动画和交互
• 支持异步渲染
• 更好的错误处理（Error Boundaries）
• Portals 等新特性

React 16.8 - Hooks（2019）：

Hooks 的引入是 React 开发方式的重大变革。它让函数组件拥有了状态和其他 React 特性，极大地简化了代码：

• useState - 状态管理
• useEffect - 副作用处理
• useContext - 上下文消费
• useReducer - 复杂状态逻辑
• 以及自定义 Hooks

React 17（2020）：

这是一个“无新特性”的版本，主要关注渐进式升级。React 17 让多个版本的 React 可以在同一个应用中共存，为大型应用的升级提供了便利。

React 18（2022）：

React 18 引入了并发特性（Concurrent Features）：

• 自动批处理（Automatic Batching）
• Suspense 的改进
• Transitions API
• 新的 Hooks：useId、useDeferredValue、useTransition
• React Server Components（实验性）

React 19（2024）：

最新的 React 版本带来了更多改进：

• React Compiler（自动记忆化）
• Server Actions
• Document Metadata API
• Asset Loading API
• Web Components 支持

理论与实践结合：

每章都包含理论讲解和代码示例。不要只是阅读，一定要动手敲代码。

项目驱动：

教程后半部分会通过一个完整的项目，将所学知识串联起来。

深度与广度兼顾：

既会讲解 React 的基础用法，也会深入源码层面解释原理。

配套资源：

• 所有代码示例
• 课后练习题
• 参考答案
• 扩展阅读材料

在学习 React 之前，你需要具备以下基础知识：

HTML/CSS：

• 熟悉 HTML 标签和语义化
• 掌握 CSS 选择器、盒模型、Flexbox、Grid
• 了解响应式设计

JavaScript（ES6+）：

• 变量声明：let、const
• 箭头函数
• 解构赋值
• 模板字符串
• 数组方法：map、filter、reduce
• Promise 和 async/await
• 模块化：import/export
• 类和继承
• 展开运算符

如果你对这些内容还不熟悉，建议先补充 JavaScript 基础。

代码编辑器：

推荐使用 VS Code，配合以下插件：

• ESLint - 代码检查
• Prettier - 代码格式化
• ES7+ React/Redux/React-Native snippets - 代码片段
• Auto Rename Tag - 自动重命名标签

浏览器：

推荐使用 Chrome 或 Edge，安装 React Developer Tools 扩展。

Node.js：

React 开发需要 Node.js 环境。建议安装 LTS（长期支持）版本。

本章介绍了 React 的基本情况、版本历史和学习方法。React 是一个强大而灵活的前端库，掌握它将极大提升你的前端开发能力。

接下来，我们将从 React 的核心概念开始，逐步深入。