码迷,mamicode.com
首页 > Web开发 > 详细

03_JSX理解和使用

时间:2019-04-13 23:56:23      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:span   utf-8   body   charset   lower   dev   char   meta   deb   

<!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>

 

03_JSX理解和使用

标签:span   utf-8   body   charset   lower   dev   char   meta   deb   

原文地址:https://www.cnblogs.com/zhanzhuang/p/10703330.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!