React小案例

最新推荐文章于 2023-01-12 10:21:37 发布

qq_38721353

最新推荐文章于 2023-01-12 10:21:37 发布

阅读量105

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_38721353/article/details/112554932

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

展示以下页面

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
    
</head>
<body>
    <div id = "root">
    </div>

    <script type="text/babel">
    /*
    一定注意区分：【js语句（代码）】与【js表达式】
        1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
            （1）a
             (2) a+b
             (3) demo(1)
             (4) arr.map()
             (5) function test(){}
        2、js语句
            if、for、switch
    */
    //模拟一些数据,给React一个数组可以直接遍历，对象会报错
    const data=['Angular','React','Vue']
    const VDOM=(
        <div>
            <h1>前端JS框架列表</h1>
            <ul>
                {data.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })
                }
            </ul>
        </div>
    )
    ReactDOM.render(VDOM,document.getElementById('root'))
    </script>
    
</body>
</html>

qq_38721353

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React小案例

展示以下页面代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/ja
复制链接

扫一扫