<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_JSX_DEMO</title>
</head>
<body>
    <h2>前端JS框架</h2>
    <div id="example1"></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/babel">
        /*
        * 功能:动态展示列表数据
        * 需求:将一个数据的数组转换为一个标签的数组(使用数组的map()方法)
        * */
        //1.数据
        const names = ['jQuery', 'zepto', 'angular', 'react', 'vue'];
        //2.创建虚拟dom
        const ul = (
            <ul>
                {
                    names.map((name, index) => <li key={index}>{name}</li>)             //箭头函数
                }
            </ul>
        );
        //3.渲染虚拟dom
        ReactDOM.render(ul, document.getElementById('example1'));

    </script>
</body>
</html>

04_JSX练习的更多相关文章

随机推荐

  1. 【原创】虚拟机上实现绑定固定IP扩主机容器互访

    Docker绑定固定IP/跨主机容器互访 https://blog.csdn.net/qq_34021712/article/details/75948566 服务器IP   容器分配网段   启动容 ...

  2. Zabbix 创建触发器

    #1   配置 主机名10.0.0.33 触发器 点击创建触发器 #2 #4 点击添加 #触发器添加完毕

  3. win10 php7.2 nginx 安装 imagick，适用于phpstudy

    imagick 拓展的下载地址 https://windows.php.net/downloads/pecl/releases/imagick/ 可惜的是这个地址最新版没有php7.2, 如果是7.1 ...

  4. win7运行bat文件 一闪而过 解决 必须要将生成器放在C盘等没有中文的目录里

    1.在*.bat所在的文件夹按住shift 键然后鼠标右键,选择“在此处打开命令窗口”, 2.输入bat文件名称然后回车 这样就不会自动消失(只在win7 x64 上尝试过)

  5. CAS锁相关讲解

    感谢GOOGLE强大的搜索,借此挖苦下百度,依靠百度什么都学习不到! 参考文档: http://www.blogjava.net/xylz/archive/2010/07/04/325206.html ...

  6. FileMaker Server 15 Windows 安装

    FileMaker 国外流行,国内研究的人不多.这玩意的好处是: 标准的数据库软件,同时带界面,相当于Access. 手机上安装FileMaker Go,Windows & IOS上安装 Fi ...

  7. IDEA配置打可运行jar包

    IDEA打包可以运行的jar包大体有两种方式:一种是比较方便的配置maven:一种是直接配置IDEA采用Build Artifacts打包. 配置maven打包,在pom.xml里面配置build插件 ...

  8. tips：Java中的switch的选择因子

    tips:Java中的switch的选择因子! /*  switch(){   }  */ switch的()中的判断条件能是什么类型呢? 事实上,在我们学习c++的了解中,switch的参数是一个能 ...

  9. useful tools and website

    1.https://www.processon.com/   在线流程图制作网站 2.http://www.easyicon.net/  专门下载图标的网站 3.https://www.lfd.uci ...

  10. day9笔记整理,记忆

    函数的使用:一 定义函数的三种形式 1.1 无参函数 1.2 有参函数 1.3 空函数二 调用函数的三种形式 2.1 语句形式    def foo():   print('from foo')    ...