react学习——02虚拟dom创建的两种方式

1、使用jsx创建虚拟DOM

javascript 复制代码
const vdom = <h1 id="title" className="red"><span>helloReact</span></h1> /*此处一定不要写引号*/
javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_使用jsx创建虚拟DOM</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
    //1.创建虚拟DOM
    const vdom = <h1 id="title" className="red"><span>helloReact</span></h1> /*此处一定不要写引号*/
    //2.渲染虚拟DOM到页面
    ReactDOM.render(vdom,document.getElementById('root'))
</script>
</body>
</html>

2、使用js创建虚拟DOM

javascript 复制代码
const vdom = React.createElement('h1',{id:'title',className:'red'},React.createElement('span',{},'hello,react'))
javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_使用js创建虚拟DOM</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript">
    //1.创建虚拟DOM
    const vdom = React.createElement('h1',{id:'title',className:'red'},React.createElement('span',{},'hello,react'))
    //2.渲染虚拟DOM到页面
    ReactDOM.render(vdom,document.getElementById('root'))
</script>
</body>
</html>

jsx创建虚拟DOM更加方便代码量更少

相关推荐
汪子熙1 分钟前
深入探析 header facets:定位与应用
前端·javascript
江城开朗的豌豆6 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
2401_8812444017 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆17 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子20 分钟前
Web开发中的文件下载
前端·javascript·面试
Green1Leaves25 分钟前
pytorch学习-11卷积神经网络(高级篇)
pytorch·学习·cnn
KaneLogger40 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
前端风云志1 小时前
JavaScript中如何遍历对象?
javascript
DKPT7 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
像风一样自由20209 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html