本文将向你展示如何在 3 到 6 个月让自己从一无所知的 React 小白成长为一名合格的初级 React 开发人员。

本文是一个分步学习指南，假定您每天有大约 3-4小时的时间用于学习和练习 React，当然更多的是要根据自己的实际情况合理规划和调整。

📖第1-2周：学习新的 React 文档

如果您刚开始学习 React，那么您整个学习过程中的理想资源不是课程或图书，而是 react.dev 站点内免费的React文档。

React 文档重写于 2023 年。无论是简单还是复杂的主题，它们都是 React 所有内容的官方来源。

React 文档不仅是熟悉 React 的绝佳途径，还是从头到尾学习 React 的最完整的在线资源。

应该做什么：

• 尝试阅读（并理解）React 文档的前 10 篇文章。
• 熟悉 React 的核心概念：元素、组件、JSX、使用道具传递数据、呈现和列表。

如果遇到任何特别困难的概念，可以尝试向 ChatGPT 寻求更简单的解释。

新的 React 文档还包括交互式代码沙箱，这意味着您可以在浏览器中使用示例中的 React 代码。

🤔 我需要先学习 JavaScript 吗？

您可能想知道，在您深入学习 React 之前是否需要完全学习 JavaScript。

在 2024 年，我个人认为，不，您实际上不需要。

在任何 React 应用程序中，您只需要掌握少量 JavaScript 基础知识，包括简单的数据类型，如字符串、数字和布尔值，以及复杂的数据类型，如对象和数组，还有函数和异步操作的Promise。其他的内容可以在学习过程中逐渐掌握。所以，在深入学习 React 之前，您不必花几个月时间完全学习 JavaScript。

💻 第3周：在计算机上运行一个 React 项目

在构建 React 应用程序之前，您需要做一件至关重要的事情。

您只需学习如何从头开始创建一个 React 项目，并在计算机上的开发环境中运行该项目。就这样。

应该做什么：

• 留出一周的时间，学习如何在本地计算机上创建、安装和运行 React 项目的整个流程。
• React 文档中有一份详尽的指南，您可以深入了解。

适应这个过程需要一些时间，但这很重要，因为您主要将在这里工作：在计算机上的 React 项目文件夹中。

花些时间设置并熟悉您的代码编辑器，可能会使用的是 Visual Studio Code（最受欢迎的React代码编辑器）。然后看看如何使用 Vite 来创建 React 项目。

创建 React 项目有很多方法。但是，我强烈推荐使用 Vite 而不是 Create React App。在 2024 年，CRA 已经过时了，此时您不应该使用 Next.js 创建项目。

最后，您需要习惯在终端中打开和运行基本命令，无论是 Visual Studio Code 中的综合终端，还是您计算机的终端或命令行。

如果您有额外的时间，请参考如何使用 Git 和 GitHub，了解如何将您对代码的任何更改推送到远程仓库。使用像 Git 这样的版本控制系统追踪这些更改对于与团队合作时非常重要。

如果您在这一步遇到问题，请记住，您也可以使用像 CodeSandbox 或 StackBlitz 这样的工具在浏览器中创建和编写 React 应用程序。并不是每个项目都需要作为您计算机上的文件夹创建。

🧱 第4-6周：构建静态 React 项目

现在，您对 React 是什么以及如何使用它构建用户界面有了基本的了解，开始构建简单的项目。

在开始制作完全功能的应用程序之前，您需要专注于使用 React 元素、组件和 CSS 进行样式设计构建应用程序的外壳。

应该做什么：

• 观察您每天使用的网站，看看能否构建其中一部分（按钮、导航栏、主要部分等等）
• 它不必是完整的页面 - 只需从一个简单的部分开始。将其编写为一个独立的组件。
• 调整该组件，使其在外观上尽量接近原始版本（借助CSS的帮助）。
• 随着您越来越自信，尝试将这些组件组合成一个更完整的用户界面。

您可以使用简单的 React 元素来遵循这一过程。您将学会如何将这些元素拆分成可重用的组件。之后，您可以尝试使用通过 props 传递的数据使其动态化。

