我们可以打开 babel 的 试一试 (opens new window) 页面写几个 Demo 简单看下：

从上面的代码中我们可以看到，我们写的 JSX 被编译成了 React.createElement 。

我们来简单看下 React.createElement 参数：

React.createElement(
  type,
  props,
  ...children
)

第一个参数，如果是标签的话就是标签名，如果是组件的话就是组件类或函数；

第二个参数是一个对象，如果第一个参数是元素的话，这个参数就是元素属性组成的对象；如果第一个参数是组件的话，这个对象就是组件的 props；

从第三个元素开始代表子元素；

JSX 的转换规则如下：

jsx元素类型	react.createElement 转换后	type 属性
elment元素类型	react element类型	标签字符串，例如 div
fragment类型	react element类型	symbol react.fragment类型
文本类型	字符串	无
数组类型	返回数组结构，里面元素被react.createElement转换	无
组件类型	react element类型	组件类或者组件函数本身
三元运算 / 表达式	先执行三元运算，然后按照上述规则处理	看三元运算返回结果
函数执行	先执行函数，然后按照上述规则处理	看函数执行返回结果