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

最新推荐文章于 2024-08-19 11:18:08 发布

jinmu520

最新推荐文章于 2024-08-19 11:18:08 发布

阅读量797

点赞数

文章标签： javascript reactjs 前端 web前端

本文链接：https://blog.csdn.net/jinmu520/article/details/105915205

版权

每个前端开发人员和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’关键字。

箭头功能：箭头功能可让您编写函数的较短语法。它使您的代码干净且可读性更高。检查下面的代码片段…
在这里插入图片描述
Let和Const：您将使用’let’和’const’代替’var’关键字。简而言之，两者都与var不同…

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

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

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

如果我们谈论’this’关键字，那么它代表执行中的当前对象。确保您清除“ this”关键字的概念，这对很多开发人员来说都是很困惑的。同时了解什么是Call，Apply和Bind方法（用于将’this’关键字绑定/连接到对象）。我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流裙：前面：603 中间：985 最后：993。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。
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中学习的重要主题…

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

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