快速用上React, 準(zhǔn)備容器，加載必要的JS，創(chuàng)建虛擬DOM，進(jìn)行渲染
<!-- 準(zhǔn)備好一個(gè) "容器" 用來(lái)放React的東西-->
<div id="test"></div>
<!-- 引入react核心庫(kù) 全局多一個(gè)對(duì)象React -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom, 用于支持react操作DOM 全局又多一個(gè)對(duì)象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"> //此處一定要寫(xiě)babel， 不寫(xiě)默認(rèn)是JS
//text/babel : 表示這里面寫(xiě)的不是JS，而是JSX，靠babel來(lái)翻譯JSX(只是比JS多了幾條語(yǔ)法, 當(dāng)然JS依然可以寫(xiě))
//1. 創(chuàng)建虛擬DOM
const VDOM = <h1>Hello,React</h1>
/*此處一定不要寫(xiě)引號(hào)，因?yàn)椴皇亲址?/
// JSX是創(chuàng)建原生JS虛擬DOM的語(yǔ)法糖
//2. 渲染虛擬DOM到頁(yè)面
// 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類(lèi)型的對(duì)象(一般對(duì)象)
// 2, 虛擬DOM比較輕(屬性,API少)，真實(shí)DOM比較重，因?yàn)樘摂MDOM是React內(nèi)部在用，無(wú)需真實(shí)DOM上那么多的屬性
// 通過(guò)控制臺(tái)輸出,debugger;暫停， 鼠標(biāo)放到變量上可以看到虛擬與真實(shí)DOM效果
// 3, 虛擬DOM最終會(huì)被React轉(zhuǎn)化為真實(shí)DOM,呈現(xiàn)在頁(yè)面上