<div></div>
"use strict"; React.createElement("div", null);
在左边我们声明了html的标签，他在右边会返回一个我们在react当中我们需要返回的一个对象。这就是 JSX 到 JS 的一个转换过程
我们会发现通过这种标签写的，他最终都会转换成 React.createElement 。里面的标签名，属性，内容都会通过参数给他。
<div id=‘div‘ key=‘key‘>test</div>
React.createElement("div", {
id: "div",
key: "key"
}, "test");
会把所有的属性放在第二个参数，第二个参数是个对象，都会加在这个对象里面给他。第三个参数在 React 中称为 children ，也就是标签内容
<div id=‘div‘ key=‘key‘> <span>spanTest</span> </div>
React.createElement("div", {
id: "div",
key: "key"
}, React.createElement("span", null, "spanTest"));
因为span他也是标签，所有第三个参数传内容的地方，再次将标签转换成 React.createElement 。
<div id=‘div‘ key=‘key‘> <span>spanTest</span> <span>spanTest</span> </div>
React.createElement("div", {
id: "div",
key: "key"
}, React.createElement("span", null, "spanTest"),
React.createElement("span", null, "spanTest"));
会发现第三个以后都是节点，多少个节点，后面就多少个 React.createElement 。这就是 JSX 转换成 JS 的样子。在这里我们看到第一个参数是个字符串。那么如果这个不是个标签，是个组件，他会怎么样呢？
function Comp() { return <a>123</a> } <Comp id=‘div‘ key=‘key‘> <span>spanTest</span> <span>spanTest</span> </Comp>
右边
function Comp() { return React.createElement("a", null, "123"); } React.createElement(Comp, { id: "div", key: "key" }, React.createElement("span", null, "spanTest"), React.createElement("span", null, "spanTest"));
这个时候发现就不再是字符串，而是以变量的方式传递进来。值得注意的是。在目前的babel插件里面，在转化的过程当中，会根据大小写判断。小写认为是原生的html标签，就是以字符串的形式传递，如果是大写，就认为是组件，当做变量传递
原文：https://www.cnblogs.com/wzndkj/p/11808847.html