<!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. 服务网关zuul之五：熔断

    路由熔断 当我们的后端服务出现异常的时候,我们不希望将异常抛出给最外层,期望服务可以自动进行一降级.Zuul给我们提供了这样的支持.当某个服务出现异常时,直接返回我们预设的信息. 如果没有配置fall ...

  2. 学习笔记之Nginx

    NGINX | High Performance Load Balancer, Web Server, & Reverse Proxy https://www.nginx.com/ flawl ...

  3. 事件之Touch 事件的分发和消费机制

    Android 中与 Touch 事件相关的方法包括:dispatchTouchEvent(MotionEvent ev).onInterceptTouchEvent(MotionEvent ev). ...

  4. vue todolist 封装localstorage

    //封装操作localstorage本地存储的方法 模块化的文件 // nodejs 基础 var storage={ set(key,value){ localStorage.setItem(key ...

  5. Css学习(2)

    1 标签分类(显示方式) 块元素 典型代表,Div,h1-h6,p,ul,li 特点: ★独占一行 ★可以设置宽高 ★ 嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致. 行内元素 ...

  6. C# 公共类

    https://github.com/Jimmey-Jiang/Common.Utility/tree/master/Utility%E5%9F%BA%E7%A1%80%E7%B1%BB%E5%A4% ...

  7. Centos 6.5(64位) vim 8.0 安装

    转自:https://blog.csdn.net/sdoyuxuan/article/details/78825912 1 先得安装nurses库 yum list | grep "ncur ...

  8. http note

    http 多媒体传输协议 HyperText Transfer Protocol 超文本传输协议 https Hyper Text Transfer Protocol over Secure Sock ...

  9. IDEA非sbt下spark开发

    创建非sbt的scala项目 引入spark的jar包 File->Project Structure->Libararies引用spark-assembly-1.5.2-hadoop2. ...

  10. Android之socket多线程

    一.添加权限 <uses-permission android:name="android.permission.INTERNET" /> 二.输入输出流 客户端和服务 ...