一份关于 2024 年 React 初学者入门路线指南

在这篇文章中，我们一步一步探索了如何从零基础开始学习 React，并逐渐成长为一名初级开发者。通过理解基础概念、实践构建静态和动态项目，最终发展到创建复杂的应用程序并加入到个人作品集中，您现在已经准备好迈向 React 开发者的职业道路。

引言

​

在这篇文章中，我将分享一条从零开始，用 3 到 6 个月时间成为一名 React 初级开发者的学习路径。在开始前，给大家介绍一款强大的前端工具啊——JNPF。

应用地址：https://www.jnpfsoft.com/?csdn

开发语言：Java/.net

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类，方便扩展；集成了代码生成器，支持前后端业务代码生成，实现快速开发，提升工作效率；框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用；后端框架支持 Vue2、Vue3。如果你有闲暇时间，可以做个知识拓展。

如果你想提高工作效率，建议可以来试试这个强大的工具。还有，记住，成为一名熟练的开发者不是赛跑，而是一场持久的学习之旅。首先，确保你每天有 3-4 小时的专注时间来学习和练习。根据你的个人情况和目标，可以灵活调整学习计划。

探索新版 React 文档（第 1-2 周）

刚开始学习 React 时，最佳的学习资源并不是课程或书籍，而是完全免费的 React 官方文档。2023 年，React 的文档进行了全面重写，无论是简单还是复杂的主题，这些文档都是关于 React 的官方信息源。

https://react.dev/

实践操作建议

• 阅读理解：尝试阅读并理解 React 文档的前 10 篇文章。

• 核心概念：熟悉 React 的核心概念，如元素、组件、JSX、通过 props 传递数据、渲染和列表。

• 遇到难点：如果遇到特别难理解的概念，可以向 ChatGPT 寻求更简单的解释。

互动式代码沙盒

新版 React 文档还包括互动式代码沙盒（sandboxes），这意味着你可以在浏览器中直接操作示例中的 React 代码，增强理解和实践能力。

是否需要先学习 JavaScript？

很多人可能会问，在深入学习 React 之前是否需要完全掌握 JavaScript。到了 2024 年，我的建议是：不必完全掌握，但需要了解一些基础。

React 应用中通常会用到的 JavaScript 基础包括：

• 简单数据类型：字符串、数字和布尔值。

• 复杂数据类型：对象和数组。

• 函数：包括异步操作和 Promises。

这些是进入 React 之前你需要知道的一些基础概念。

学习路径的灵活性

其他更深入的 JavaScript 知识可以在学习 React 的过程中遇到时再学习。因此，没有必要在开始学习 React 之前就花几个月时间完全掌握 JavaScript。

第三周：在电脑上运行 React 项目

在这个阶段，你需要学会如何从零开始创建并在你的电脑上运行一个 React 项目。这是构建 React 应用的关键一步。

实践步骤

• 学习过程：预留一周时间来学习创建、安装和在本地机器上运行 React 项目的整个过程。

• 参考文档：React 官方文档提供了完整的指南，你可以深入学习。

• 环境熟悉：花时间设置并熟悉你的代码编辑器，通常会是 Visual Studio Code。了解如何使用 Vite 创建 React 项目。

工具选择和环境配置

• 编辑器选择：Visual Studio Code 是最受欢迎的 React 代码编辑器。

• 项目创建工具：2024 年，推荐使用 Vite 而不是 Create React App 来创建 React 项目。此时，Create React App 已经过时，而且应避免使用 Next.js 创建项目。

• 终端操作：熟悉在终端（无论是 Visual Studio Code 的集成终端还是计算机的终端或命令行）中打开和运行基本命令。

版本控制和在线工具

• Git 和 GitHub：如果有额外时间，可以学习如何使用 Git 和 GitHub 来跟踪代码的更改。在团队合作中，使用像 Git 这样的版本控制系统来记录更改是非常重要的。

• 在线工具：如果在这一步遇到困难，记住你也可以使用 CodeSandbox 或 StackBlitz 之类的在线工具在浏览器中创建和编写 React 应用。并不是每个项目都需要在你的电脑上创建一个文件夹。

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

开始构建简单界面

现在你已经对 React 有了基本的了解，并知道如何使用它来构建用户界面，是时候开始构建简单的界面了。在开始制作功能完整的应用之前，你需要专注于使用 React 元素、组件和 CSS 来构建应用的外壳。

实践步骤

• 灵感来源：观察你每天使用的网站，尝试构建其中的一部分（例如按钮、导航栏、英雄区域等）。

• 分步实现：不必构建完整的页面，先从简单的部分开始。将其编写为一个独立的组件。

