jsx语法规则

jsx语法规则：

1. 定义虚拟DOM时，不要写引号
2. 标签中混入JS表达式时要用{}
3. 样式的类名指定不要用class，要用className
4. 内联样式，要用style={{key:value}}的形式去写

   .title{
        background-color: orange;
        width: 200px;
    }

    const myID='TiTlE';
    const myDtata='HeLlo,ReaCt';
    //创建虚拟DOM
    const VDOM = ( 
        <h1 id={myID.toLocaleLowerCase()} className="title">
            <span id='data' style={{color:'white',fontSize:'20px'}}>{myDtata.toLocaleLowerCase()}</span>
        </h1>
    )

5. 虚拟DOM只能有一个根标签

   错误示范：

	const myID='TiTlE';
    const myDtata='HeLlo,ReaCt';
    //创建虚拟DOM
    const VDOM = ( 
        <h1 id={myID.toLocaleLowerCase()} className="title">
            <span id='data' style={{color:'white',fontSize:'20px'}}>{myDtata.toLocaleLowerCase()}</span>
        </h1>
		<h1 id={myID.toLocaleLowerCase()+'2'} className="title">
            <span id='data2' style={{color:'white',fontSize:'20px'}}>{myDtata.toLocaleLowerCase()}</span>
        </h1>
    )

正确做法：

	const myID='TiTlE';
    const myDtata='HeLlo,ReaCt';
    //创建虚拟DOM
    const VDOM = ( 
        <div>
            <h1 id={myID.toLocaleLowerCase()} className="title">
            <span id='data' style={{color:'white',fontSize:'20px'}}>{myDtata.toLocaleLowerCase()}</span>
            </h1>
            <h1 id={myID.toLocaleLowerCase()+'2'} className="title">
                <span id='data2' style={{color:'white',fontSize:'20px'}}>{myDtata.toLocaleLowerCase()}</span>
            </h1>
        </div>
    )

6. 标签必须闭合

   错误示范：

	//创建虚拟DOM
    const VDOM = <input type="text">

正确做法：

	//创建虚拟DOM
    const VDOM = <input type="text"/>

或：

	//创建虚拟DOM
    const VDOM = <input type="text"></input>

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

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