定义VDOM时,不要用引号包起来
const VDOM = '<h1>hello, react</h1>'
const VDOM = <h1>hello, react</h1>
使用表达式时,需要用{}括起来
let name = 'react'
const VDOM = <h1>name</h1>
const VDOM = <h1>{name}</h1>
使用className代替class
const VDOM = <h1 class="title">hello, react</h1>
const VDOM = <h1 className="title">hello, react</h1>
内联样式需要使用对象来描述
const VDOM = <h1 style="color: white;">hello, react</h1>
const VDOM = <h1 style={{color: 'white'}}>hello, react</h1>
内联样式中的多词属性需要使用驼峰写法
const VDOM = <h1 style={{font-size: '20px'}}>hello, react</h1>
const VDOM = <h1 style={{fontSize: '20px'}}>hello, react</h1>
只允许一个根标签
const VDOM = (
<h1>hello, react</h1>
<h1>hello, react</h1>
)
const VDOM = (
<div>
<h1>hello, react</h1>
<h1>hello, react</h1>
</div>
)
标签必须闭合
const VDOM = <input type="text">
const VDOM = <input type="text" />
const VDOM = <input type="text"></input>
html标签首字母小写,自定义组件标签首字母大写
const VDOM = <goods></goods>
const VDOM2 = <Div></Div>
const VDOM = <Goods></Goods>
const VDOM2 = <div></div>
JSX 中的注释写法
const VDOM = (
<ul>
{}
<li>李四</li>
</ul>
)