• CSS 样式：重现组件，使其外观尽可能接近原始样式（借助 CSS）。

• 组件组合：随着你越来越自信，尝试将这些组件组合成更完整的用户界面。

学习重点

• React 元素和组件：学习如何将这些元素分解为可重用的组件，并尝试使用 props 传递数据使其动态化。

• CSS 应用：建议熟悉在 React 中使用 CSS。你可以使用简单的样式表或像 Tailwind CSS 这样流行的框架。

• 避免依赖组件库：尽量不要使用组件库。作为前端开发者，避免使用 CSS 是不可能的。你需要它来创建吸引人的界面。

HTML 的语义化

这个阶段构建 React 的静态页面也是学习语义化 HTML 基础的好机会。如果你不熟悉这个概念，有许多文章可以教你如何正确地构建 HTML 标签结构，避免混乱的 div 嵌套。

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

开始构建功能性项目

继静态 React 项目之后，你的目标是制作小型但功能性的 React 项目，执行简单的任务。

实践步骤

• 小型动态应用：尝试制作 10 个以上的小型动态应用，使用状态（state）和事件处理功能。例如计算器、视频播放器、待办事项列表、图片轮播、名言生成器等。

• 项目规模：这些应用应该小而简单，制作时间不超过一天。

功能性和中级项目特点

• 用户交互：这些项目应该更像真实世界的应用程序，与基本的静态项目相比。它们应该能够处理用户输入、事件并使用 React 状态管理数据。

• 副作用处理：应该制作涉及从外部数据源请求数据（使用 Fetch API）的项目。

• React Hooks：在这个阶段，你应该熟悉基本的 React 钩子，如 useState、useEffect，有时候也需要 useRef、useContext 和 useReducer。

• 性能相关钩子：对于 useCallback 和 useMemo 等与性能相关的钩子，不必过度担心。这些钩子应谨慎使用。

项目数量和时间管理

• 项目数量：尽量构建尽可能多的小型应用（建议至少 10 个），但不要在任何特定项目上花费超过一天的时间。完成一个项目，或者如果做不到，就转向下一个。

• 项目灵感：如果需要项目灵感，可以参考我的完整文章，其中展示了许多可以在一天内完成的 React 初学者项目。

https://www.freecodecamp.org/news/react-projects-for-beginners-easy-ideas-with-code/

第 11-14 周：构建你的开发者作品集

迈向更高级的项目

当你开始感到中级项目有些简单时，就是构建更高级项目的时候了。一旦你在构建小型 React 项目中感到自信，这表明是时候挑战更高级的项目了。

实践步骤

• 选择大型项目：选择一个更大、更有雄心的 React 项目，你真正想要在更长时间内（比如一个月）去构建它。

• 作品集展示：在你的开发者作品集中突出展示这个项目，并描述你在构建过程中使用的技能和工具。

• 高级项目示例：一个高级项目可能是一个较大应用程序的迷你克隆版，例如 YouTube 克隆版，用户可以登录、上传视频并与朋友分享。

选择大胆的项目

挑战自我：记住，React 用于构建你每天使用的主要应用程序，如 TikTok、Twitch、Hulu、Notion 等。因此，在选择作品集项目时要有大胆的思考。

长期投入：这些更高级的项目应该需要更长的时间来完成，这是件好事。它们应该是你真正感兴趣的，使用 React 构建的热情项目，激发你去创造。

在构建过程中学习

技术探索：在构建过程中，你将学习许多之前不知道的事情。例如，在不少的示例项目中，你需要研究如何在 React 中上传媒体、使用某种认证服务进行用户认证、为 React 项目选择最佳视频播放库。

决策过程：在整个过程中，你还会做出许多小的决定。

最终挑战与作品集

这最后一个阶段应该是对你作为一名开发者的真正挑战。你在一个月或更长时间内构建的作品，是你开发者作品集的完美补充。

你的开发者作品集应该包含一个或多个展示你对 React 的熟练程度的项目。它将向潜在雇主展示你可以为工作带来的价值。

一旦你有了一个你自豪的功能性项目，感觉你对 React 核心概念理解得相当好，知道如何在编码时解决问题，你就应该处于一个很好的位置，可以开始申请 React 初级开发者职位了。

结束

在这篇文章中，我们一步一步探索了如何从零基础开始学习 React，并逐渐成长为一名初级开发者。通过理解基础概念、实践构建静态和动态项目，最终发展到创建复杂的应用程序并加入到个人作品集中，您现在已经准备好迈向 React 开发者的职业道路。保持对学习和探索的热情，相信您会在 React 的世界里取得更大的成就。祝您编程愉快！