React jsx语法学习

目录

1. 需要准备的三个文件

2. jsx 和 js 创建虚拟DOM 的区别

3. jsx语法

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

（2）使用js定义的变量

（3）使用calss类名

（4）使用style

（5）只能有一个根标签

（6）不能出现单标签

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

---

1. 需要准备的三个文件

react.development.js  // react核心库

react-dom.development.js //react-dom库

babel.min.js //将jsx转换为js

2. jsx 和 js 创建虚拟DOM 的区别

虚拟dom 如果学过vue的话 是很好理解的 这块几乎都是采用了diff算法来使用虚拟DOM转换成真实DOM 这块不在详细描述 

使用jsx创建虚拟DOM

 使用js创建虚拟DOM

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

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

jsx语法

    const VDOM = (
        

            
我是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 = (
        

        
我是子集
        
    )

（2）使用js定义的变量

使用变量 要用 { }包起来

  let userName="奥特曼" 
    const VDOM = (
        

         
{userName}
        
    )

（3）使用calss类名

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

（4）使用style

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

const VDOM = (
   

         
奥特曼
   
        
    )

（5）只能有一个根标签

这块 和vue2.0是很相似的 

  const VDOM = (
      

         
奥特曼1
         
奥特曼2
     
    )

（6）不能出现单标签

  const VDOM = (
      

         
奥特曼
         
         
     
    )

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

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

    const VDOM = (
        

         
        
    )

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

总结一下

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

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

3. 使用class类名 要用 className 

4. 行内样式书写 

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

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

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