快速用上React, 准备容器，加载必要的JS，创建虚拟DOM，进行渲染

     <!-- 准备好一个 "容器" 用来放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
        //text/babel : 表示这里面写的不是JS，而是JSX，靠babel来翻译JSX(只是比JS多了几条语法, 当然JS依然可以写)
        //1. 创建虚拟DOM
             const VDOM = <h1>Hello,React</h1> 
             /*此处一定不要写引号，因为不是字符串*/
            //  JSX是创建原生JS虚拟DOM的语法糖
        //2. 渲染虚拟DOM到页面
            // ReactDOM.rendor(虚拟DOM,容器)
            ReactDOM.render(VDOM,document.getElementById("test"));
            console.log("虚拟DOM",VDOM);
            const TDOM = document.getElementById("test");
            console.log(TDOM);
            debugger;
            // console.log(typeof VDOM);
            // console.log(VDOM instanceof Object);
            //关于虚拟DOM
            // 1， 本质是Ojbect类型的对象(一般对象)
            // 2,  虚拟DOM比较轻(属性,API少)，真实DOM比较重，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
            //     通过控制台输出,debugger;暂停， 鼠标放到变量上可以看到虚拟与真实DOM效果
            // 3,  虚拟DOM最终会被React转化为真实DOM,呈现在页面上