30天入坑React ---------------day02 What is JSX?

这篇文章是30天React系列的一部分 。

在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！

下载免费的PDF

什么是JSX？

在Github上编辑此页面

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

在我们之前的文章中，我们研究了React是什么，并在高层讨论它是如何工作的。在本文中，我们将讨论React生态系统的一部分：ES6和JSX。

JSX / ES5 / ES6 WTF ??！

在互联网上寻找React材料的粗略搜索中，毫无疑问，您已经遇到过JSXES5和ES6 这两个术语。这些不透明的首字母缩略词可能会很快混淆。

ES5（ESECMAScript 的代表）基本上是“常规JavaScript”。JavaScript的第5次更新，ES5于2009年完成。多年来，它一直受到所有主流浏览器的支持。因此，如果你最近写过或看过任何JavaScript，很可能是ES5。

ES6是JavaScript的新版本，它增加了一些很好的语法和功能。它于2015年完成.ES6 几乎完全得到所有主流浏览器的支持。但是，在旧版本的Web浏览器逐步停止使用之前还需要一段时间。例如，Internet Explorer 11不支持ES6，但拥有约12％的浏览器市场份额。

为了获得今天ES6的好处，我们必须做一些事情才能让它在尽可能多的浏览器中运行：

1. 我们必须转换代码，以便更广泛的浏览器了解我们的JavaScript。这意味着将ES6 JavaScript转换为ES5 JavaScript。
2. 我们必须包含一个垫片或polyfill，它提供了ES6中添加的浏览器可能有或没有的附加功能。

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

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

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

虽然在以前的范例中，将JavaScript和标记包含在同一个地方被视为一种坏习惯，但事实证明，将视图与功能相结合可以直接推理视图。

要了解这意味着什么，想象一下我们有一个呈现h1HTML标记的React组件。JSX允许我们以非常类似HTML的方式声明这个元素：

class HelloWorld extends React.Component {
  render() {
    return (
      <h1 className='large'>Hello World</h1>
    );
  }
}

你好，世界

组件中的render()函数HelloWorld看起来像是返回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将如下所示：

<h1 class='large'>Hello World</h1>

class extends我们在第一个React组件中使用的语法是ES6语法。它允许我们使用熟悉的面向对象样式编写对象。在ES6中，class语法可能被翻译为：

var HelloWorld = function() {}
Object.extends(HelloWorld, React.Component)
HelloWorld.prototype.render = function() {}

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

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

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

<div>
  <img src="profile.jpg" alt="Profile photo" />
  <h1>Welcome back Ari</h1>
</div>

传递给浏览器的JavaScript如下所示：

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

首先来看React.createElement的api：

ReactElement.createElement =
function(type,config,children)

方法接受三个参数，第一个参数是组件类型，第二个参数是要传递给组件的属性，第三个参数是children。方法最终会返回一个具有以下属性的对象：

同样，虽然您可以跳过JSX并直接编写后者，但JSX语法非常适合表示嵌套的HTML元素。

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

学习REACT正确的方法

React和朋友的最新，深入，完整的指南。

下一章：

我们的第一个组件

我们的第一个组件