×

学习ReactJS前必须知道的5大技能

作者:Web前端之家2021.09.03来源:Web前端之家浏览:225评论:0
关键词:react
微信公众号

微信公众号

500.jpg

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

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

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

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

1. HTMLCSS

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

JSX-image1.png

你应该知道的另一件事是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 应用程序的示例。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/react20210903a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    什么机翻...

  • Web前端之家

    只是更轻便,还是有些差距的呢,小项目可以玩玩。...

  • ja124

    这个跟vue和react比,好些吗?...

  • Web前端之家

    OK,已经更新,谢谢!...

  • 韩涛博客

    韩涛博客的域名更换为www.hantaosec.com啦,请更新一下域名哈,谢谢。我还会继续链着咱们...

  • Web前端之家

    请持续关注Web前端之家。...

  • Y4K

    谢谢指导,这下背景问题解决了!...

  • Web前端之家

    要用起来才可以....

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria