React --- jsx语法规则

jsx 语法规则：

1、定义虚拟dom时，不要写引号

//创建虚拟DOM
const VDOM = <h1><span>hello，react</span></h1>

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

//定义属性和标签内容
const myId = 'aTGuigu';
const myData = 'hello,REacT';
//创建虚拟DOM
const VDOM = 
　(<h1 id={myId.toLowerCase()}>
   　　<span>{myData.tolowerCase}</span>
　　</h1>)

3、样式的类名指定不要用 class 要用className

.title{
width:200px;
background-color:orange;
}
const VDOM =
(<h1 className="title" id={myId.toLowerCase()}>
<span>{myData.tolowerCase}</span>
</h1>)

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

const VDOM =
(<h1 className="title" id={myId.toLowerCase()}>
<span style={{color:"white",fontSize:'29px'}}>{myData.tolowerCase}</span>
</h1>)

 5、只有一个根标签

const VDOM =
(
<div>
<h1 className="title" id={myId.toLowerCase()}>
<span style={{color:"white",fontSize:'29px'}}{myData.tolowerCase} </span>
</h1>
<input type="text"/>
</div>)

 6、标签必须闭合

7、标签首字母

1)若小写字母，则将该标签转换为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错
2)若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错