在进入 React 之前，你对 JavaScript 有足够的了解吗？ 你知道如何使用 map() 方法在 javascript 或 ReactJS 中循环遍历数组吗？ 如果你在学习 React 并且遇到上述这些问题，那么你肯定在学习过程中犯了错误。毫无疑问，ReactJS 是前端开发者中最受欢迎的库，并且它的受欢迎程度与日俱增。在 ReactJS 上运行的网站看起来很漂亮，大多数开发初学者也被 ReactJs（由 Facebook 开发）所吸引，但许多开发人员和有经验的人常犯的错误是直接跳入 ReactJS（或其他一些库和框架） ) 在不知道先决条件的情况下。如果你直接去 React，你在学习这个库时会遇到很多问题，在面试中也是如此。 

如果你被问到一些与 ES6、JSX、Babel、包管理器、基本 javascript 或其他一些基本概念相关的问题，你会在面试中卡住。我们将讨论一些先决条件和一些基本概念，在你开始使用 React 之前你应该知道这些。这些基本概念也将帮助你在未来学习一些其他的 JavaScript 框架和库。 

1. HTML和CSS

每个前端开发人员都从 HTML 和 CSS 开始他们的旅程。所以在你开始学习React之前，你应该很好地掌握编写 HTML 和 CSS 的能力。您应该知道如何编写语义 HTML 标记、如何编写 CSS 选择器、如何使用类、如何实现 CSS 重置、框模型、如何重置为边框框、弹性框、如何编写响应式 Web 应用程序，包括媒体查询，以及如何使用 HTML 和 CSS 构建前端应用程序。 

2. JSX (Javascript XML) & Babel

在 React 中，您将使用看起来像 HTML的JSX ，您可以将其视为 HTML 风格的 JavaScript。这是在 javascript 中添加 HTML 代码的最简单方法，或者您可以说它是 Javascript 语言语法的扩展。在开始学习 React 之前，您应该对 JSX 有一个完整的了解。看看下面的代码……

  • javascript

|

const h1 = <h1>Hello Programmers</h1>;

|

当您第一次查看上述代码时，您可能会感到困惑。是Javascript吗？还是 HTML？或者是其他东西？如果您将在 HTML 文件中运行上述代码，它将不会运行，但代码包含 HTML 标签**

Hello world

**。基本上，JSX 扩展了 ECMAScript，以便类似 XML/HTML 的文本可以与 JavaScript React代码共存。从下面给出的图片和代码中理解它……

  • javascript

|

var MyComponent = React.createClass({

render :``````function () {

return``````( 

<h2>Hello Programmers!</h2>

);

}

});

ReactDOM.render(<MyComponent/>, document.getElementById(``````'content'``````));

|

HTML + JavScript = ReactJS

你应该知道的另一件事是Babel。Babel 是一个编译器，可以将 JavaScript 文件中的类似 HTML 的文本转换为标准的 JavaScript 对象。它从最新版本的 javascript 或 ECMAScript 2015+ (ES6+) 中获取功能，并将它们降低到 ES5 或常规 javascript。如果你想使用 React，请确保你的概念需要清楚 JSX 和 Babel。从这里的链接检查 Babel 如何进行转换。 

3. Javascript 和 ES6 基础

不管怎样……如果你的 javascript 基础不清楚，你就无法在 React 上做得更好。在面试过程中，这是在做出React之前学习的基本技能之一。Javascript是开发人员最容易混淆的语言之一，它会忽略可能在您的项目中造成问题的小错误，如果您不会更早注意到它。因此，请确保您首先清除了有关 javascript 的基本概念，然后再转到 ECMAScript5 和 ECMAScript6 的高级版本。下面给出了一些主题，但请确保您尽可能多地探索并构建一些项目以及深入了解 javascript。  请记住，构建 javascript 的基本基础将帮助您学习任何框架，但如果概念不清楚，您将陷入任何 javascript 框架。此外，面试官会在转到 React 之前先检查你的 javascript 基础知识。

  • 从变量、数字、布尔值、字符串开始，让你的概念清楚地了解其他非常基本的基础知识。在上面做一些小应用程序，比如计算器，看看事情是如何协同工作的。
  • 了解运算符、条件、函数、循环、javascript 关键字、数组、对象和其他基础知识。
  • 事件处理、DOM 操作以及“this”关键字在 javascript 中的工作方式完全不同（这让大多数开发人员感到困惑）。
  • 高阶函数、回调函数、箭头函数、状态（状态和 setState() 函数如何工作）范围、类和构造函数、扩展和继承、映射、减少、过滤器、承诺、模块、闭包、const、让（两者之间的区别var, let 和 const) 以及 ES5 和 ES6 的其他特性。

4.包管理器（Node+ Npm）

当您将使用 ReactJS 时，您将不得不安装许多较小的软件包。javascript 中的包包含模块所需的所有文件，模块是可以包含在 Node 项目中的 javascript 库。包包含两个东西……package.json 文件 + js 文件。要安装这些软件包，您需要一个好的安装程序，它可以帮助您轻松下载和安装软件包，而无需担心依赖关系。NPM（Node包管理器）在这里发挥作用，帮助您安装和跟踪 javascript 软件。您可以使用 NodeJs 或 Yarn 来管理这些软件包。您可以通过安装 Node.js 来安装 NPM。当你安装 Node.js 时，NPM 会自动安装。  因此，在迁移到 React 之前，您应该对 NPM（Node包管理器）注册表以及如何使用 NPM 安装包有充分的了解。NPM 注册表跟踪已提交的文件。任何人都可以提交这些文件（包或模块）。简而言之，NPM 注册表是开发人员可以去获取软件以构建软件的地方。  假设有人编写了一些非常有用的 javascript 文件。他/她认为其他人可能会使用它，因此他/她将其推送到 NPM 注册表。其他人可以从NPM Web 注册表中获取它并出于自己的目的下载它。从 GeeksforGeeks 了解更多关于NPM的信息。

5. Git 和 CLI（命令行界面）

Git（版本控制）是开发人员在 GitHub、Bitbucket 和 GitLab（代码托管平台）上存储项目时应具备的另一项必备技能。它可以帮助开发人员相互工作和协作，并允许他们跟踪和托管不同版本的项目文件。您应该充分了解 Git 和这些代码托管平台的工作原理。开发者使用 Git 的命令来跟踪你的文件的版本，所以学习如何使用所有命令，例如 push、pull、add、commit 等。还要学习合并、分支、处理合并冲突等。  您将在 CLI（命令行界面）的帮助下完成 React 中的所有操作。安装包，使用 NPM，创建一个 react 应用程序，运行 react 应用程序，还有很多事情，所以你真的需要养成使用 CLI 的习惯。