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

这个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>

在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：

<div>
  <@R_406_2888@ 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应用程序。