如何学习ReactJS：初学者完整指南

每个前端开发人员和Web开发人员都知道在多个地方编写相同的代码是多么令人沮丧和痛苦。如果他们需要在多个页面上添加一个按钮，他们将被迫编写大量代码。使用其他框架的

使用其他框架的开发人员面临着重新编写大部分代码的挑战，即使在编写经常更改的组件时也是如此。

开发人员需要一个框架或库，使他们能够分解复杂的组件并重用代码以更快地完成项目。 React 就出现了，解决了这个问题。

React 是用于构建用户界面的最流行的JavaScript 库。它快速、灵活，并且拥有一个可以为您提供在线帮助的优秀社区。

React 最酷的一点是它基于组件，你可以将复杂的代码分解成单独的部分，称为组件，这可以帮助开发人员更好地组织他们的代码。

许多公司正在迁移到React，这就是为什么大多数初学者和经验丰富的开发人员也扩展了知识来学习这个库。

学习这个库是一项艰巨的任务。您观看了大量教程并尝试获取学习库的最佳材料，但如果您不知道学习库的正确路径或分步过程，可能会变得不知所措。我们将讨论React 入门路线图，以及进入React 的基本先决条件（清单）。让我们开始吧……

一、基本条件

1) HTML、CSS 和JavaScript 的基本知识。

2）、Javascript的一些ES6函数，比如

让和常量

箭头函数

类和“this”关键字

3）NodeJS和代码编辑器的基础知识

2. HTML、CSS、JavaScript

如果您是一位经验丰富的开发人员，请不要跳过本节，这里有一个快速入门。

每个前端开发人员都是从这三件事开始他们的旅程的。这些是前端Web 开发的基本基础，它们共同创建一个功能齐全的Web 应用程序/网站。

将人体视为一个网站或网络应用程序。

HTML 可以被认为是告诉正文必须去哪里的结构或“骨架”。

如何学习ReactJS：初学者完整指南

CSS定义了一种样式，一种“皮肤、肉体”，它告诉特定的片段应该看起来像它的颜色、高度、宽度等，

JavaScript 定义了功能，即“大脑”的一部分，告诉每个部分要做什么。

3.Javascript的ES6函数

ES6是JavaScript的版本，ES6有很多特性。要开始使用React，您需要了解箭头函数、Let 和Const、Class 和“this”关键字。

箭头函数：箭头函数允许您为函数编写更短的语法。它使您的代码干净且更具可读性。检查下面的代码片段.

Let 和Const：您将使用“let”和“const”而不是“var”关键字。简而言之，两者都有所不同.

Constant定义了一个常量变量，其值不能改变。

如果我们谈论“this”关键字，那么它代表当前正在执行的对象。确保您清楚“this”关键字的概念，这对许多开发人员来说非常困惑。还要了解什么是Call、Apply 和Bind 方法（用于将“this”关键字绑定/连接到对象）。

4. NodeJS基础知识和代码编辑器

了解NodeJS 基础知识对于使用ReactJS 非常重要。简单来说，NodeJS就是javascript的执行环境。许多人认为这是一种不正确的编程语言。每个浏览器都嵌入了JavaScript 引擎，例如Chrome 具有V8 引擎，Mozilla Firefox 具有SpiderMonkey。

你无法在浏览器之外执行任何操作，例如文件操作、操作系统操作、网络操作等。因此，该节点已经存在。 Node 允许您在浏览器之外执行所有这些操作。它嵌入了chrome的V8引擎。

现在你可能对NodeJ 非常熟悉了，所以让我们讨论一下学习React 时必须了解的Node 的所有特性。

NPM（Node Package Manager）：NPM是一个包管理器，用于将节点模块和包安装到项目中，就像python的PIP一样。

IMPORT 和EXPORT 关键字。

导入：在项目中使用NPM 安装Node 模块后，必须使用“import”关键字才能使用该模块。

Export：创建模块/组件时使用此关键字，您只需返回一部分而不是所有方法和变量。

阅读文章ReactJS |导入和导出以获取有关此主题的更多帮助。您可以使用任何代码编辑器来处理React。许多Web 开发人员最喜欢Visual Studio Code – VS Code -（强烈推荐）、Sublime Text 或Atom。

5.学习ReactJS

如何学习ReactJS：初学者完整指南

基础知识：上面讨论的所有内容都是ReactJS 的先决条件。现在，一旦您了解了上述所有内容，您就可以开始使用React 了。首先了解React的基本概念。我们将在这里为您提供概述。

React 是Facebook 开发的一个Javascript 库，用于构建交互式用户界面。它遵循基于组件的架构，这意味着您将整个UI 部分划分为可重用的组件，所有这些组件都是单独制造的，并最终在渲染之前组装成父组件。以下是ReactJS 中需要学习的一些重要主题……

组件架构（已经讨论过）。

状态：基本上，“状态”包含同步变量。如果更改状态变量的值，则更改会立即反映在使用该特定变量的所有位置。

Props：就像在函数或方法中传递的参数一样。在React 中，props（参数）作为输入参数传递到HTML 标签中。

功能组件、类组件。

React 中的样式(CSS)。

了解如何使用React 应用程序连接到API。

阅读教程ReactJS | GeeksforGeeks，官方React 教程，并观看视频ReactJS 教程。一旦您对React 有基本的了解，您就可以开始构建一些基本项目，例如.

简单的待办事项列表

简单的计算器应用程序

创建购物车

使用GitHub API 显示GitHub 的用户统计信息

React Router：React Router 将帮助您了解路由在React 应用程序中的工作原理。如何使用React Router 加载特定页面的内容或如何重定向到特定页面。例如，要从主页重定向到博客页面，您必须设置路由，使其仅显示博客页面中的内容。

从视频React Router for Beginners 和React Router 中了解这一点。一旦了解了React Router，您就可以创建一些项目，例如简单的CURD 应用程序或Hacker News 克隆。

Webpack：Webpack 是Javascript 中的模块捆绑器，可帮助您将项目的依赖项保留为静态文件，以便开发人员无需这样做。 Webpack 还附带了加载器。加载器可帮助您运行项目中的特定任务。

服务器渲染：学习这个概念将帮助您在服务器中创建组件并将它们渲染为HTML 并在浏览器中渲染它们，当所有JavaScript 模块都下载到浏览器中时，React 就会上台。这是React 最酷的功能之一，可以与任何后端技术一起使用。从Tyler McGinnis 的Linked React Server Rendering 了解这个概念。