<!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. Java-Runoob-高级教程-实例-数组：13. Java 实例 – 数组交集

    ylbtech-Java-Runoob-高级教程-实例-数组:13. Java 实例 – 数组交集 1.返回顶部 1. Java 实例 - 数组交集  Java 实例 以下实例演示了如何使用 reta ...

  2. UnicodeString基本操作(Ring3)

    // Unicode_String_Ring3.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include "Unicode ...

  3. go语言学习--channel的关闭

    在使用Go channel的时候,一个适用的原则是不要从接收端关闭channel,也不要在多个并发发送端中关闭channel.换句话说,如果sender(发送者)只是唯一的sender或者是chann ...

  4. [UE4]增加机器人

    一.新增蓝图继承自Shooter名为AIShooter.玩家角色也是继承自Shooter. 二.使用AIMoveTo追踪玩家.玩家控制的角色调用这个方法没反应. 三.关卡中添加组件NavMeshBou ...

  5. [UE4]蓝图函数库

    在任何蓝图上都可以调用“蓝图函数库”的方法

  6. SCCM2012 R2实战系列之十一：解决OSD分发Windows7 系统盘盘符为’D’问题

    在SCCM 2012 R2操作系统分发(OSD)中,大家最早做的实验可能就是分发干净的Windows7和Windows 8(或Windows8.1)了吧.但是不可面对的问题就是相同配置的任务序列(只是 ...

  7. 一行代码避免OkHttp的网络库应用被抓包

    在建立socket连接之前,OkHttp会获取系统的代理信息,如果设置代理,那么通过DNS解析其IP然后使用代理IP来建立socket连接.如果没有设置代理,那么会使用请求中的url的IP地址,来建立 ...

  8. 00001 - Linux下 环境变量/etc/profile、/etc/bashrc、~/.bashrc的区别

    ①/etc/profile: 该文件登录操作系统时,为每个用户设置环境信息,当用户第一次登录时,该文件被执行.也就是说这个文件对每个shell都有效,用于获取系统的环境信息. # /etc/profi ...

  9. MongoDB集群搭建之主从模式

    单机搭建 #创建docker持久化数据目录 [root@docker ~]# mkdir -p /root/application/program/mongodb/data/master-slaveM ...

  10. Solr游标查询提高翻页效率

    长期以来,我们一直有一个深分页问题.如果直接跳到很靠后的页数,查询速度会比较慢.这是因为Solr的需要为查询从开始遍历所有数据.直到Solr的4.7这个问题一直没有一个很好的解决方案.与最近发布的So ...