react学习笔记-------jsx

全称：JavaScript XML

实际为react定义的一种类似于XML的js扩展语法，本质为react.createElement()语法糖

作用：用于简化创建虚拟dom

写法：var VDOM=<h1>hellow</h1>

渲染虚拟dom到页面中真实dom容器中显示：

                ReactDOM.render(创建的虚拟dom, 页面中存放虚拟dom的真实dom节点)

***浏览器并不能直接解析JSX代码，需要通过babel转换为js代码后运行在浏览器，所以当使用jsx，script标签中需要加入type="text/babel"，声明使用babel来处理，babel就会将jsx转译成React.createElement()函数调用

jsx语法规则

        1、定义虚拟dom，不加引号

        2、标签中混入js表达式时用{}包括

        3、引用样式类名用className

        4、内联样式修饰标签样式时使用style={{color:'white',fontSize:'30px'}}  (属性与属性之间中逗号隔开，属性值用单引号包括，复杂属性名使用驼峰式命名书写)。

        5、虚拟dom只能有一个根标签

        6、标签必须闭合

        7、组件标签首字母需要大写，并且需要先声明再使用

        8、标签首字母为小写时，则会将标签转换为html中同名元素，若html中没有该标签对应的同名元素，则会报错。