JSX 是什么？

JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React. - JSX In Depth

即是说，它是一个 JS 的扩展语法，它本质是还是 JS 只是长得像 XML：

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});

你可以用 Babel 把它编译成纯粹的 JS：

var CommentBox = React.createClass({
  displayName: "CommentBox",

  render: function render() {
    return React.createElement(
      "div",
      { className: "commentBox" },
      "Hello, world! I am a CommentBox."
    );
  }
});

可以观察到，JSX 部分被替换成 React.createElement。Facebook 在 JSX 的 规范 中表示，JSX 只是一种语言扩展，并无意变成 JS 的合法语法加入 ECMAScript 规范中，只适用于各种 transpiler 做转换；而且它也不是 XML/HTML，不会遵循 XML/HTML 的规范，只是让大家感觉熟悉而已。

核心细节

不同类型的组件

JSX 中分两种类型：

1. 一种类似 HTML 结点的结构，tag 用小写：<div>
2. 自定义组件类型，tag 首字母大写：<MyComponent>

注意，第一种结构跟浏览器 DOM 并不一样，是 React 自己维护的一种 DOM。

在类 HTML 组件中：

1. 如果是 HTML 规范中定义的 tag 名（比如 div），那它的属性只能是 HTML 规范中存在的属性，否则会被忽略
   • 如果你想要带自定义数据，需要使用 data-* 形式
   • 因为 class, for 是 JS 定义的关键字，因此不能被当作属性名，需要相应替换成 className, htmlFor
2. 如果是 custom element，则任意的属性名都可以使用
   • 可以直接使用 class, for

在自定义组件中，属性名需要用 camelCase，这是为了跟 JS 的代码风格一致。

参考文档：

1. JSX in Depth - React
2. DOM Elements - React
3. JSX Specification