====== 第一章：前言与课程介绍 ======

===== 1.1 什么是 React =====

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

React 的核心特点：

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

===== 1.2 为什么选择 React =====

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 或各种技术博客中找到解决方案。

===== 1.3 React 的版本演进 =====

**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 支持

===== 1.4 本教程的学习方法 =====

**理论与实践结合**：

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

**项目驱动**：

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

**深度与广度兼顾**：

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

**配套资源**：

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

===== 1.5 前置知识要求 =====

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

**HTML/CSS**：

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

**JavaScript（ES6+）**：

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

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

===== 1.6 开发工具准备 =====

**代码编辑器**：

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

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

**浏览器**：

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

**Node.js**：

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

===== 1.7 总结 =====

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

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