<!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. Levenberg-Marquardt 的 MATLAB 代码

    参考资料: 1,<精通MATLAB最优化计算(第2版)>作者:龚纯 等 的 第9章 9.3 小节 L-M 法 2,<数值分析> 作者:Timothy Sauer 的 第4章 4 ...

  2. sql server 日志传送问题整理

    1.数据库备用/只读状态恢复为联机 SELECT DATABASEPROPERTYEX('ty_szum_oa_v2_bak','IsInStandBy') restore database ty_s ...

  3. 有关cookies与session的详细信息

    COOKIES与SESSION 详细信息参考:https://www.cnblogs.com/linguoguo/p/5106618.html 会话(Session)跟踪是Web程序中常用的技术,用来 ...

  4. cdlinux写入u盘启动的制作教程

    制作方法如下:(摘自于https://blog.csdn.net/suquan629/article/details/52996792) 1.所需要的工具软件: cdlinux0.9.7.isoUlt ...

  5. nodejs学习笔记<七> 路由

    // 引用模块(与C#中命名空间,Java中引用包同理) var http = require("http"); var path = require("path&quo ...

  6. ROS Industrial 简介

    ROS_I means ROS Industrial ROS_I 解决了哪些问题: 1. 让自动化可以互相协作,操纵器.末端执行器.感知系统/传感器,移动平台,周边设备,都可只用一种语言(ROS me ...

  7. ROS学习手记 - 6 使用ROS中的工具:rqt_console & roslaunch & rosed

    http://wiki.ros.org/ROS/Tutorials/UsingRqtconsoleRoslaunch Using rqt_console and roslaunch This tuto ...

  8. 【HQL】常用函数

    CONCAT_WS(separator, str1, str2,...) 多列转1列,以分割符分割 使用场景: 1.多列在一列显示: 2.多列转多行作为辅助,结合split和explode使用 SEL ...

  9. code signing is required for product type 'Application' in SDK 'iOS 8.1' 错误分析以及解决方案

    在真机测试的时候往往会突然出现这样一个错误,code signing is required for product type 'Application' in SDK 'iOS 7.0'  ,就是说 ...

  10. uva-11129-分治

    题意:对于一个0-(N-1)的等差数列,求其中一个排列Q,使得任意0<=i,j,k<n 时,ai,aj,ak不是等差数列. 解法:考虑0-(N-1)这个等差数列,假设公差为K,那么数列如下 ...