<!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. springboot（三 使用mybatis +springboot 完成简单的增删改查）

    先说一些注解: @EnableAutoConfiguration 可以帮助SpringBoot应用将所有符合条件的@Configuration配置都加载到当前SpringBoot创建并使用的IoC容器 ...

  2. C++根据传入的函数指针来解析需要的参数

    C++可以根据传入的函数指针,获取自己需要的参数类型,然后根据参数源中获取需要的参数,这里我用tuple作为演示,不过,只要可以根据序号,或者顺序方式等获取实参,都可以使用类似的方式实现: 先给出一个 ...

  3. dialog--not attached to window manager

    该异常表示view没有添加到窗口管理器,通常是我们dismiss对话框的时候,activity已经不存在了,建议不要在非UI线程操作对话框. [解决方案]:常发生这类Exception的情形都是,有一 ...

  4. 多款Android播放器源码集锦

    原帖地址:http://blog.csdn.net/jingwen3699/article/details/7765804/

  5. Android多线程下载

    所用知识点: 1.设置http协议字段Range “bytes=“start+”-”+end conn.addRequestProperty("Range", "byte ...

  6. Unreal Engine 4 Based Materials

    转自:http://www.52vr.com/article-862-1.html 材质参数   UE4的材质参数有4个,输入范围都是0~1之间……分别为:   Base Color Roughnes ...

  7. 移动端动态font-size

    /** * Created by shimin on 2017/8/18. *///计算dpr!function(win, lib) { var timer, doc = win.document, ...

  8. Jquery的框架解析

    最近闲的刁痛,想看看jQuery源码.但是这个源码看起来 还是挺费劲的.所以呢整理一份框架出来, 避免走入jQuery关键字的误区,我用Gys代替关键字jQuery. 下面是源码: (function ...

  9. javascript-回归原生基础

    //添加事件监听兼容函数 function addHandler(target, eventType, handler){ if(target.addEventListener){//主流浏览器 ad ...

  10. tips：Java基本数据类型大小比较

    tips:Java基本数据类型大小比较! Java语言提供了八种基本类型.六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型. ------四个整数型------ (1)byte:b ...