介绍
React JS 是一个开源的前端库。该库的主要目标是为 Web 和移动应用程序创建快速且美观的用户界面。.
ReactJS 由 Facebook 开发，能够让网站看起来更美观，因此深受大多数开发者的喜爱。然而，许多开发者犯的错误是，在没有了解 ReactJS 的先决条件的情况下，就直接上手 ReactJS（或其他任何库或框架）。直接学习 React 会在学习过程中以及面试中给你带来很多问题。.
学习 ReactJS 的必要前提条件
HTML 和 CSS
网页的构建基石是 HTML 和 CSS。用于在浏览器中描述网站各个组成部分的语言称为 HTML，即超文本标记语言。因此，您可以使用 HTML 指定标题、段落、链接、嵌入内容等等，这有助于浏览器理解如何组织您正在浏览的网页。.
CSS，即层叠样式表，赋予网页外观和布局。换句话说，CSS 用于创建美观的网站，包括漂亮的字体、鲜艳的色彩、惊艳的背景，甚至还有流畅的过渡效果和 3D 特效。.
每个前端开发人员都是从 HTML 和 CSS 开始的。因此，当你学会使用 React 时，你应该已经精通 HTML 和 CSS 的编码了。.
学习 Reactjs 的首要前提是学习 HTML 和 CSS。你需要知道如何创建语义化的 HTML 标签、编写 CSS 选择器、使用类、CSS 覆盖、实现盒模型，以及如何切换到 border-box 和 flexbox，同时还要掌握前端应用程序和响应式 Web 应用程序所需的 HTML 和 CSS 知识。 .
JavaScript 和 ES6 基础知识
JavaScript 的下一个版本，ECMAScript 6，简称 ES6，带来了许多变化和新特性。得益于 ES6 令人惊艳的新特性和全新的 JavaScript 语法，你的代码将更加现代化、更易读。你可以用更少的代码实现更多功能。我们将学习 ES6 中的一些强大新特性，例如模块、模板字符串、类析构函数和闪现函数。.
在学习 React 之前，你应该先掌握 ES6，因为 Hooks 已经取代了基于类的组件。你会发现 Hooks 大量使用了 ES6 的特性。.
如果你不习惯编写箭头函数，那么使用 React 将会很困难，因为一些钩子函数需要你将箭头函数嵌套在一起，这可能会让人感到困惑。.
由于 React JS 完全支持 ES6，学习和理解 ES6 将改善您作为 React JS 和 Javascript 开发人员的生活，因为它使阅读和编写 React JS 代码变得更加容易。.
Git 和 CLI（命令行界面）
在软件开发过程中，Git 是一个非常重要且有效的工具。.
Git本质上是一个分布式版本控制系统，用于跟踪应用程序开发过程中源代码的变更。Git可以用来监控任何文件系统上的开发进度，即使该系统最初是为了促进开发人员之间的协作而创建的。.
学习如何使用 push、pull、append、commit 等所有命令，因为你需要用它们来跟踪文件的版本。此外，还要学习如何合并、创建分支以及处理合并冲突。.
命令行界面 (CLI) 将帮助您执行 React 中的所有操作。您应该习惯使用 CLI，因为它可用于许多不同的任务，例如安装软件包、使用 NPM、构建和运行 React 应用程序等等。.
包管理器（Node + Npm）
使用 ReactJS 时，安装多个较小的软件包至关重要。Node 包是包含所有必要文件的 JavaScript 库。模块是包含在 Node 项目中的 JavaScript 库。包中包含两部分：JS 文件和 package.json 文件。你需要一个优秀的安装程序来安装这些包，这样可以让你轻松下载和安装应用程序，而无需担心依赖关系。.
这时，Node 包管理器 (NPM) 就派上用场了，它可以帮助您安装和管理 JavaScript 应用程序。您可以先安装 Node.js 来安装 NPM。安装 Node.js 时，NPM 会自动设置。.
您可以从官方网站下载 Node.js。点击此处
使用 React 构建新的单页应用程序的最佳方法是使用 Create React App，这是一个学习 React 的便捷环境。.
以下命令将为您创建一个示例项目。您可以按照以下步骤开始：
npx create-react-app my-app
cd my-app
npm start因此，在深入学习 React 之前，你应该熟悉 NPM（Node 包管理器）注册表和包安装技巧。简而言之，NPM 注册表是开发者获取开发所需软件的地方。.
ES6 变量 – let 和 const
在 ES6 之前，开发者要么使用 var 关键字声明变量，要么就不用。然而，一切都改变了！
JavaScript 于 ES6 进入了现代，ES6 新增了两个用于定义变量的关键字：let 和 const。它们的作用域不同，作用域决定了变量的使用位置和权限。变量可以位于函数内部、代码块内部，也可以位于函数和代码块之外。.
var：函数作用域级别 – 此关键字不允许从外部访问在函数内部声明的变量。.
let：块级作用域 – let 关键字使变量可以在声明作用域之外访问。.
const：块级作用域——const 关键字类似于使用 let 关键字声明的变量。常量的值不能通过重新声明或重新分配内存来改变。.
箭头函数
箭头函数是 JavaScript ES6 版本中的一项新特性。与普通函数相比，它们使函数编写更加简洁。.
- 它简化了代码，使其更易于阅读。.
- 上下文«this»的最大好处是它消除了«链接»函数的需要。.
- 目前大多数浏览器都支持箭头函数。.
let x = (x, y) => x * y;出口和进口
我们可以使用 ES6 在 JavaScript 中创建模块。模块可以包含类、函数、变量和对象。使用 JavaScript 模块，您可以将代码拆分成不同的文件。这样一来，代码库就更容易维护。.
我们可以使用导出和导入命令将所有成员导入到另一个文件中。导出和导入模块中的成员需要使用 export 和 import 关键字。.
休息和扩展运算符
在 JavaScript 中，扩展运算符和剩余运算符都用三个点 (…) 表示。然而，这两个运算符实际上并不相同。它们的主要区别在于：使用剩余运算符时，JavaScript 数组会填充用户指定值集合的剩余部分；而扩展运算符则会将可迭代对象展开到其所有元素。.
解构对象和数组结构
解构是将对象或数组的各个组成部分拆解开来的过程。解构允许你在拆解后根据想要执行的操作来修改和交换元素。.
JavaScript 使用方括号 [] 来销毁数组，这允许我们将赋值给包含该元素的数组名称的变量名存储起来。.
每当我们销毁一个对象时，都需要使用花括号括起来，并写明该对象包含的确切名称。与数组可以使用任意变量名不同，对象只能使用存储数据的名称来打开元素。.
模板字面量
在 ES6 中，模板字面量引入了新特性，使你能够比动态字符串更灵活地生成字符串。字符串通常使用单引号 (') 或双引号 (") 生成。.
字面量是一种允许使用反引号 ( ) 字符嵌入表达式的字符串。它可以与字符串插值和多行字符串一起使用。这种字符串以前被称为模式字符串。.
地图过滤和简化
JavaScript 中有三个数组函数：map、reduce 和 filter。每个函数都会在迭代过程中对数组执行转换或操作。每个函数都会根据其输出生成一个新的数组。.
使用 map() 方法，可以通过对旧数组的每个元素应用函数来创建一个新数组。.
`filter()` 方法会对数组中的每个元素应用一个条件语句。如果条件为真，则将该元素添加到输出数组中；如果条件为假，则不会将该元素添加到输出数组中。.
使用 reduce() 方法可以将值数组简化为单个数字。数组中的每个元素都会经过一个 reducer 函数处理，从而生成输出值。.
课程
JavaScript ES6 引入了类这一新特性。对象通过类来设计，并且可以从类创建对象。.
这个类可以比作一个房屋的基本原型。它包含了所有关于房间、入口等的信息。你可以按照这个描述来建造房屋。这个对象就是房屋本身。我们可以从同一个类生成多个对象，因为可以使用相同的规格建造多栋房屋。.
// creation of a class
class Home {
constructor(area) {
this.area = area;
}
}
// creation of an object
const home1 = New Home(100);首先学习函数式组件。与基于类的组件相比，React Hooks 更易于使用，并且只需更少的代码即可实现相同的目标。.
虽然并非所有人都使用函数式组件重写应用程序，但您也应该了解类组件。这是因为大多数应用程序都是使用类组件开发的。.
与函数式组件相比，构建 React JS 类组件更加复杂。React JS 类组件包含构造函数、生命周期方法、渲染函数，甚至还有用于管理数据的状态管理。.
这是在浏览器中
在 JavaScript 中，函数的 THIS 关键字的工作方式与其他语言略有不同。它还会区分严格模式和非严格模式。.
THIS 的值通常取决于函数的调用方式（运行时执行）。由于在执行期间无法通过赋值来设置该值，因此每次调用函数时，THIS 的值可能都不同。但是，无论函数的调用方式如何，都可以使用 bind() 方法来设置该值。.
Promise 和异步等待
在 JavaScript 或 Node.js 中，有多种管理操作的方式。不同的操作在异步执行期间同时进行，每个操作的输出一旦被访问就会立即被处理。.
NodeJS 中的 Promise 与现实世界中的 Promise 类似，它保证某个操作一定会被执行。Promise 控制异步事件发生后的操作，并跟踪事件是否已执行完毕。.
Promise 由使用 Async/Await 的异步方法处理。最近对代码进行了重构，使 Promise 更易于阅读和使用。它简化了异步编程，使其更接近同步代码。.
为什么企业更倾向于选择 Reactjs？
- 组件编写更加流畅——使用 JSX 可以提高 JavaScript 代码效率。.
- 除了提高效率外，它还能简化未来的维护工作。.
- 它的渲染速度更快。
- 它还包含一些实用的开发者工具。.
- 单页应用程序 (SPA)
- 数据连接是单向的，类似于单向数据流。.
- 搜索引擎友好
结果
React JS 是一个开源的前端库。该库的主要目标是为 Web 和移动应用程序设计快速且美观的用户界面。ReactJS 的基本前提是 HTML 和 CSS、JavaScript 和 ES6 基础知识、Git 和命令行界面 (CLI) 以及包管理器（Node + Npm）。您需要了解的内容包括 ES6 变量、箭头函数、导出和导入、剩余运算符和扩展运算符、对象析构函数、数组以及 JavaScript 中的 this 关键字。模式字母表是一种字符串字面量，它允许使用反引号嵌入表达式。JavaScript 中有三个数组函数：map、reduce 和 filter，用于在遍历数组时执行操作。.