在这个阶段，我强烈建议您熟悉在 React 中使用 CSS。您可以使用简单的样式表，也可以使用非常流行的 Tailwind CSS。

尽量不要使用组件库，因为作为前端开发人员，最终无法避免使用 CSS。您需要它来创建美观的界面。

使用 React 构建静态页面的这个阶段也是学习语义化HTML基础知识的好机会。如果您不知道什么是语义化 HTML，有很多文章可以向您展示如何正确地组织 HTML 标记，避免出现混乱的 div 金字塔。

🛠️ 第7-10周：构建动态 React 项目

在制作静态 React 项目之后，您的目标是制作能够执行简单任务的小型但功能齐全的 React 项目。

应该做什么：

• 尝试制作 10 个以上的小型动态应用程序，使用状态和事件执行简单任务。
• 这些项目应该很小，制作时间不超过一天，例如计算器、视频播放器、待办事项列表、图像轮播器、引用生成器等等。

一个中级的 React 项目示例：购物清单应用

这些项目之所以是中级项目，是因为与基本的静态项目相比，这些项目更像是真实产品中的应用程序。它们应该接受用户输入，即处理事件并使用 React 状态管理数据。

您还应该制作使用副作用的项目。这通常涉及使用 Fetch API 从外部数据源请求数据。

在这个阶段，您应该熟悉使用基本的 React hooks：useState、useEffect，有时候可能还有 useRef、useContext，也许是useReducer。

不要过于担心类似 useCallback 和 useMemo 这样与性能相关的钩子。应该适度使用它们。

尝试构建尽可能多的小型应用程序（我建议至少10个），但不要花费超过一天的时间来构建任何特定的项目。制作一个，或者如果您无法制作一个，请继续下一个。

如果您需要任何想法，我有一篇完整的文章，向您展示了许多React初学者项目，您可以在一天之内完成。

这段时间对于熟悉使用React和编写特定于React的代码而不仅仅是普通的HTML（实际上是JSX）和CSS非常重要。

🧑‍💻 第11-14周：构建您的开发者作品集

在您觉得大多数中级项目变得稍微简单了一些之后，应该进行最后阶段的项目构建。

当您开始对构建小型React项目感到自信时，这表明是时候努力提升自己，开始进行更高级的项目了。

应该做什么：

• 选择一个更大、更有雄心壮志、更长期一点的React项目（比如一个月）
• 将该项目突出显示在您的开发者作品集中，并描述您用来构建它的技能和工具。
• 一个高级项目可以是某个较大应用程序的迷你克隆，比如一个YouTube克隆，用户可以登录、上传视频并与朋友共享。

一个作品集项目示例：仿写 youtube 官网

请记住，React用于构建您每天都在使用的主要应用程序，如TikTok、Twitch、Hulu、Notion等。因此，在选择要制作的作品集项目时要有大写意识。

这些更高级的项目应该需要更长的时间，这是件好事。它们应该是您的激情项目 - 您真正有兴趣用React构建的项目，并激发您的兴趣。

在此过程中，您将学习到许多以前不了解的东西。您将需要研究以下内容（例如，在我们的YouTube示例项目中）：

• 如何使用 React 上传媒体文件
• 如何使用某种身份验证服务（可以是免费或付费）对用户进行身份验证
• 在 React 项目中使用哪个库最好播放视频
• 所有这些都是您将在旅程中找到的许多较小决策之一。

作为开发者，这个最后阶段应该对您构成一些挑战。您最终在一个多月的时间内所构建的东西是您开发者作品集的完美补充。

您的开发者作品集应该是一个或多个项目，代表着您对 React 的熟练程度。这将向潜在雇主展示您在工作中能够带来哪些能力。

一旦您拥有一个您为之感到自豪的功能项目，感觉对核心 React 概念有了相当好的理解，并且知道如何在编码过程中解决问题，那么您应该处于一个良好的位置，可以开始申请React初级开发人员职位了。

🏆 成为专业的 React 开发人员

尝试参加一些公司的面试，找找自己的短板，快速补齐。学习 React 源码并理解其背后的工作原理。