快速用上React, 準備容器，加載必要的JS，創(chuàng)建虛擬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轉(zhuǎn)為JS -->
<script src="../js/babel.min.js"></script>
<script type="text/babel"> //此處一定要寫babel， 不寫默認是JS
//text/babel : 表示這里面寫的不是JS，而是JSX，靠babel來翻譯JSX(只是比JS多了幾條語法, 當然JS依然可以寫)
//1. 創(chuàng)建虛擬DOM
const VDOM = <h1>Hello,React</h1>
/*此處一定不要寫引號，因為不是字符串*/
// JSX是創(chuàng)建原生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);
//關(guān)于虛擬DOM
// 1， 本質(zhì)是Ojbect類型的對象(一般對象)
// 2, 虛擬DOM比較輕(屬性,API少)，真實DOM比較重，因為虛擬DOM是React內(nèi)部在用，無需真實DOM上那么多的屬性
// 通過控制臺輸出,debugger;暫停， 鼠標放到變量上可以看到虛擬與真實DOM效果
// 3, 虛擬DOM最終會被React轉(zhuǎn)化為真實DOM,呈現(xiàn)在頁面上