04_JSX练习

Posted 2021-02-16 zhanzhuang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了04_JSX练习相关的知识，希望对你有一定的参考价值。

<!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练习的主要内容，如果未能解决你的问题，请参考以下文章

VSCode用户代码段在jsx中不起作用

前端学习（3106）：react-hello-jsx小练习

Python练习册第 0013 题：用 Python 写一个爬图片的程序，爬这个链接里的日本妹子图片 :-)，(http://tieba.baidu.com/p/2166231880)(代码片段

03代码格式化+高亮

前端学习（3107）：react-hello-jsx小练习2