react中jsx笔记

react使用jsx的主要原因是在开发中可以直接把HTML结构直接写入js代码中，不要像原生js那样写重复获取DOM元素的代码，大大提高了开发效率，但是浏览器实质执行的代码还是和原生的js代码是一样的。

一、jsx语法规则

1. 定义虚拟dom时不需要写引号
2. 在html标签混写js表达式的时候，要加上{ }包裹
3. 想指定样式类的时候不要用class，要使用className
4. 内联行内样式写法

   一、直接在里面写

    <script type="text/babel">
       const VDON = (
           //双层用花括号{{}}包裹，样式属性用''号包裹，带-的样式需要把-去掉把后面的首字母大写
           <div style={{margin: '10px',boxShadow: '0 0 5px 5px pink'}}>
            </div>
           )
    </script>

   二、变量式写法把所写的样式放入变量中

    <script type="text/babel">
           const XDom = document.getElementById('root')
           const style = {
               margin: '10px',
               height: '200px',
               boxShadow: '0 0 5px 5px pink',
               display: 'inline-block'
           }
           const gitClass = 'box'
           const name = 'js'
           const array = ['Angylar', 'React', 'Vue']
           const VDON = (
               <div style={{ style }}>
                   <h1 className={gitClass}>前端{name}框架列表</h1>
                   <ul>
                       {
                           array.map((item) => {
                               return <li key={item}>{item}</li>
                           })
                       }
                   </ul>
               </div>
           )
           // 把创建的虚拟DOM渲染到页面
           ReactDOM.render(VDON, XDom)
       </script>

5. 创建的虚拟dom元素只能有一个根标签
6. 标签有大小写之分
   一、标签开头小写会找对应的html标签
   注意点：如果小写的这个标签是个不存在的标签，此时浏览器就会报错提示无法识别标签。如果要呈现React组件，请以大写字母开头。
   二、标签开头大写会找对应的组件
7. 在jsx中可以写表达式，但是不可以写函数代码
8. 所有标签必须关闭，或使用自闭合标签