【全栈React】第2天: 什么是 JSX?

Eirunye 发布于2019-08-20 18:29 / 1303人阅读

摘要：代表基本上是常规。第次更新，在年完成。几乎完全支持所有主要的浏览器。但这将是一段时间，直到较旧版本的浏览器逐步停止使用。这意味着将转换为。在组件的情况下，写入的将如下所示在我们在第一个作出反应组件使用的语法是语法。

本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3797
原文：https://www.fullstackreact.com/30-days-of-react/day-2/

现在我们知道React是什么，让我们来看看这个系列的其余部分将会出现的几个术语和概念。

在我们前面的文章中，我们看了一下React，并在高级别上讨论了它的工作原理。在本文中，我们将介绍React生态系统的一部分：ES6和JSX。

JSX/ES5/ES6 什么鬼东西??!

在互联网上的任何粗略的搜索寻找React材料，毫无疑问，你已经遇到了术语JSX，ES5和ES6。这些难懂的首字母缩略词可能会很快混乱。

ES5（ES 代表ECMAScript）基本上是“常规JavaScript”。第5次更新JavaScript，ES5在2009年完成。它已被所有主要浏览器支持多年。因此，如果你在最近写过或看过任何JavaScript，很可能是ES5。

ES6是一个新版本的JavaScript，添加了一些不错的语法和功能添加。它在2015年完成。ES6 几乎完全支持所有主要的浏览器。但这将是一段时间，直到较旧版本的Web浏览器逐步停止使用。例如，Internet Explorer 11不支持ES6，但是具有大约12％的浏览器市场份额。

为了获得ES6的好处今天，我们必须做一些事情，使它工作在尽可能多的浏览器，我们可以：

我们必须转换我们的代码，以便更广泛的浏览器了解我们的JavaScript。这意味着将ES6 JavaScript转换为ES5 JavaScript。

We have to include a shim or polyfill that provides additional functionality added in ES6 that a browser may or may not have.

我们必须包括一个垫片或polyfill，提供在ES6中添加的浏览器可能具有或可能没有的附加功能。

我们将在本系列的稍后部分看到我们如何做到这一点。

我们将在本系列中编写的大多数代码都可以轻松地转换为ES5。在我们使用ES6的情况下，我们将首先介绍功能，然后通过它。

我们将看到，所有的React组件都有一个render函数，它指定了React组件的HTML输出。JavaScript eXtension，或更常见的JSX，是一个React扩展，允许我们编写看起来像 HTML的JavaScript 。

尽管在以前的范例中，将JavaScript和标记包含在同一个地方被认为是一种不好的习惯，但是结果是将视图与功能相结合使得对视图的推理变得非常简单。

看看这是什么意思，想象一下，我们有一个React组件来呈现一个h1 HTML标签。JSX允许我们以非常类似于HTML的方式声明这个元素：

class Header extends React.Component {
  render() {
    return (
      Hello World
    );
  }
}

这个HelloWorld组件中的render()函数看起来像它的返回HTML，但其实这是JSX。JSX 在运行时被翻译成常规JavaScript。那个组件，翻译后，看起来像这样：

class HelloWorld extends React.Component {
  render() {
    return (
      React.createElement(
        "h1",
        {className: "large"},
        "Hello World"
      )
    );
  }
}

虽然JSX看起来像HTML，但它实际上只是一种更灵敏的方式React.createElement()来编写声明。当组件渲染时，它输出一个React元素树或该组件输出的HTML元素的虚拟表示。React然后将基于此React元素表示来确定对实际DOM所做的更改。在HelloWorld组件的情况下，React写入DOM的HTML将如下所示：

Hello World

在class extends我们在第一个作出反应组件使用的语法是ES6语法。它允许我们使用熟悉的面向对象样式编写对象。
在ES6中，class 语法可能翻译为：
var HelloWorld = function() {}
Object.extends(HelloWorld, React.Component)
HelloWorld.prototype.render = function() {}

因为JSX是JavaScript，我们不能使用JavaScript保留字。这包括class和像for。

React提供了我们的属性className。我们使用它在HelloWorld来设置我们的h1标签上的large 类。还有一些其他属性，如标签上的属性for为转换htmlFor ，因为for 也是保留字。当我们开始使用它们时，我们将看看这些。

如果我们想要编写纯JavaScript而不是依赖于JSX编译器，我们可以只写该React.createElement()函数，而不必担心抽象层。但我们喜欢JSX。它特别是更复杂的组件可读性。考虑下面的JSX：


  
  Welcome back Ari

传送到浏览器的JavaScript看起来像这样：

React.createElement("div", null, 
  React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}),
  React.createElement("h1", null, "Welcome back Ari")
);

再提一下，虽然你可以跳过JSX并直接编写后者，但JSX语法非常适合表示嵌套的HTML元素。

现在我们了解JSX，我们可以开始编写我们的第一个React组件。明天加入我们，当我们跳进我们的第一个React应用程序。

GPU云服务器云服务器全栈是什么什么是全栈全栈是什么意思全栈开发是什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84575.html

【全栈React】第13天: 重复元素

摘要：在我们的应用中添加太多的复杂度来加载外部数据之前今天我们将快速了解如何在应用中重复组件元素。出于性能原因使用虚拟尝试限制在重新视图时需要更新的元素的数量。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3826原文：https://www.fullstackreact.com/30-days-of-react/day-13/ 今...

RaoMeng 2019-08-20 18:33 评论0 收藏0
【全栈React】第5天: 数据驱动

摘要：今天，我们将把我们的组件设置为由数据驱动，访问外部数据。介绍属性允许我们以与相同的语法向组件发送数据，使用组件上的特性或属性。我们将我们的活动项目移动到我们将针对每个项目运行的项目中。本周，我们使用概念更新了由数据驱动的组件。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3821原文：https://www.fullstack...

inapt 2019-08-20 18:29 评论0 收藏0
【全栈React】第9天: 样式

摘要：我们将为组件赋值，并使用选择器来定位页面上的元素，让浏览器处理样式。的工作方式是将因此命名父样式作为子样式的样式。这通常是错误的原因，因为类通常具有通用名称，并且易于覆盖非特定类的类样式。反之，我们的样式名称需要使用驼峰命名方式。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3820原文：https://www.fullsta...

zilu 2019-08-20 18:33 评论0 收藏0
【全栈React】React 30天教程索引

摘要：今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。今天我们正在研究一种处理提出的复杂数据的方法，称为体系结构。第天部署介绍今天，我们将探讨部署我们的应用所涉及的不同部分，以便外界可以使用我们的应用。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

appetizerio 2019-08-20 18:33 评论0 收藏0
【全栈React】第1天: 什么是 React?

摘要：本文转载自众成翻译译者链接原文今天，我们从一开始就开始。让我们看看是什么，是什么让运转起来。什么是是一个用于构建用户界面的库。它是应用程序的视图层。所有应用程序的核心是组件。组件是可组合的。虚拟完全存在于内存中，并且是网络浏览器的的表示。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3765原文：https://www.ful...

ralap 2019-08-20 18:29 评论0 收藏0