React 学习笔记（5）：jsx 语法规则与练习

jsx 语法规则：

<script type="text/babel" >
	const myId = 'aTgUiGu'
	const myData = 'HeLlo,rEaCt'

	//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'))

	/* 
	jsx语法规则：
		1.定义虚拟DOM时，不要写引号。
		2.标签中混入JS表达式时要用{}。
		3.样式的类名指定不要用class，要用className。
		4.内联样式，要用style={{key:value}}的形式去写。
		5.只有一个根标签
		6.标签必须闭合
		7.标签首字母
			(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
			(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

	 */
</script>

小练习：

<script type="text/babel" >
	//模拟一些数据
	const data = ['Angular','React','Vue']
	//1.创建虚拟DOM
	const VDOM = (
		<div>
			<h1>前端js框架列表</h1>
			三种写法效果等价
			<ul>
				{
					data.map((item,index)=>{
						return <li key={index}>{item}</li>
					})
				}
			</ul>
			<ul>
				{
					[
						<li key={0}>Angular</li>,
						<li key={1}>React</li>,
						<li key={2}>Vue</li>
					]
				}
			</ul>
			<ul>
				<li key={0}>Angular</li>
				<li key={1}>React</li>
				<li key={2}>Vue</li>
			</ul>
		</div>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>