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

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

1. HTMLCSS

每个前端开发人员都从 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

|


 |

当您第一次查看上述代码时,您可能会感到困惑。是Javascript吗?还是 HTML?或者是其他东西?如果您将在 HTML 文件中运行上述代码,它将不会运行,但代码包含 HTML 标签**<h1>Hello world</h1>**。基本上,JSX 扩展了 ECMAScript,以便类似 XML/HTML 的文本可以与 JavaScript React代码共存。从下面给出的图片和代码中理解它......

*   javascript

| 

varMyComponent = React.createClass({```


return```


);```


});```

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 的习惯。