在进入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的基础知识
无论如何, 如果你的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应用程序的示例。
