代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx的小练习</title>
</head>
<body>

<div id="test">

</div>

<!-- 引入React核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入React-dom，用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将JSX转化为JS -->
<script src="../js/babel.min.js"></script>

<script type="text/babel">

    /**
     * 注意一定区分：js语句【代码】与js【表达式】
     * 1.表达式会产生一个值，可以放在任何一个需要值的地方
     * 下面这些都是表达式
     *  (1) a
     *  (2) a+b
     *  (3) demo(1)
     *  (4) arr.map()
     *  (5) function test() {}
     *
     * 2.语句（代码）：
     * 下面这些都是语句
     * (1) if(){}
     * (2) for(){}
     * (3) switch(){case:xxx}
     */

    //模拟一些数据
    const data = ['Angular', 'React', 'Vue'];
    const obj = {name1: "Angular", name2: "React", name3: "Vue"}

    //1.创建虚拟DOM
    const VDOM = (
        <div>
            <h1>前端js框架</h1>
            <ul>
                {
                    data.map((item,index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    );
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById("test"))
</script>

</body>
</html>

显示效果

最后修改：2021 年 06 月 05 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