React（二）—— JSX

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

JSX/ES5/ES6 WTF??!

在网上对 React 的搜索中，你一定已经遇到了 JSX , ES5 和 ES6这些术语。这些不透明的缩写很快就会让人混淆。

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

ES6 是 JavaScript 的一个新版本，添加了一些很好的语法和功能。2015年定稿。ES6 几乎完全得到所有主流浏览器的支持。但是，在旧版本浏览器逐步停止使用还需要一段时间。例如，IE 11 就不支持 ES6, 但拥有约12%的浏览器市场份额。

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

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

我们将在稍后的系列文章中看到如何实现这一点。

我们在本系列写的大多数代码都可以轻松转换成 ES5。在我们使用 ES6 的情况下，我们将首先介绍该功能，然后逐步介绍它。

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

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

为了看看这意味着什么，假设我们有一个 React 组件，它呈现一个 h1 HTML 标记。JSX 允许我们以一种非常类似 HTML 的方式声明这个元素：

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

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 将像如下所示：

<h1 class='large'>Hello World</h1>
复制代码

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

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

React 为我们提供了属性 className。我们在 HelloWorld 中使用它在 h1 标签上设置 large 类。还有一些其他属性，例如标签的 for 属性，React 将它转换为 htmlFor。 当我们使用它们时会看到这些。

如果我们想编写纯 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")
);
复制代码

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

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