2.6 JSX Represents Objects JSX代表

Babel compiles JSX down to React.createElement() calls.

Babel 把JSX编译成React.createElement()进行调用。

These two examples are identical:

下面两个例子所表达的意思是一样的：

const element = (
   <h1 className="greeting">
        Hello, world
   </h1>
);

const element = React.createElement(
   'h1',
   {className: 'greeting'},
   'Hello, world!'
);

React.createElement() performs a few checks to help you write bug-free code but essentially it creates an object like this:

React.createElement() 执行一些检查，以帮助你编写无错误的代码，但本质上它创建一个对象像这样：

// Note: this structure is simplified
const element = {
   type: 'h1',
   props: {
       className: 'greeting',
       children: 'Hello, world'
   }
};

These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.

对象被“React elements”调用。你可以认为他们是在描述你想在屏幕上看到什么东西。React阅读那些对象并且使用他们去构建DOM并保持它的更新。

We will explore rendering React elements to the DOM in the next section.

我们将在下一章节去探索渲染一个React元素变成DOM。

Tip:
We recommend searching for a "Babel" syntax scheme for your editor of choice so that both ES6 and JSX code is properly highlighted.

贴士
贴士我们建议为您选择的编辑器搜索“Babel”语法方案，以便正确突出显示ES6和JSX代码。