<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_JSX</title>
</head>
<body>
    <div id="test1"></div>
    <div id="test2"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/javascript">
        const msg = 'I Like You!';
        const myId = 'Atguigu';
        // 1. 创建虚拟dom   本质创建
        const vDom1 = React.createElement('h2', {id: myId.toLowerCase()}, msg.toUpperCase());
        // debugger
        // 2. 渲染虚拟dom
        ReactDOM.render(vDom1, document.getElementById('test1'));
    </script>

    <script type="text/babel">
        //1.创建虚拟dom     JSX语法创建,运行时会转换成上面的形式
        const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>;
        // debugger
        /*虚拟dom渲染后会转换成真实的dom，虚拟dom中的h3与真实dom中的h3是一一对应的*/
        //2.渲染虚拟dom
        ReactDOM.render(vDom2, document.getElementById('test2'));
    </script>
</body>
</html>

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。