<!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. eclipse安装、汉化、搭建安卓开发环境

    1.eclipse与jdk的位数(32bit or 64bit )要对应,否则会提示Failed to load JNI shared library.提示这一种错误据说还有另外一种原因就是Path路 ...

  2. Hive深入学习--应用场景及架构原理

    Hive背景介绍 Hive最初是Facebook为了满足对海量社交网络数据的管理和机器学习的需求而产生和发展的.互联网现在进入了大数据时代,大数据是现在互联网的趋势,而hadoop就是大数据时代里的核 ...

  3. [UE4]通过IP地址加入游戏

  4. 禅道-bug管理系统部署

    官方下载: https://www.zentao.net/framework/zentao11.2-80109.html 官方使用说明:(含安装及使用说明,很详细) https://www.zenta ...

  5. springboot+mybatis整合(单元测试，异常处理，日志管理，AOP)

    我用的事IDEA,jdk版本是1.7.新建项目的时候这个地方的选择需要注意一下,springboot版本是1.5的,否则不支持1.7的jdk pom.xml <dependency> &l ...

  6. 关于jQuery点击事件叠加问题

    先来看个例子: html: <body> <button id="btn">按钮</button> <button id="bt ...

  7. delphi EncdDecd.pas单元中Encoding方法出现#$D#$A的解决方法

    例如: s:= 'http://detail.tmall.com/item.htm?id=45545826531&abbucket=_AB-M129_B17&acm=03130.100 ...

  8. Grunt相关

    安装Grunt 在命令行输入npm install -g grunt-cli

  9. sqlserver表数据的修改

    清除表数据  truncate table  [表名称] 将表b中的一列数据,更新到表tableA  如: tableA .key tableA .value 123   124   tableB.k ...

  10. 聊天对话框（ctrl+enter发送）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...