react之虚拟DOM的两种创建方式
<!DOCTYPE html>
<html>
<head>
? ? <meat charset="UTF-8">
? ? ? ? <title>1_使用jsx創(chuàng)建虛擬DOM</title>
</head>
<body>
? ? <!-- 準(zhǔn)備好一個(gè)容器 -->
? ? <div id="test"></div>
? ? <!-- 核心庫 -->
? ? <script type="text/javascript" src="../js/react.development.js"></script>
? ? <!-- react-dom,操作dom -->
? ? <script type="text/javascript" src="../js/react-dom.development.js"></script>
? ? <!-- 引入babel，jsx轉(zhuǎn)為js -->
? ? <script type="text/javascript" src="../js/babel.min.js"></script>
? ? <!-- 此處一定要寫babel -->
? ? <script type="text/babel">
? ? ? ? //1.創(chuàng)建虛擬DOM
? ? ? ? //此處一定不要寫引號(hào)，因?yàn)椴皇亲址?/p>
? ? ? ? const VDOM = <h1 id="title">Hello,React</h1>
? ? ? ? //2.渲染虛擬DOM到頁面
? ? ? ? ReactDOM.render(VDOM, document.getElementById("test"));
? ? </script>
</body>
</html>
Hello,React
總結(jié)
以上是生活随笔為你收集整理的react之虚拟DOM的两种创建方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 何谓方法之详细讲解
- 下一篇： jq之$(“p:first“)