jsx
1.全称：javascript xml
2.react定义的一种类似于xml的js扩展语法：js+XML
3.本质是react.createElement(component,props,…children)方法的语法糖
4.作用：用来简化创建虚拟DOM
5.写法：var ele =

hello jsx!

语法：

1.标签中混入JS表达式时要使用{} 就是读取变量用{}
const myId = ‘aTguiGu’
const myData = ‘Hello,React88888888’
const VDOM = (

{myData}

        </h2>
    )

2.写入样式：

const VDOM = (

{myData}

        </h2>
    )

结果：

效果出来了 但是会有一个报错：

意思是 class属性无效 是不是想用className。
所以应该这么写：
const VDOM = (

{myData}

        </h2>
    )

3.给span写个内联样式 内联样式要用style={{key:value}} key为小驼峰
const VDOM = (

{myData}

        </h2>
    )

直接报错：

意思是style属性不能写成字符串。同时给了个举例子：style={{marginRight:spacing+‘em’}}
正确的写法：
const VDOM = (

<span style={{color:‘white’,fontSize:‘20px’}}>{myData}

        </h2>
    )

4.虚拟DOM中只能由一个跟标签
加了一个input，
直接报错：

正确写法：
const VDOM = (

<span style={{ color: ‘white’, fontSize: ‘20px’ }}>{myData}

    )

5.标签必须闭合
这个写法是错的 没有闭合

6.jsx语法能写哪些标签：
如此写法：
const VDOM = (

<span style={{ color: ‘white’, fontSize: ‘20px’ }}>{myData}

    )
   能出来666 但是结果报错了

这个错误是说 浏览器不认识good标签 ，你是不是想渲染一个组件，那么首字母用大写。
安排:
const VDOM = (

<span style={{ color: ‘white’, fontSize: ‘20px’ }}>{myData}

    )

啥也不是有报错了 没有定义。确实没有定义哈
如果标签首字母是小写的，就会被对应转化为html标签如h1 如果不能转化为html标签的 报错 如good
如果标签首字母是大写的，react就去渲染对应的组件，若组件没有定义，则报错没有定义
完整代码：