一、什么是JSX语法
在js中直接使用html标签，而不是以字符串的形式使用html标签的语法称为JSX语法
二、JSX语法在react中的使用
1. 使用JSX语法的文件需要引入React对象
2. 使用自己的组件时，标签要大写，比如：
在index.js中
```javscript
...
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))
不能改成：
...
import app from './App'
ReactDOM.render(<app />, document.getElementById('root'))
3. App.js导出的标签只能有一个容器，不能是多个容器，比如：
render() {
return {
<div></div>
<ul></ul>
}
}
上面代码会报错是因为导出了两个容器，div，ul
可以改成：
render() {
return {
<div>
<div></div>
<ul></ul>
</div>
}
}
4. jsx注释
<Fragment>
{
// Fragment标签是一个react组件，需要通过import {Fragment} from 'react'导入才能使用
}
</Fragment>
5. jsx语法中js和html标签的冲突
-
class
如果要声明标签中class属性，那么需要使用className代替 -
for
如果要声明label标签中的for属性，那么需要使用htmlFor代替
这里htmlFor绑定了input的Id的话，点击Label会自动聚焦
6. 不对输入的html标签转义
react默认会对html标签进行转义，如果不想它转义，可以这样写：
<li dangerouslySetInnerHTML={{__html:curValue}}></li>
就是在用于显示数据的标签中使用dangerouslySetInnerHTML={{__html:value}}的形式
三、jsx语法生成虚拟DOM的过程
参数列表： 标签名，属性，内容
React.createElement('div', {}, 'content') // 生成虚拟DOM
jsx -> createElement -> 虚拟DOM（js对象）-> 真实DOM
