<body>  
<div id="a"></div>
    <!-- 引入 react核心库 -->
    <script type="text/javascript" src="./依赖包/旧版本/react.development.js"></script>
    <!-- 引入react-dom -->
    <script type="text/javascript" src="./依赖包/旧版本/react-dom.development.js"></script>
    <!-- 引入babel 用jsx转为js -->
    <script  type="text/javascript" src="./依赖包/旧版本/babel.min.js"></script>
    <script type="text/babel"> 
    const VDOM = (
        <div>我是div</div>
    )
    // 渲染DOM到页面
    eactDOM.render(VDOM,document.getElementById('a'))
    </script>
</body>

使用js创建虚拟DOM

<body>
    <div id="a"></div>
    <!-- 引入 react核心库 -->
    <script type="text/javascript" src="./依赖包/旧版本/react.development.js"></script>
    <!-- 引入react-dom -->
    <script type="text/javascript" src="./依赖包/旧版本/react-dom.development.js"></script>
    <!-- 引入babel 用jsx转为js -->
    <script> 
    // 创建虚拟dom document.createElement('标签',属性,标签内容) 
    const VDOM = React.createElement('div',id:'title','我是div') 
    // 将虚拟dom 放入页面
    ReactDOM.render(VDOM,document.querySelector('#a'))
    </script>
</body>

我们发现 jsx 和 js 都能创建虚拟DOM 为什么选中jsx呢

这时候多了一个条件如果在 div里面在加一个div呢

jsx语法

    const VDOM = (
        <div>
            <div>我是div</div>
        </div>
    )
    // 渲染DOM到页面
    ReactDOM.render(VDOM,document.body)

js语法

  const VDOM = React.createElement('div',id:'title',React.createElement('div',,'我是div')) 
    // 将虚拟dom 放入页面
    ReactDOM.render(VDOM,document.querySelector('#a'))

我们发现如果通过js去写会一直连续写下去，如果说写10个、100个呢，所以总结一下jsx的好处

jsx就像js的语法糖一样多层嵌套比较方便，但是jsx的原理就是js语法的代码只不过不用我们手动去写

3. jsx语法

（1）创建虚拟DOM不要加引号

这块算是一个注意点吧我们平常写js 定义变量都习惯性加上' ' 但是jsx不一样

 const VDOM = (
        <div>
        <div>我是子集</div>
        </div>
    )

（2）使用js定义的变量

使用变量要用包起来

  let userName="奥特曼" 
    const VDOM = (
        <div>
         <div>userName</div>
        </div>
    )

（3）使用calss类名

使用class类名名字叫 className 注意N要大写

<style>
   .title 
       color: pink;
       font-size: 50px;
    
</style>
<body>  

    <div id="a"></div>
    <!-- 引入 react核心库 -->
    <script type="text/javascript" src="./依赖包/旧版本/react.development.js"></script>
    <!-- 引入react-dom -->
    <script type="text/javascript" src="./依赖包/旧版本/react-dom.development.js"></script>
    <!-- 引入babel 用jsx转为js -->
    <script  type="text/javascript" src="./依赖包/旧版本/babel.min.js"></script>
    
    <script type="text/babel"> 
    
    let userName="奥特曼"
    // 创建虚拟DOM   多层嵌套 jsx 的好处  
    const VDOM = (
        <div>
         <div className="title">userName</div>
        </div>
    )
    // 渲染DOM到页面
    ReactDOM.render(VDOM,document.getElementById('a'))

    </script>
</body>

（4）使用style

要用属性 : '值' , 属性 : '值' 中间逗号隔开哦

const VDOM = (
   <div>
         <div style=textAlign:'center',fontWeight:'400' className="title">奥特曼
   </div>
        </div>
    )

（5）只能有一个根标签

这块和vue2.0是很相似的

  const VDOM = (
      <div>
         <div>奥特曼1</div>
         <div>奥特曼2</div>
     </div>
    )

（6）不能出现单标签

  const VDOM = (
      <div>
         <div>奥特曼</div>
         <input type="text"  />
         <input type="text"></input>
     </div>
    )

（7）小写转为html标签、首字母大写转为组件

例如我们写了一个div他会自动转换为html标签，平常我们定义组件都是起一个英文名字这时候如果我们全部小写一个浏览器不认识的名字

    const VDOM = (
        <div>
         <aoteman></aoteman>
        </div>
    )

这时候就会报错了大致意思急速 aoteman浏览器不认识如果你想使用React组件请使用首字母大写

总结一下

1.注意创建虚拟dom 不能带引号

2.使用变量js定义的变量要用变量名

3. 使用class类名要用 className

4. 行内样式书写

5. 只能有一个根标签这一点和vue很相似

6. 不能出现单标签只能有闭合标签

7. 小写名字会通过jsx 转换为真正的html标签如果是组件可以首字母大写

以上是关于React jsx语法学习的主要内容，如果未能解决你的问题，请参考以下文章

前端学习（3105）：react-hello-jsx语法规则