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。

比如

<div className="aaa">    <span>222</span>      <span>333</span></div>

生成了

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

比如

function Comp(){    return <div className='test'>test</div>}<Comp className="test2">222</Comp>

生成

"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/