关于JSX

JSX 是一个 JavaScript 的语法扩展，可以很好的描述 UI 应该呈现出其应有交互的本质形式。JSX 将模板语言与 JavaScript 的全部功能进行了融合，在 JavaScript 代码中融入 UI，将会在视觉上提供辅助作用，并且使 React 显示更多错误和警告信息。

在 JSX 语法中可以在大括号中放置任何有效的 JavaScript 表达式。然而在 JSX 中的 UI 模板也是一个表达式。如以下示例。

const name = 'Jack';
const element = <h1>Hello, {name}</h1>;

引号用来在 JSX 中为属性指定字符串字面量，用大括号为属性指定一个表达式，同一属性中只能选择引号和大括号中的一种，不可同时使用。JSX 中属性使用驼峰命名法来书写，而不是像 HTML 中使用小写。

const element = <img src={user.avatar} tabIndex="0" />;

JSX 的 UI 模板元素中可以包含其他子元素，子元素可以是 HTML 标签或者其他组件。

const element = (
  <div>
    <h1>User</h1>
    <Person name="Jack" />
  </div>
);

借助 Babel，JSX 将会被转译成对于 React.createElement() 函数的调用。