学习ReactJS前必须知道的5大技能-工具盒子

在跳入 React之前，您是否了解足够的 javascript？

你知道如何使用 map() 方法在 javascript或 ReactJS中循环遍历数组吗？

如果您正在学习 React并且遇到了上述问题，那么您肯定在学习过程中犯了错误。毫无疑问，ReactJS是最受前端开发人员欢迎的库，并且其受欢迎程度与日俱增。在 ReactJS上运行的网站看起来很漂亮，大多数开发初学者也被 ReactJs（由 Facebook 开发）所吸引，但是许多开发人员和有经验的人犯的一个常见错误是直接跳入 ReactJS（或其他一些库和框架） ) 而不知道先决条件。如果你直接去 React，你会在学习这个库和面试时遇到很多问题。

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

1. HTML和CSS

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

2. JSX (Javascript XML) & Babel

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

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

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

var MyComponent = React.createClass({
  
   render :function () {
  
     return(  
  
       <h2>Hello Programmers!</h2>
  
     );
  
   }
  
});
  
ReactDOM.render(<MyComponent/>, document.getElementById('content'));

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

3. Javascript 和 ES6 基础

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

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

4. 包管理器（Node + Npm）

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

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

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