<!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. Selector空轮询处理(转载)

    https://www.cnblogs.com/my_life/articles/5556939.html Selector空轮询处理 在NIO中通过Selector的轮询当前是否有IO事件,根据JD ...

  2. Oracle 表空间的概念

    表空间   在数据库系统中,存储空间是较为重要的资源,合理利用空间,不但能节省空间,还可以提高系统的效率和工作性能. Oracle 可以存放海量数据,所有数据都在数据文件中存储.而数据文件大小受操作系 ...

  3. jQuery对象的获取与操作方法总结

    一.文章概述: 众所周知,jQuery 是一个 JavaScript 库,包含多个可重用的函数,用来辅助我们简化javascript开发,它极大地简化了 JavaScript 编程.但是需要注意的一点 ...

  4. XHR HTTP 请求 get post请求解决方案

    XHR请求的 测试方式, postman 64位下载地址: http://www.downza.cn/download?file=2017%2F01%2FPostmanwin64493.zip& ...

  5. [UE4]位与字节

    位 1.bit,比特 2.一个位可以表示两个值,0或者1(一个位只能表示0或者1,并不是能同时表示0和1). 3.一个位为什么只能是2个值,而不能是3个值呢?这是由于技术因素造成的,在硬件中,如果用一 ...

  6. Could not determine own NN ID in namespace 'mycluster'

    执行hdfs namenode -bootstrapStandby的时候报错如下 19/03/24 18:00:48 ERROR namenode.NameNode: Failed to start ...

  7. angular4+中的数据绑定

    1,基本的属性绑定,下面的两种形式是一样的 2.dom属性和html属性 3.两者关系的进一步总结 4.dom属性绑定 5.html属性绑定

  8. Unable to load the plugin type

    crm 2016 post update 异步执行 1 我们自定义文件是发布在GAC的,所以先注册GAC 2 更新注册插件 3 重启IIS ,异步服务

  9. BCGcontrolBar(八) Ribbon图标变换

    点击前 点击后 CBCGPRibbonButton *pRibbonBtn=NULL; pRibbonBtn=DYNAMIC_DOWNCAST(CBCGPRibbonButton,m_pFrame-& ...

  10. C#窗体嵌入SetParent的用法

    模块化的开发,将模块合并到一起的时候,遇到了Mdi不能添加到其它窗口下的问题. 分两种情况: 将mdi窗口A设成普通窗口B的子控件,需要将A的TopLevel设置成false,但是Mdi窗口的TopL ...