react个人笔记 -- 模仿数据的传入在页面上的展示 -- jsx的小练习

最新推荐文章于 2024-11-04 09:11:09 发布

奇葩之小王子

最新推荐文章于 2024-11-04 09:11:09 发布

阅读量126

点赞数

文章标签： js reactjs html

本文链接：https://blog.csdn.net/qq_52138438/article/details/115253134

版权

萌新作者在线卑微记录自己学习React的历程

代码及笔记来自尚硅谷学习视频

本次小练习旨在模仿数据传入，然后通过jsx的方法将数据动态的展示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsx小练习</title>
</head>
<body>
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom.用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel" >

    //一定注意区分JS语句（代码）与js表达式
    //    1.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方
            //下面这些都是表达式
                // (1). a
                // (2). a+b
                // (3). demo(1)
                // (1). arr.map()
                // (5). function(){}
    //     2.语句（代码）
             //下面这些都是语句（代码）
             //   (1). if(){}
             //   (2). for(){}
             //   (3). switch(){case:}

    //模拟一些数据
    const data = ['Angular','React','Vue']

        const VDOM = (
            <div id = 'test'>
                <h1>前端js框架列表</h1>
                <ul>
                    {
                        // for (let i = 0; i < data.length; i++) {}  会报错

                        data.map((item,index)=>{
                            //map属性可以用来遍历,有很大作用
                            //箭头函数,详情可查阅ES6中的相关写法
                            return <li key = {index}> {item} </li>
                        })
                    }

                </ul>    
            </div>
        )

        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>```