ReactJs 初学者路线图🗺

大家好，这篇博客将带你了解 React 的学习路线图。为了便于理解，我将 React 的概念分解成多个小模块。这篇博客仅面向初学者，很快我会发布另一篇关于 React 进阶路线图的博客，但这只是一篇路线图（学习路径）。为了方便学习这些概念，我添加了（大多数概念的）官方文档链接，你可以去那里学习。有趣的是，我还标注了学习这些概念后你将获得哪些收获🎯。

先决条件📝：

我假设您对以下内容有一些基本的了解：

HTML 基础知识（例如 HTML 元素、表单、表格、div 和列表标签及其属性）。
CSS 基础知识（例如，设置 html 元素的样式、CSS 选择器和盒子模型）。
JavaScript 基础知识（例如变量、条件语句、循环、数据类型、DOM 操作和事件触发）。

因此，在进入路线图之前，我们先看看什么是 React？

React 是用于设计丰富且交互式用户界面的最受欢迎的 JavaScript 库之一。React 基于组件的功能允许您创建可复用的组件，从而有效地扩展应用程序。使用 React 构建应用程序的视图可以使您的代码更具可预测性，也更易于调试。

以下是学习 React 的思维导图。为了便于理解学习路径，我将学习结构划分为模块，并进一步细分为概念。

路线图分为三个模块：核心、基础和 UI 样式。为了便于理解，我在每个模块旁边都添加了数字。我建议大家不要跳过任何模块，因为每个模块对于理解 React 来说都是必需的。为了方便学习，我根据自己的理解设计了路线图，但每个人的理解都有所不同。

那么，让我们开始吧！🚀

1. 核心

设置 React 项目- 您可以通过执行一些命令来设置 React 项目。完成后，它会生成一个 React 应用样板，您可以运行该应用来查看 React 的初始 UI。完成此步骤后，您应该熟悉使用 CLI（命令行界面）在本地创建新 React 项目的概念。
React 的执行流程- 对于 React 开发者来说，了解 React 应用的代码流程非常重要。此外，还要了解项目结构。完成此步骤后，您应该熟悉 React 应用的文件夹结构、React 应用在浏览器中的运行方式、什么是虚拟 DOM 以及如何在 React 中操作 DOM。
使用 JSX - JSX 看起来像 HTML，它基于 XML，并在运行时转换为 HTML 标签。通过学习 JSX 概念，你应该能够很好地理解 JSX、HTML 和 JSX 之间的相似之处以及 JSX 相对于 HTML 元素标签的优势。
组件类型- 了解组件、组件类型以及组件生命周期非常重要。通过学习组件概念，你应该能够很好地理解不同的组件类型以及何时应该使用哪种组件。
处理状态/useState 钩子- 状态是一个对象，我们可以在其中存储、读取和更新组件中的数据。在函数式组件中，我们可以使用“useState”钩子在本地管理状态。通过学习 React 状态，您应该能够很好地理解状态的工作原理、useState 钩子的使用方法、如何在 JSX 中显示状态值以及如何更新状态。
处理函数- React 中的函数与 JavaScript 函数相同，我们可以创建自己的函数来执行特定任务。通过学习函数，你应该能够在 React 组件中创建函数并调用该函数。
处理 JSX 事件- JSX 事件允许我们处理特定于 React 元素（JSX）的事件。通过学习 JSX 事件，你应该能够很好地理解不同的 JSX 事件（例如 onClick、onChange 等）及其用法。
模块- 模块允许您编写可共享的代码，以便通过导入来重用它。通过学习模块，您应该能够理解模块的概念，例如导入和导出模块、公共和私有属性以及函数。
组件嵌套和可复用性- 组件是一段独立且可复用的代码块，它返回 JSX 代码并执行某些特定任务。通过学习组件可复用性，你应该能够理解组件嵌套、根组件、父组件、子组件以及组件树。你还应该了解如何创建可在多个位置使用的组件。
Props - 使用 Props，我们可以将数据从一个组件传递到另一个组件。学习 Props 后，你应该熟悉如何将 props 从父组件传递到子组件，然后在子组件中接收和使用它们。
条件渲染- 条件渲染允许你按条件渲染 JSX，就像我们在 JavaScript 中使用 if else 条件一样。通过学习条件渲染，你应该能够按条件显示 UI，并理解 React JSX 中使用的三元运算符。

2. 基础知识

调试和日志记录- React 开发工具扩展可帮助您在浏览器窗口中监控 React 状态和组件。学习此步骤后，您应该能够调试 React 应用。
从外部 API 获取并显示数据- 这允许您使用 JavaScript 的内置方法执行 REST API 方法。通过学习此步骤，您应该能够很好地理解 JavaScript 的内置 fetch 函数，以便从端点获取数据、存储数据并相应地显示在 UI 上。
理解并使用 Axios 包- Axios 是一个流行的库，可以有效地向外部 API 端点发出 HTTP 请求。通过学习 Axios，你应该熟悉如何使用 Axios 从端点获取异步数据，并且还应该熟悉使用 Axios 的其他 REST API 方法。
UseEffect 钩子- UseEffect 钩子允许您决定在渲染组件后执行的操作，并根据提供给组件的依赖项对其产生影响。通过学习 UseEffect 钩子，您应该熟悉带有依赖项的组件渲染的副作用。
Context API/useContext hook - Context API 是 React 的内置功能，无需使用任何外部库即可执行状态管理。通过学习 Context API，你应该能够很好地理解全局状态和状态管理、消费者和提供者、useContext 以及 UserReducer hook。
浏览器的本地存储- 本地存储允许您将数据本地存储在浏览器的存储空间中。通过学习此步骤，您应该对浏览器本地存储以及如何从本地存储读取和写入有充分的了解。
React Router - React Router DOM 是用于导航 React 应用的热门外部库之一，它还能让你的 UI 与 URL 同步。通过学习 React Router DOM 库，你应该能够熟悉 React 应用的导航和路由，并根据路由切换 UI。

3. 界面样式

网格布局- CSS 网格布局概念提供了一种基于网格的布局系统，用于基于行和列来设计 UI。通过学习网格布局，您应该能够很好地理解如何将 UI 元素作为单元格放置在网格布局中。
Flexbox - Flexbox 布局让你无需使用 CSS 的定位和浮动即可构建灵活且响应迅速的 UI。学习 Flexbox 后，你应该熟悉容器的概念，以及如何对齐和调整元素。
SCSS - 要使用 scss，您必须通过 npm 安装 node-sass 包。它是一个 CSS 预处理器。通过学习 SCSS，您应该能够熟悉导入其他 scss 文件、声明和使用变量、嵌套等等。

感谢阅读！👍 希望你理解了所有内容。如果你有任何疑问，或者觉得我遗漏了什么，请在评论区告诉我。📑

文章来源：https://dev.to/suhailzone/reactjs-roadmap-for-beginners-2021-14en