JSX 基本语法规则

JSX 全称 JavaScript XML，是React 定义的一种类似于 XML 的 JS 扩展语法：JS + XML 本质是 React.createElement(component, props, ...children) 方法的语法糖。 用于简化创建虚拟 DOM，写法：var ele = <h1>Hello JSX!</h1>。注意，它不是字符串，也不是 HTML/XML 标签。它最终产生的是一个 JS 对象。

---

基本语法规则

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

JSX 采用下面的方式创建虚拟 DOM

//1. 创建虚拟DOM
const VDOM = (
	<h2 id='atguigu'>
		<span>hello,react</span>	
	</h2>
)

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

		const myId = 'aTgUiGu'
        const myData = 'Hello,rEaCt' 

        //1. 创建虚拟DOM
        const VDOM = (
               <h2 id={myId.toLowerCase()}>
                   <span>{myData.toLowerCase()}</span>
               </h2>
        )

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

		const myId = 'aTgUiGu'
        const myData = 'Hello,rEaCt' 

        //1. 创建虚拟DOM
        const VDOM = (
               <h2 className="title" id={myId.toLowerCase()}>
                   <span>{myData.toLowerCase()}</span>
               </h2>
        )

内联样式，要使用style={{key:value}}的样式

		const myId = 'aTgUiGu'
        const myData = 'Hello,rEaCt' 

        //1. 创建虚拟DOM
        const VDOM = (
               <h2 className="title" id={myId.toLowerCase()}>
                   <span style={{color:'white', fontSize:'29px'}}>{myData.toLowerCase()}</span>
               </h2>
        )

只能有一个根标签

如果我们复制一下上面的 <h2>，会报错，这是因为只能有一个根标签，所以添加一个 <div> 将两个 <h2> 包起来。

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

标签必须闭合

如果我们添加一个文本输入框，如果写成 <input type="text"> 会报错，这是因为，JSX 里的标签必须闭合，所以，应该写成 <input type="text"/>。

        const myId = 'aTgUiGu'
        const myData = 'Hello,rEaCt' 

        //1. 创建虚拟DOM
        const VDOM = (
            <div>
                <h2 className="title" id={myId.toUpperCase()}>
                    <span style={{color:'white', fontSize:'29px'}}>{myData.toLowerCase()}</span>
                </h2>
                <input type="text"/>
            </div>
        )

标签首字母

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