react实质：JSX怎样转化为javascript

react中基础都运用JSX来开辟，但JSX实际上是Javascript的一种语法糖。

什么是语法糖？

语法糖就是供应了一种全新的体式格局誊写代码，然则其完成道理与之前的写法雷同。
语法糖可以说是广泛存在于种种计算机代码中，包含C言语中的a[i]实在就是*a+i的语法糖。而本日关于我们来讲，a[i]实在已很广泛和常用了，所以也没有人提这是语法糖这回事了。因为最终来讲，一切言语都是汇编言语的语法糖：）

简单说，JSX是一种更轻便誊写Javascript的体式格局
因为DOM构造被我们写到了Javascript文件里，由Javascript来天生DOM构造
假如一向运用Javascript来写DOM构造，那末render函数里就是一堆React.createElement
如许既不雅观也不实用。

然则我们必需晓得，JSX实质上就是Javascript
在编译的时刻，会由babel将JSX转化为Javascript。

比方

天生了

"use strict";
React.createElement("div", {
className: "#"
}, React.createElement("span", null, "222"), React.createElement("span", null, "333"));

比方

function Comp(){
return

天生

"use strict";
function Comp() {
return React.createElement("div", {
className: "test"
}, "test");
}
React.createElement(Comp, {
className: "test2"
}, "222");

相识JSX的实质，只需要记着：JSX实质就是Javascript

附录

babel供应的一个在线转换JSX为Javascript的地点
https://babeljs.io/repl/