jsx语法规则:
1.定义虚拟dom时,不要写引号.
2.标签中混入js表达式时要用{}.
3.样式的类名指定不要用class,要用className.
4.内联样式,要style={{
key:value}}的语法写.
5.只有一个根标签.
6.标签必须闭合.
7.标签首字母:
- 若小写字母开头,则将改标签转为html中同名元素,若html中无该标签对应的同名标签,则报错.
- 若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
代码示例:
<script type ="text/babel">
const myId = 'reactId'
const myData = 'helloReact'
//创建虚拟dom
const VDOM = (
<div>
<h2 className='title' id={myId.toLowerCase()}>
<span style={{color:'#ccc',fontSize:'20px'}}>{myData}</span>
</h2>
<input type='text' />
<good>123</good>
<Good>123</Good>
</div>
)
//渲染虚拟dom到页面
ReactDom.render(VDOM,document.getElementById('test'))
</script>