完整的 React 路线图

先决条件

基础知识

中间的

先进的

生态系统

总结

感谢阅读

学习React一开始可能会让人感到困惑，有时甚至会让人感到恐惧！本文旨在提供一份完整的React学习路线图，让你有清晰的学习路径。

先决条件

学习React需要一些先决条件，否则你会发现自己很难适应。因此，强烈建议在深入学习React之前，先掌握以下技能

1. HTML - 你需要熟悉基本标签及其支持的属性。无需精通HTML，只要掌握基础知识即可。
2. CSS - 除非您想创建像这样平淡无奇的网站，否则您绝对应该花一些时间了解CSS的基础知识（即selectors、、、和）。box-modelflexboxgrid layoutresponsive design
3. JavaScript - 由于React运行在JavaScript之上，因此你需要扎实的基础来简化React 的学习过程。作为入门级，你需要variables、conditional statements、loops、DOM manipulation和event triggering。学习ES6+ 的特性，例如spread& rest operators、 和 ，arrow functions也会很有帮助。

基础知识

1. 设置 React 项目：在开始学习React之前，显然你需要设置一个React 项目，这是一项非常繁琐的任务。幸运的是，我们有像create-react-app

2. 熟悉 JSX：通常，React代码是用JSX（JavaScript XML）编写的。你可以选择不使用它，只使用React.createElement调用，但这样做毫无意义，也没有必要让自己的生活变得痛苦。

   动图

   您应该熟悉JSX和HTML之间的区别，例如每个都element 必须包含一个结束标记、事件采用Camel Case（onClick而不是）以及直接在代码中使用JSonclick的能力。

3. 组件类型：虽然最近，人们倾向于在所有用途上使用功能组件，因为它们更直观，更容易编码，但你也应该对类组件有基本的了解，以确保当你工作时，你不会最终看起来像这样legacy code base

   动图

4. Props 与 State：Props允许我们将数据从一个组件传递到另一个组件，但如果使用不当，可能会导致React项目中非常不受欢迎的做法prop chaining，我们将在稍后的路线图中修复这个问题。

   State允许你在组件重新渲染之间存储数据。更新重新渲染组件，并让每个子组件接受数据作为 prop。state state

5. 列表和键：处理大量动态数据时，通常需要渲染lists数据。请确保添加这些属性key，以便React能够跟踪元素并以最佳方式重新渲染它们，而不是每次发生变化时都重新渲染它们。

6. 组件生命周期：类组件具有诸如和 之类的生命周期方法，它们也可以通过函数组件中的钩子来模拟。这些生命周期方法在特定时间运行，使其适用于某些任务，例如API 调用或计时器清理。componentDidMount()componentWillUnmount()useEffect componentDidMount()componentWillUnmount()

中间的

现在让我们深入探讨中级React主题

动图

1. 样式：到目前为止，您的应用程序看起来可能非常简陋。现在就来修复它。应用程序的样式选择有很多，但除非您使用Material UI、Chakra UI、Semantic UI之类的库，否则我强烈建议您使用CSS或SCSS 模块，这样既能充分发挥CSS的威力，又能将样式限制在一个文件中。

   不再需要担心两次使用相同的类名并意外覆盖它。

2. Hooks：Hooks是React 16.8中新增的功能，它彻底改变了React 生态系统。Hooks将类组件的功能引入函数组件，使得在函数组件中使用、和成为可能。statelifecycle methodscontextref

   人们常常会回避学习诸如和 之类的复杂概念，但这并非良策，因为如果你正在构建任何具有现实意义的，你的应用程序肯定会严重依赖这些概念。此外，使用可以避免之前讨论的问题。memorefcontextprop chaining

   React还允许你创建自定义 hooks来满足你的个人需求，这一点你也应该了解一下。如果你想掌握Hooks，一定要看看这篇文章

3. Portals：偶尔你会遇到一些极端情况，比如你给元素（例如模态框）添加样式，使其渲染在DOM树下方的元素之上，这简直是一场噩梦。在这种情况下，Portals可以帮你解决这个问题，它允许你在默认的React 根元素之外渲染元素，这不仅使样式设置变得更容易，甚至使元素分组也变得更容易。

4. 延迟加载：延迟加载是网页设计和开发中常用的一种设计模式，它将对象的初始化推迟到需要的时候。如果使用得当，它可以提高程序的运行效率。

   幸运的是，在React中实现延迟加载非常简单。你只需要一个组件并熟悉其功能即可。Suspense import()

先进的

发现列表上的所有事情都很容易吗？

利用这些高级技能检验你的知识

1. Webpack 与 Babel：你编写的JSX代码浏览器无法理解，因此必须将其transpiled转换为常规JS才能执行。转译过程由Babel负责，而将所有内容打包成单个文件则由Webpack负责。

   要真正理解一切是如何运作的，您需要从头开始构建一个React App，查看本文以了解如何操作。

2. 测试：很少有人真正喜欢做测试，因为它属于“暗活”，也就是说，你不会对代码做出任何可见的改变。但对于大型应用程序来说，测试至关重要，因为一个小小的改动就可能最终导致整个应用程序崩溃。

3. TypeScript：这只是你必须具备的核心技能之一。TypeScript是JavaScript的超集，它增加了重要但可选的严格类型系统，是任何大型 React 应用程序的首选语言。

这就是你需要了解的关于React 的全部内容

动图

生态系统

但是 React Router 或者状态管理之类的东西怎么样？

很高兴你问了这个问题！让我们深入研究一下值得一试的React 工具。你学完React基础知识后就可以查看这些工具了。

1. 路由：由于React是一个库而不是一个框架，它没有附带自己的路由，但React Router是一个值得研究的库。

   如果您正在使用Gatsby或Next.js等SSG（静态站点生成）或 SSR（服务器端渲染），那么您已经拥有内置路由，而无需任何其他库

2. 状态管理：像Context API这样的状态管理工具是React的一个不错的功能，但在大规模应用程序中却显得力不从心。在这种情况下，使用像Redux或众多可用的库会是一个更好的选择。npm

3. 跨平台：如果您想在移动应用程序和桌面应用程序中使用与Web 应用程序相同的逻辑，React Native和Electron（或者最好是Tauri）将是很好的工具。

4. 样式：如果您不想为应用程序编写自定义样式，Material UI、Chakra UI或Semantic UI可能值得一看。它们带有预构建的组件，可以大大减少所需的工作量。

总结

这就是完整的 React 路线图。希望它能帮助你规划成为一名突破性的React 开发者的旅程。

快乐开发！

我是不是漏掉了什么？在下面的评论区分享一下吧👇

想看看从零开始构建的高级 React 项目吗？查看

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。