# react 基础案例

叫我AddV
85 阅读4分钟

react 基础案例

前面几篇博客都说了一些 jsx 的基础知识，那么现在这篇博文主要是分享一个小的练习，主要是把前面的东西综合一下，案例很简单。

案例要求

我们这篇博客主要是写一页面，页面的内容如下面图片所示：

在这里插入图片描述

有一个标题，然后下面是三个数据，要求这三个数据不是写死的，是从变量里面获取的。

代码编写

首先很简单了，创建 html 文件然后就可以开始编码了，简单的不说了就直接贴代码了。

<!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>案例</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="app"></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>
    <!-- 引入 label，用于将 jsx 转化为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <div>
                <h1>前端JS框架列表</h1>
                <ul>
                    <li>Angular</li>
                    <li>React</li>
                    <li>Vue</li>
                </ul>
            </div>
        )
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

</body>

</html>

OK，上面的代码就实现了效果。

在这里插入图片描述

但是有一个问题就是，仔细看的话，上面的代码其实是写死的，不是从变量里面获取的，不符合我们案例的要求，那下面稍微改造一下。

值放入数组展示

首先我们需要把三个值放到变量里面，其中第一反应是放进数组，然后展示数组，OK，修改一下代码。

<!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>案例</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="app"></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>
    <!-- 引入 label，用于将 jsx 转化为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const list = ['Angular', 'React', 'Vue']
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <div>
                <h1>前端JS框架列表</h1>
                <ul>
                    {list}
                </ul>
            </div>
        )
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

</body>

</html>

好的，我把三个值放进了数组，然后直接展示出数组。

在这里插入图片描述

OK，数据都展示出来了。但是结构就没有了，不应该在一行上，所以说这样写有瑕疵，需要在优化！

渲染 li 标签结构

我们需要渲染一下 li 的标签结构，让他符合案例的要求，OK，在来一遍！

<!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>案例</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="app"></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>
    <!-- 引入 label，用于将 jsx 转化为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const list = [<li>Angular</li>, <li>React</li>, <li>Vue</li>]
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <div>
                <h1>前端JS框架列表</h1>
                <ul>
                    {list}
                </ul>
            </div>
        )
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

</body>

</html>

好的，我们有稍微改了一下，感觉没问题了！保存刷新！

在这里插入图片描述

哇哇哇！效果出来了！太牛了！尽管控制台报了点儿错误，没关系，只要我们不打开控制台就是不报错！就这么滴吧！收工！

在这里插入图片描述

遍历解决

嗯~ 上面的代码尽管效果出来了，但是有瑕疵，毕竟后台不可能 [<li>Angular</li>, <li>React</li>, <li>Vue</li>] 这样返回数据供前端使用！

但是有前端小伙伴说了：“整个公司我最大！我说返啥就返啥！”

在这里插入图片描述

稍微在优化一下吧，我们可以用 for 循环啊！是吧，直接一个 v-for 解决战斗！

在这里插入图片描述 奥，忘记了，v-for 是 vue 项目的，这是 react！

反正想法都是一样的，我们也可以使用 for 循环的思路解决！修改代码！

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const list = ['Angular', 'React', 'Vue']
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <div>
                <h1>前端JS框架列表</h1>
                <ul>
                    {
                        for(let i = 0; i< list.length; i++) {
                            
                        }
                    }
                </ul>
            </div>
        )
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

上面代码还没有写完，编辑器就开始报错了！我截个图。

在这里插入图片描述

语法完全没有错误，但是就报错了！

上面原因呢？

原因很简单！

js 表达式 和 js 语句（代码）的区别

在前面一篇博客里面说过了，要想渲染动态数据，写 js 表达式，需要把数据放进 { } 里面，上面的代码我们把 for 循环放进了 { } 里面，报错了， for 循环不是 js 表达式吗？

这里，我们一定要区分 js 表达式 和 js 语句（代码）的区别！

js 表达式

js 表达式，一个表达式会产生一个值，可以放在任何需要值的地方！

下面的都是 js 表达式：

  • a —— a就是一个变量，绝对的表达式，就算没有定义那也是 undefined。
  • a+b —— a+b 表达式，两个数相加之和，没异议。
  • getData(1) —— 一个方法，是表达式，就算最后没有返回数据，也会有一个return null 的过程。
  • arr.map() —— 这个肯定是了，返回了一个新数组。
  • function test() {} —— 一个方法，肯定返回。

简单点说，什么是表达式，就是把他赋值给一个变量，变量不至于赋值不了。

js 语句(代码)

下面的都是语句：

  • if() {} —— 这玩意儿没有返回值
  • for() {}—— 这玩意没有返回值
  • switch() {} —— 这玩意也没有返回值

所以说上面着三个没有返回值，没法用，所以不是 js 表达式，所以上边我写的 for 代码编辑器直接报错，是不允许的！

应该怎么改呢？看上面总结的，map 是个表达式，所以说我可以使用 map，看代码：

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const list = ['Angular', 'React', 'Vue']
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <div>
                <h1>前端JS框架列表</h1>
                <ul>
                    {

                        list.map((item) => {
                            return <li>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

保存刷新看效果：

在这里插入图片描述

成功了，但是控制台报错了，因为啥呢，说的很清楚，缺少 key ，这个 key 我们加上就可以了。

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 创建变量
        const list = ['Angular', 'React', 'Vue']
        // 1. 创建虚拟dom
        const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
            <div>
                <h1>前端JS框架列表</h1>
                <ul>
                    {

                        list.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

保存看效果。

在这里插入图片描述

OK，效果出来了，也没有在控制台报错，很厉害啊！

但是其实学习过 vue 的都知道，这个地方不建议使用 index 作为 key 的，为啥呢，因为不好，甚至会造成很大的错误，这里不说了，有机会在聊！

今天就到这儿，拜了个拜！

在这里插入图片描述

【本博文相关代码资料】：我是𝒆𝒅. 的 gitee

avatar
文章
阅读
粉丝