React 中JSX转换成真实DOM的过程。

React中的jsx语法会通过babel转化为js代码，以React.createElement函数形式存在，createElement函数返回一个ReactDOM.render函数，ReactElement函数返回一个虚拟节点，虚拟节点中嵌套虚拟节点，就形成了虚拟DOM，最后通过ReactDOM.render的方法转化为真实的DOM。

<div>
  <img src="avatar.png" className="profile" />
  <Hello />
</div>

//转化后
React.createElement(
  "div",
  null,
  React.createElement("img", {
    src: "avatar.png",
    className: "profile"
  }),
  React.createElement(Hello, null)   //组件的名称
);

babel转化的时候，是如何区分这是原生标签名还是组件名的。

babel在转化jsx过程中，会判断首字母的大小写，

当首字母为小写的时候，会被认为是原生DOM标签，那么createElement中的第一个参数就是一个字符串，表示标签的名称

当首字母为大写的时候，会被认为组件，那么createElement中的第一个参数就是组件的名称。如上段代码的Hello

createElement会根据传入的type进行判断：

                如果是原生标签节点，type是字符串，比如：span、div

                如果是文本节点，type就没有

                如果是函数组件，type就是函数名

                如果是类组件，type就是类组件名。

虚拟DOM汇通过ReactDOM.render()进行渲染成真实DOM