JSX:
        1, 全称： JavaScript XML;
        2, react定义的一种类似于XML的JS扩展语法 ： JS + XML
        3, 本质是React.createElement(component,props,....children) 方法的语法糖
        4, 作用：用来创建虚拟DOM
           a. 写法： var ele = <h1>Hello JSX</h1>
           b. 注意1： 它不是字符串， 也不是HTML/XML标签
           c. 注意2： 它最终产生的就是一个JS对象
        5, 标签名任意：HTML标签或其它标签  
    JSX语法规则：
        1， 定义虚拟DOM时，不要写引号
        2， 标签中混入JS表达式时，要用{}[注意区分JS语句与JS表达式]
        3, 样式的类名指定不要用class(React关键词), 要用className
        4, 内联样式，要用style={{key:value}}的形式去写外面{},代表js,里面{}代表json
        5, 只有一个根标签
        6, 标签必须闭合
        7, 标签首字母：
            1> 若小写字母开头，则将改标签转为html中同名元素， 若html中无该标签对应的同名元素，则报错
            2> 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

区分JS语句与表达式：

 一定要注意区分：【JS语句(代码)】与【JS表达式】

        1. 表达式： 一个表达式会产生一个值， 可以放在任何一个需要值的地方

                   下面这些都是表达式：

                    1> a

                    2> a + b

                    3> arr.map()

                    4> function test(){}即使没有return , 也会返回函数本身

        2. 语句(代码):

                   下面这些都是语句(代码)

                    1> if(){}

                    2> for(){}

                    3> switch(){case:xxxx}

         key是虚拟dom标签的唯一标识, diffing算法靠key来区分不同, 是不是同一个key

实例如下：

<!-- 准备好一个 "容器" 用来放React的东西-->
     <div id="test"></div>
     <!-- 引入react核心库  全局多一个对象React -->
     <script src="../../js/react.development.js"></script>
     <!-- 引入react-dom, 用于支持react操作DOM  全局又多一个对象ReactDOM -->
     <script src="../../js/react-dom.development.js"></script>
     <!-- 引入babel, 用于将JSX转为JS -->
     <script src="../../js/babel.min.js"></script>
     <script type="text/babel"> //此处一定要写babel， 不写默认是JS
        let myId = "testDiv";
        let content = "Hello,React";
        const VDOM = (
            <div>
                <h1 id={myId} className="title" style={{color:'#fff'}}>
                    {content}
                </h1>
                <input type="text" name="" id="" />
            </div>
        )
        ReactDOM.render(VDOM,document.getElementById("test"));