一、jsx语法
1、定义标签必须闭合
2、标签首字母
（1）、若首字母为小写，则认定为是html标签元素，如果没有找到，则报错。
（2）、若首字母为大写，则认定为是react组件，如果没找到，则报错。
3、只能有一个根标签
4、标签中含有js表达式时，需要使用{ }来修饰
5、样式的命名需要使用className进行指定
6、内联样式用style = {{key: value}} 【两个大括号】
二、实例
<style>
.title{
background-color: orange;
width: 200px;
}
</style>
const myId = "juejin";
const myData = "hello world";
//1.创建虚拟DOM
const VDOM = (
<div>
<h2 className="title" id={myId.toLowerCase()}>
<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
</h2>
<h2 className="title" id={myId.toUpperCase()}>
<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
</h2>
<input type="text"/>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
