React---JSX的使用

一、JSX

1. 全称:  JavaScript XML
2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
3. 作用: 用来简化创建虚拟DOM

　　　　1) 写法：var ele = <h1>Hello JSX!</h1>

　　　　2) 注意1：它不是字符串, 也不是HTML/XML标签

　　　　3) 注意2：它最终产生的就是一个JS对象

　　4. 标签名任意: HTML标签或其它标签

　　5. 标签属性任意: HTML标签属性或其它

　　6. 基本语法规则

　　　　1) 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

　　　　2) 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

　　7. babel.js的作用

　　　　1) 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

　　　　2) 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

二、渲染虚拟DOM(元素)

1. 语法:  ReactDOM.render(virtualDOM, containerDOM)
2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3. 参数说明

　　　　1) 参数一: 纯js或jsx创建的虚拟dom对象

　　　　2) 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

三、JSX练习

代码（本例子是直接引入react文件实现的）：

<script type="text/babel" >
        /* 
            一定注意区分：【js语句(代码)】与【js表达式】
                    1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
                        下面这些都是表达式：
                            (1). a
                            (2). a+b
                            (3). demo(1)
                            (4). arr.map() 
                            (5). function test () {}
                    2.语句(代码)：
                        下面这些都是语句(代码)：
                            (1).if(){}
                            (2).for(){}
                            (3).switch(){case:xxxx}
     */
        //模拟一些数据
        const data = ['Angular','React','Vue']
        //1.创建虚拟DOM
        const VDOM = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    {
                        data.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

效果：