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

Posted 2021-04-26 web前端开发

英文 | https://www.geeksforgeeks.org/how-to-learn-reactjs-a-complete-guide-for-beginners/?ref=rp

翻译 | web前端开发（ID：web_qdkf)

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

使用其他框架的开发人员即使在编写频繁更改的组件时也面临着对大多数代码进行返工的挑战。

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

React是用于构建用户界面的最受欢迎的javascript库。它快速，灵活，还拥有一个强大的社区，可以在线帮助你。

关于React的最酷的事情是它基于组件，你可以将复杂的代码分解为单独的部分，即组件，这可以帮助开发人员更好地组织其代码。

许多公司正在向React迁移，这就是大多数初学者和经验丰富的开发人员也扩展了学习此库的知识的原因。

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

1、基本条件

1）、html，CSS和JavaScript的基本知识。

2）、一些Javascript的ES6功能，例如

• 让和const

• 箭头功能

• 类和“ this”关键字

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

2、HTML，CSS，JavaScript

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

• 每个前端开发人员都从这三件事开始他们的旅程。这些是前端Web开发基础的基本基础，它们都可以共同创建功能全面的Web应用程序/网站。
• 将人体视为网站或网络应用程序。
• HTML可以被认为是告知主体必须到达何处的结构或“骨架”。
• CSS定义了一种样式，即“皮肤，肉肉”，它告诉特定的段看起来应该像它的颜色，高度，宽度等一样，
• JavaScript定义了功能，它是“大脑”的一部分，该功能告诉每个部分做什么。

3、Javascript的ES6功能

ES6是JavaScript的版本，并且ES6有很多功能。要开始使用React，您需要了解Arrow函数，Let和Const，Class和'this'关键字。

箭头功能：箭头功能可让您编写函数的较短语法。它使您的代码干净且可读性更高。检查下面的代码片段...

// Old method function greet() {  console.log('GeeksforGeeks'); } var greet1 = function(){  console.log('GeeksforGeeks'); } //ES6 method var greet2 = () => {  console.log('GeeksforGeeks'); }

Let和Const：您将使用'let'和'const'代替'var'关键字。简而言之，两者都与var不同...

• 让我们定义一个局部变量，将它们的范围限制在声明它们的块中。

• 常量定义一个常量变量，其值不能更改。

类和'this'关键字：您将必须学习ES6中的面向对象编程概念，例如类，方法，对象。您可能已经用其他语言（例如C ++或Java）了解了这些概念。从ES6了解更多信息| 上课并按照此视频教程进行了解。

如果我们谈论'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（节点程序包管理器）：NPM是一个程序包管理器，用于将节点模块和程序包安装到项目中，就像python的PIP一样。

• IMPORT和EXPORT关键字。

• 导入：一旦在项目中使用NPM安装了Node模块，就必须使用'import'关键字来使用该模块。

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

阅读文章ReactJS | 导入和导出以获得有关此主题的更多帮助。您可以使用任何代码编辑器在React上工作。许多Web开发人员大多更喜欢Visual Studio代码-VS代码-（强烈推荐），Sublime Text或Atom。

5、学习ReactJS

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

React是Facebook开发的用于构建交互式用户界面的Javascript库。它遵循基于组件的体系结构，这意味着您将整个UI部分划分为可重用的组件，所有组件都单独制造，最后装配到父组件中，然后再呈现。以下是一些在ReactJS中学习的重要主题…

• 组件体系结构（已经讨论过）。

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

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

• 功能组件，类组件。

• React中的样式（CSS）。

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

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

• 简单的待办事项

• 简单的计算器应用程序

• 建立一个购物车

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

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

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

Webpack：Webpack是Javascript中的模块捆绑器，可帮助您将依赖项保持为项目的静态文件，从而使开发人员不必这样做。Webpack还带有加载程序。加载程序可帮助您在项目中运行特定任务。

服务器渲染：学习此概念将帮助您在服务器中创建组件并将其呈现为HTML并在您的浏览器中呈现，并且当所有JavaScript模块都在浏览器中下载后，React就成为了舞台。这是React最酷的功能之一，可以与任何后端技术一起使用。从Tyler McGinnis的链接React服务器渲染中了解这个概念。

Redux：在复杂的应用程序中，您将必须管理组件之间的状态。Redux是一个javascript库，可以解决此问题，并可以帮助您维护应用程序状态。在Redux中，您将所有状态存储在一个源中。从入门指南React-Redux简介和React Redux入门指南链接中更好地理解这个概念。

这就是从一开始就学习React的路线图。我们希望这会有所帮助！