jsx语法规则

总结

1.定义虚拟DOM时，不要写引号。

2.标签中混入JS表达式时要用{}。

3.样式的类名指定不要用 class ，要用 className。

4.内联样式，要用 style={{key:value}} 的形式去写。

5.只有一个根标签

6.标签必须闭合

7.标签首字母

(1).若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错。

(2).若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错。

案例

1. 准备好一个容器

<div id="test"></div>

2. 准备数据

const myId = '1'
const myData = 'Hello World'

3.创建虚拟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>
		)

4. 将虚拟DOM渲染到页面中

ReactDOM.render(VDOM,document.getElementById('test'))