学习ReactJS之前必须了解的5大技能 _click

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

文章图片
如果你被问到与ES6, JSX, Babel, 软件包管理器, 基本javascript或其他一些基本概念有关的问题, 你将在面试中陷入困境。我们将讨论跳到React之前应该了解的一些先决条件和一些基本概念。这些基本概念还将帮助你将来使用其他一些javascript框架和库。
1.HTML和CSS
每个前端开发人员都从HTML和CSS开始他们的旅程。因此, 在开始学习反应之前, 你应该对编写HTML和CSS有很好的命令。你应该知道如何编写语义HTML标签, 如何编写CSS选择器, 如何使用类, 如何实现CSS重置, 框模型, 如何重置为Border-Box, flexbox, 如何编写包括媒体查询在内的响应式Web应用程序以及如何使用HTML和CSS构建前端应用程序。
2. JSX(Javascript XML)和Babel
在React中, 你将与JSX看起来像HTML, 你可以将其视为HTML风格的JavaScript。这是在javascript中添加HTML代码的最简单方法, 也可以说这是Javascript语言语法的扩展。在开始学习React之前, 你应该对JSX有一个完整的了解。请看下面的代码…

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

当你第一次看上面的代码时, 可能会使你感到困惑。是Javascript吗？或HTML？或者是其他东西。如果你要在HTML文件中运行上述代码, 则该代码将不会运行, 但是该代码包含HTML标记< h1> 你好世界< / h1> 。基本上, JSX扩展了ECMAScript, 以便XML / HTML之类的文本可以与JavaScript react code一起共存。从下面的图片和代码中了解它…

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

文章图片
你应该知道的另一件事是巴别塔。 Babel是一种编译器, 可将HTML格式的JavaScript文件中的文本转换为标准JavaScript对象。它采用了最新版本的javascript或ECMAScript 2015+(ES6 +)中的功能, 并将其简化为ES5或常规javascript。如果要使用React, 请确保你对JSX和Babel的概念都需要清楚。从链接检查Babel如何进行转换这里.
3. Javascript和ES6的基础知识
【学习ReactJS之前必须了解的5大技能】无论如何, 如果你的JavaScript基本原理不清楚, 你将无法在React上变得更好。在面试中, 这是在做出反应之前必须学习的基本技能之一。
Java脚本
是开发人员最容易混淆的语言之一, 它忽略了一些小错误, 如果你不早发现, 可能会在项目中造成问题。因此, 请确保先清除有关javascript的基本概念, 然后再转到高级版本或ECMAScript5和ECMAScript6。下面提供了一些主题, 但请确保你尽可能多地探索并构建一些项目, 以获取有关javascript的深入知识。
请记住, 建立javascript的基本基础将帮助你学习任何框架, 但是如果概念不清楚, 你将陷入任何javascript框架中。另外, 面试官将在移至React之前先使用javascript检查你的基础知识。

从变量, 数字, 布尔值, 字符串开始, 并让你的概念清楚了解其他非常基本的基础知识。在其上制作一些小应用程序, 例如计算器, 以查看事物如何协同工作。
了解运算符, 条件, 函数, 循环, javascript关键字, 数组, 对象和其他基础知识。
事件处理, DOM操作以及'this'关键字在javascript中的工作方式完全不同(这使大多数开发人员感到困惑)。
高阶函数, 回调函数, 箭头函数, 状态(state和setState()函数的工作方式)范围, 类和构造函数, 扩展和继承, map, reduce, filter, promise, 模块, closures, const, let(var之间的差异) , let和const)以及ES5和ES6的其他功能。

4.包管理器(Node.js + Npm)
当你使用ReactJS时, 你将必须安装许多较小的软件包。 javascript中的软件包包含模块所需的所有文件, 而模块是可以包含在Node项目中的javascript库。软件包包含两件事：package.json文件+ js文件。要安装这些软件包, 你需要一个好的安装程序, 该程序可以帮助你轻松下载和安装软件包, 而无需担心依赖性。 NPM(节点程序包管理器)在其中扮演着重要的角色, 可帮助你安装并跟踪javascript软件。你可以使用NodeJ或Yarn来管理这些软件包。你可以通过安装Node.js来安装NPM。安装Node.js时, NPM将自动安装。
因此, 在转向React之前, 你应该对NPM(节点包管理器)注册表以及如何使用NPM安装包有扎实的了解。 NPM注册表跟踪已提交的文件。任何人都可以提交这些文件(程序包或模块)。简而言之, NPM注册中心是开发人员可以去获取软件来构建软件的地方。
假设一个人写了一些非常有用的javascript文件。他/她认为其他人可能会使用它, 因此他/她将其推送到NPM注册中心。可以从别人那里得到它
NPM Web注册表
并出于自己的目的下载。了解有关
NPM
来自lsbin的更多内容。
5. Git和CLI(命令行界面)
Git(版本控制)是开发人员必须将其项目存储在GitHub, Bitbucket和GitLab(代码托管平台)上的另一项必备技能。它可以帮助开发人员彼此合作和协作, 并允许他们跟踪和托管不同版本的项目文件。你应该对Git和这些代码托管平台的工作原理有很好的了解。开发人员使用Git命令来跟踪文件的版本, 因此学习如何使用所有命令, 例如推, 拉, 添加, 提交等。还了解合并, 分支, 处理合并冲突等信息。
你将在CLI(命令行界面)的帮助下完成React中的所有操作。使用NPM安装软件包, 创建React应用程序, 运行React应用程序以及许多其他事情, 因此你确实需要养成使用CLI的习惯。以下是使用CLI运行React应用程序的示例。