React源码一、认识Babel 可以通过访问Babel网站，https://babeljs.io/ 来直观感受Babe

一、认识Babel

可以通过访问Babel网站，babeljs.io/ 来直观感受Babel。

JSX 被 Babel 编译为 React.createElement 方法的调用，createElement 方法在调用后返回的就是 ReactElement，就是 virtualDOM。

JSX怎么编译呢？

<div id="div">test</div>

通过Babel转换为

use strict";

/*#__PURE__*/
React.createElement("div", {
  id: "div"
}, "test");

代码块

<div id="div" key="key">
<span>1</span>
<span>1</span>
</div>

转换为

"use strict";

/*#__PURE__*/
React.createElement("div", {
  id: "div",
  key: "key"
}, /*#__PURE__*/React.createElement("span", null, "1"), /*#__PURE__*/React.createElement("span", null, "1"));