学习 ReactJS – 完整路线图
如译文有误，还请在评论区提出
Web 开发是一个值得探索、学习和理解的迷人领域。
作为初学者，你有很多libraries资源frameworks可以帮助你开发 Web 项目。有时，选择一个资源并开始使用可能很棘手。
但当谈到学习时ReactJS，这不应该是一个难以做出的决定。
ReactJS（又名 React）是一个基于 JavaScript 的开源用户界面库。它在当今的 Web 开发社区中非常流行，React Native在移动应用开发者中也同样受欢迎。
在本文中，我们将介绍学习 ReactJS 的完整路线图。如果您正在考虑开始学习 ReactJS，并希望获得循序渐进的方法，那么本文非常适合您。此外，如果您是一位 ReactJS 开发者，并且正在考虑接下来要学习哪些高级主题，也请阅读本文。
为什么需要路线图来学习 React？
好问题。想想看。你身处一座陌生的城市，需要从一个地方前往另一个地方。你最需要的是一张地图或指南来帮助你的旅行。
学习新事物并不一定非要经历巨大的变化。如果你有一张地图或指南，告诉你“如果你先学A，接下来尝试学习B。然后你会发现C更容易”，那么学习过程就会顺利得多。
它还可以帮助您决定替代路线、一次走多远以及何时暂停。
在本指南中，我们将分阶段构建 ReactJS 学习路线图。在我们进一步探索路线图的过程中，你还可以找到一些资源（可选）。
👀 请记住，第一次看到这份路线图时，你可能会感到有点不知所措。不过别担心，它并没有看起来那么难。我还提供了一些资源，帮助你以惊人的速度学习。
这份路线图是基于我六年多的 ReactJS 工作经验而制定的。所以，如果您有不同意见，我完全接受。
由于 ReactJS 非常流行，您可能会发现这里与其他许多建议的路线图有些相似。但它们并不完全相同。
将路线图分为几个阶段
我们将整个路线图分为四个阶段。它们分别是：
- 在学习 React 之前要学什么
- React 初学者该学什么
- 如何从初学者晋升为中级 React 开发人员
- 如何从中级 React 开发人员晋升为高级 React 开发人员
学习 React 之前要学习什么
ReactJS是基于 JavaScript 的。为了快速学习 React，你需要熟悉一些知识（除了 JavaScript 基础知识之外）。
🔵 Git 版本控制
Git是一款版本控制工具，可帮助您更好地管理源代码。它与 ReactJS 没有直接关系。但学习它的基本用法会很有帮助，这样您就可以充分利用 React 的开发生态系统。
当你专注于一些基本的事情时，Git 很容易学习，例如，
- 如何启动存储库
- 如何暂存/取消暂存你的更改
- 如何将你的更改提交到仓库
- 如何推送到远程仓库
- 如何解决合并冲突？
除此之外Git，您还需要了解如何使用基于 Git 的存储库管理服务，例如GitHub。您可以在此 YouTube 播放列表中了解有关 Git 和 GitHub 的所有信息：Git 和 GitHub 播放列表。
🔵 HTML
HTML 提供了网页的结构。在 ReactJS 中编写代码时，你将使用一种名为 JSX 的新语法来使用 HTML 结构。
您无需精通 HTML，但您应该对最常用的标签和语义有基本的了解。您可以查看这个HTML 初学者速成课程和这个 HTML 基础指南来开始学习。
您还可以查看 freeCodeCamp 最新更新的响应式网页设计认证，以开始使用 HTML。
🔵 CSS
说到 CSS，范围非常广。不过，请关注我在这条Tweet中提到的主题：
您可以在CSS-Tricks网站上学习很多有关 CSS 的知识，这里有一个基于项目的教程，可以帮助您将基本的 CSS 概念付诸实践。
您还可以查看 freeCodeCamp 的响应式网页设计认证来学习 CSS。
🔵 JavaScript
你必须了解 JavaScript 中的以下概念，
如果您想了解的话，freeCodeCamp 还提供JavaScript 认证。
🔵 NPM 生态系统
您应该知道如何使用npm、yarn和节点版本管理器 (nvm) 来帮助您在本地运行和测试 ReactJs 应用程序。
了解它们的高阶工作原理总是有助于在遇到问题时调试你的环境。这里有一些资源可以帮助你快速上手：Node.js 安装、npm、yarn、nvm。
🔵 如何部署、托管和公开您的应用：
如果你用 ReactJS 创建了一个很酷的东西，却无法向世界展示，那可就没那么有趣了。所以，你应该知道如何部署应用并使其可供公众访问。
Vercel像或 这样的工具Netlify让你只需点击几下即可轻松部署你的 React 应用。例如，这里有一个关于将 React 应用部署到 Netlify 的教程。
React 初学者该学什么
现在，我们来关注一下在实践中享受 React 乐趣至少需要学习的内容。这些都是基础知识，所以一定要投入足够的时间和实践来真正理解这些概念。
有句名言叫做“用 React 思考”。这些基本概念应该能帮助你培养这种“用 React 思考”的思维模式。
🟡 理解 React 是什么
你应该明白 ReactJs 有什么特别之处了。它是一个声明式的、基于组件的用户界面库。
这是什么意思？观看此视频，清晰地解释所有这些概念。
🟡 学习如何设置你的开发环境
有多种方法可以为 ReactJs 设置开发环境。至少，你可以从脚本文件中指向CDN 分发。
这种方法入门还行，但不可持续。作为初学者，你可能不想在项目的 Babel 或 Webpack 相关配置上花费太多时间。
在我看来，开始使用 ReactJS 开发环境最智能、最快捷的方法是使用Create React App。您可以按照其主页上的简单步骤在几分钟内完成操作。
🟡 了解 JSX
ReactJS 允许用户界面逻辑与渲染逻辑、事件、处理状态变化等逻辑耦合。这种耦合是为了鼓励构建独立组件的实践。
JSX是一种看起来像 的语法HTML，但它的功能却与 相同JavaScript。此语法可帮助开发人员编写包含所有必要元素（例如数据获取、条件、循环、表达式等）的 UI 逻辑。
请注意，您可以在不使用 JSX 语法的情况下编写 ReactJS 应用程序 - 但开发体验不会那么好。
这里有一个很好的资源可以帮助您了解 React 中的 JSX。
🟡 了解 React 组件
组件是 ReactJs 应用的核心。我们创建可复用、自包含且隔离的独立组件。每个组件应该正确地执行一项任务。多个组件共同构建整个应用。
在 ReactJS 中，你可以使用 JavaScript 类或简单的函数来创建组件。我建议使用函数式组件，因为它更直观，并且所需的代码更少。
这里有一篇关于如何编写更好的 React 组件的文章，还有一篇关于使用 React 组件代替 HTML 的文章。
🟡 React 中的状态
状态是组件私有的数据。我们不会跨组件共享状态。组件的“状态”用于渲染和修改信息。
您可以查看有关React 中的状态的深入指南，以更好地了解其工作原理。
🟡 React 中的 Props
在实际编程中，你需要组件之间相互交互。状态是组件私有的，但你需要在组件之间传递数据。这就是Propsprops 的作用所在。注意，props 是只读的。
这里有一个关于如何在 React 中使用 props 的快速入门教程。这里还有一个实用的速查表，分享了你应该知道的 10 种 props 模式。
最后，这里有一篇关于React 中的 props 和 state的适合初学者的文章，以防你需要了解任何基础知识。
🟡 React 中的列表和键
我们使用 list 在 React 组件中渲染项目列表。列出用户、待办事项和其他内容是一项非常常见的任务。我们使用 listmap()函数迭代列表并渲染结果。
keys帮助识别列表中哪些项目已更改，以通知 React 重新渲染。如果您忘记提及列表的键，ReactJS 会发出警告。
🟡 React 中的生命周期方法
我们讨论过，“状态”是组件的私有属性。状态可以是动态的，可能需要修改。我们还需要在组件销毁时执行资源清理。ReactJs 提供了各种生命周期方法来检测各个阶段并采取行动。
如果你刚开始使用 ReactJS，你应该了解函数式组件的生命周期管理。你可以使用内置的钩子来实现，例如useState、useEffect等等。
这里有一段视频可以帮助你了解React 组件的生命周期。还有一篇文章可以教你 React Hooks 的基础知识。
如果您需要一份全面的初学者指南来巩固这些概念，这里有一本深入的React 手册可以帮助您入门。
如何从初学者晋升为中级 React 开发人员
现在让我们了解如何从 React 初学者晋升到中级水平。
在这个阶段，你将开始关注应用程序的完整性。在这个阶段结束时，你将能够应对大多数 ReactJs 挑战，并享受完成它们的乐趣。
🟣 React 中的样式
我们都希望自己的应用看起来清新美观。您可以使用普通的 CSS 来设计您的 ReactJS 应用。或者，您也可以使用 Sass 或其他 CSS 驱动的组件库，例如TailwindCSS、ChakraUI、react-bootstrap或MUI。选择权完全在您手中。
例如，这里有一个关于使用 TailwindCSS 设置 React 应用程序样式的教程。
🟣 React 中的表单处理
处理表单是 Web 应用程序中的一项基本需求。你需要了解如何以 ReactJS 的方式处理表单元素。
例如，您可以使用 react-hook-form 库轻松构建表单。以下是一些关于react-hook-form入门的教程。
🟣 React 中的数据处理
这是应用程序开发的关键部分。你需要学习如何使用fetch API或类似 的库node-fetch，以及axios如何与 API 交互以及在组件中处理数据。
这里有一个帮助您开始使用 Fetch API 的速查表，这里是如何将 Axios 与 React 结合使用的深入指南。
🟣 React 中的协调过程
ReactJS 使用虚拟 DOM 和 diffing 算法来决定何时以及在实际渲染时更新哪些 DOM。了解其底层工作原理将有助于你的调试。
这里有一个关于 DOM（即文档对象模型）的入门指南，这里还有一个关于如何操作 DOM 的指南。然后，你可以查看这个关于虚拟 DOM 的概述以及它在 React 中的工作原理。
🟣 React Hooks
希望你已经了解了一些内置钩子，比如useState useEffect你学习生命周期时学到的。你还需要学习其他一些有用的内置钩子，并结合用例来学习。千万不要忽略它们。
这是一个有趣的基于项目的指南，介绍如何通过构建 Paint 应用程序来学习 React Hooks。
🟣 自定义 React Hooks
自定义钩子有助于提高可复用性。你必须寻找机会将组件逻辑提取到可复用的钩子中。使用自定义钩子可以使代码变得简洁且模块化。
以下是有关如何构建您自己的自定义 React Hooks 的分步指南。
🟣 React 中的 Context
在 React 应用中，我们将数据从父组件传递到子组件。这种传递是单向且自上而下的。如果父组件层级过深，数据（props）就必须经过多个组件。
另外，如果您需要在不属于层次结构的组件之间共享某些值，则需要一种机制。这时，您可以使用Context。
您可以通过本初学者指南了解有关 React 上下文的所有信息。
如何从中级 React 开发人员晋升到高级
在此阶段，你将学习一些专家级主题。只有当你使用 ReactJS 进行更广泛的应用程序开发时，才需要了解这些概念。
请注意，您可以在准备好时逐一学习这些概念。此外，您不必全部学习。
🟢 React 中的延迟加载
ReactJS 支持代码拆分。它可以让当前用户延迟加载所需内容，从而避免生成庞大的构建包。该dynamic import功能是在 React 应用中包含代码拆分的最佳方式。
这是有关React 中的延迟加载的基本教程，可帮助您入门。
🟢 React 中的 Portal
在处理需要更佳事件处理能力的模态框、对话框或工具提示时，你可能需要使用 Portal。ReactJS 已提供开箱即用的支持。
🟢 React 中的状态管理
在大型应用程序中，必须在组件之间共享信息。有时，Props和 的默认支持Context可能不够用。
Redux在这些情况下，你可能需要类似或的状态管理解决方案MobX。但同样，你可以自行决定是否需要它们。
这里是一份便捷的Redux 初学者指南，可以帮助你快速上手。如果你想深入了解 Redux，这里有一本完整的书籍可以阅读。
🟢 React 中的路由
多页应用需要路由功能。将特定页面添加到书签或使用浏览器的后退按钮在应用中来回切换也很有帮助。
React Router是最流行的路由解决方案，有助于声明式路由。
这是学习 React Router 的深入指南，可帮助您了解所有基础知识。
🟢 React 中的主题
主题是 Web 应用的一项现代功能。我们应该让用户自主选择他们想要的主题（例如浅色或深色），以便他们在使用您的网站或应用时感到舒适。
您甚至可以在某些应用程序中创建自定义主题并应用它们。您可以通过多种方式为 React 应用设置主题。请选择最适合您应用程序 CSS 堆栈的方案。
🟢 React 中的模式
React 中有很多常见的问题解决方案，例如各种模式。随着时间的推移，ReactJS 开发者们已经找到了一些可以帮助他们避免重复造轮子的模式。
学习这些模式对你大有裨益。访问此网站，查找最常用的 ReactJS 模式及其示例。
🟢 React 中的反模式
反模式是你在 ReactJS 应用程序中应该避免使用的做法。你应该学习它们，并学习一些有用的模式。
请记住，学习 React 的高级概念并不止于此。您可以根据需要继续学习可访问性、测试框架以及更多高级概念。
那么，如何开始使用 React？
这是一个价值数十亿美元的问题！有很多优秀的资源（书籍、文章、视频）可以帮助你了解上述主题，其中许多资源在每个部分都有链接。所以，你可以找到最适合你的资源。
您还可以查看以下资源：
- ReactJS 官方文档
- freeCodeCamp 的前端开发库课程
- 在使用 ReactJS 多年之后，我开始创建一个 YouTube 视频系列，旨在涵盖我们在文章中讨论的所有内容。如果您觉得有帮助，请订阅。
我还应该学习 React 吗？
另一个常见问题——答案是肯定的。React 正在不断发展，社区也在快速壮大。没有理由退缩。
此外，React 是许多其他流行框架的基础，例如Next.js、GatsbyJS和最近的Remix。
我并不是在将 React 与 Angular、Vue 或 Svelte 框架进行比较。它们都有各自的优秀之处，例如 ReactJS 就是一个优秀的用户界面开发库。
在我们结束之前...
希望这份路线图对您有所帮助。请在开始学习之前做好充足的练习。Twitter如果您想进一步讨论，欢迎随时联系我的私信。
让我们联系吧。我也会在这些平台上分享我在 JavaScript、Web 开发和博客方面的学习成果：
期待下篇文章与大家见面。在此之前，请保重，保持快乐。
