React 学习路线 | 26 年最新零基础到精通一条龙（万人收藏⭐️）
编程导航学习网站：学编程、做项目、拿 Offer！
企业高频面试题库：开始刷题，面试遇原题！
精选简历模板大全：1 分钟搞定简历！
AI 资源导航网站：获取最新 AI 黑科技！
1 对 1 模拟面试：随时随地提升面试能力
React 求职高频面试题：开始刷题
开篇介绍
React 是由 Facebook（现 Meta）开发并开源的 JavaScript 前端框架，于 2013 年首次发布。React 的核心思想是组件化和声明式编程，通过将界面拆分成独立、可复用的组件，让前端开发变得更加高效和可维护。React 不仅可以用于 Web 开发，还可以通过 React Native 开发移动应用，实现 “一次学习，到处编写”。
React 的核心特点是虚拟 DOM 和单向数据流。虚拟 DOM 是 React 对真实 DOM 的抽象，通过 Diff 算法最小化 DOM 操作，提升性能；单向数据流使得数据流动更加清晰可控，便于调试和维护。React 使用 JSX 语法，将 HTML 写在 JavaScript 中，虽然一开始可能不太习惯，但用过之后会发现非常方便。
为什么要学 React？
React 是全球最流行的前端框架之一，在国外的使用率甚至超过 Vue！很多大厂都在使用 React，掌握 React，能够让你有更多机会找到前端工作，而且 React 的薪资普遍高于 Vue。
React 的版本更新迭代非常快，截止到鱼皮写这篇文章的时候，React 的最新版本已经是 19 了。React 19 引入了服务器组件（Server Components）、Actions、use Hook 等新特性，进一步提升了开发体验和性能，建议重点学习这些新特性。
React 的生态系统非常丰富，不光有传统库，还可以依赖 JS 的很多 AI 相关的库和工具，比如 TensorFlow.js、AI SDK 等。鱼皮测下来用 AI 生成 React 前端代码的准确度也是很高的，结合 React 和 AI Vibe Coding 技术，可以快速开发出功能强大的 Web 应用。
学习前提
学习 React 建议先掌握：
- HTML 和 CSS：网页的基础
- JavaScript 基础：变量、函数、对象、数组等
- ES6+ 语法：箭头函数、Promise、async/await、解构等【重点】
如果还不会 JavaScript，可以查看 JavaScript 学习路线，或者查看 前端开发学习路线 中的 JavaScript 部分。
学习路线图
就业方向
学完 React 后，可以从事以下岗位：
- 前端开发工程师：使用 React 开发 Web 应用
- 全栈工程师：React 前端 + Node.js/Java 后端
- 移动端开发工程师：使用 React Native 开发移动应用
- 桌面应用开发工程师：使用 Electron + React 开发桌面应用
整体学习建议
1）掌握 JavaScript 是前提！
React 大量使用 ES6+ 语法（如箭头函数、解构、展开运算符），如果 JavaScript 基础不牢固，学习 React 会很吃力。
2）重点掌握 Hooks：Hooks 是现代 React 开发的标准。要重点学习 useState、useEffect、useContext、useMemo、useCallback 等常用 Hooks。
3）React 的学习要结合项目实践，边学边做。建议每学完一个知识点就动手实现一个小功能。
4）React 的官方文档写得非常好，有大量示例和交互式教程，建议多看官方文档。
5）学习 React 时可以多用 AI 工具（如 ChatGPT、Cursor、TRAE 等）辅助学习和开发。可以多看看鱼皮 AI 资源大全 中的工具。
阶段 1：React 基础（7-20 天，仅供参考）
学习目标
掌握 React 的基础知识，能够使用 React 开发简单的应用。
知识点
React 基础概念【必学】：
- React 的特点和优势
- 虚拟 DOM 和 Diff 算法
- JSX 语法
- 组件和 Props
- 单向数据流
项目创建【必学】：
- Create React App（传统方式）
- Vite（现代方式，推荐）
- 项目结构
JSX【必学】：
- JSX 的语法规则
- JSX 中的表达式
- 条件渲染（&&、三元运算符）
- 列表渲染（map）
- 事件处理
组件【必学】：
- 函数组件（推荐）
- 类组件（了解即可）
- Props 的传递和使用
- 组件的组合和嵌套
学习重点
1）Vite 是现代前端项目的推荐构建工具，启动速度快、热更新快。建议使用 Vite 创建 React 项目。
2）JSX 是 JavaScript 的扩展语法，看起来像 HTML 但实际是 JavaScript。要理解 JSX 会被编译成 React.createElement 函数调用。
3）React 推荐使用函数组件 + Hooks，类组件已经不推荐使用。如果看到老教程讲类组件，可以跳过，重点学习函数组件。
4）Props 是 React 组件之间通信的主要方式，要理解 Props 的单向数据流（从父组件传递到子组件）。
再次强调，这个阶段要多写代码！熟悉 JSX 语法和组件的使用。
学习资源
- ⭐ React 官方文档：最权威的学习资料（2023 年全面重写）
- 2025 年 React 教程
- 30 分钟学会 React 18 核心语法
