JSX被babel编译过
JSX只是一种语法糖 是React.createElement的语法糖
（简单明了易懂）

JSX是一种语法糖

what is JSX

 BABEL编译工具

JSX(奇怪的HTML)被编译成什么？

• 它是一种语法糖，用来替代React.createElement()方法

• 这个方法返回的一个ReactElement对象，一个比较复杂的js object

ReactDOM.render方法就是将React element（比较复杂的object）渲染到真实的DOM节点上，最后呈现在页面上。

JSX

语法糖，返回ReactElement对象

JSX 编译 React.createElement()

是语法糖

ReactElement对象

• 这奇怪的HTML被编译成什么？

• BABEL在线编译工具（JSX是语法糖，会被编译成js代码）

• JSX基本原理：一种语法糖，---替代React.createElement()

• 返回的是ReactElement对象，此对象的属性比较复杂，本质上是Object

JSX基本原理：语法糖

JSX是语法糖，会被编译成js代码

jsx经过babel编译后的结果

这奇怪的HTML被编译成什么？

BABEL在线编译工具

一种语法糖，替代React.createElement()

返回的是ReactElement对象，此对象的属性比较复杂，本质上是Object

JSX，其实是一种语法糖——React.createElement()，它返回的是ReactElement对象。

BABEL转换es6为不支持es6的js

自定义component，第一个字母要大写，为了react可以识别

ReactDOM.render就是通过特定的算法，将jsx渲染到真实的节点上

总结：jsx是一种语法糖，它替代了React.createElement(0

JSX语法2

1，jsx是一种语法糖，替代React.createElement()方法。

2，这个方法返回的是ReactElement对象