前端框架react----实战店铺评价界面

目录

前言

一、创建脚手架

二、业务分析

三、开始编写

1、脚手架框架修改

2、Header组件的内容

3、OrderItem组件内容

4、OrdeList组件内容

5、App组件内容

6、index.js内容

 四、最终结果

---

前言

学习react已经有一段时间了，我们现在来用react官方的脚手架来实现一个店铺的评价界面，首先来看看我们的最终实现效果：

 界面功能：点击评价，打开评价框；

                  输入内容，打几颗星星；

                 可以提交与取消，提交完评价变成灰色已评价。

技术工具：

                react的官方脚手架、vs-Code、浏览器。

一、创建脚手架

这想必大家都很熟悉了，主要用到一条命令

npx create-react-app my-app

用vs打开一个文件夹，我打开的是我在桌面创建的react案例文件夹。

然后打开vs里面的终端，在你当前目录下，运行npx create-react-app my-app。

这时候就会创建一个名为my-app的脚手架了，创建完成你会看到这个界面：

 我们先来运行一下这个脚手架，看看效果：

进入项目：cd my-app

启动项目：npm start或者yarn start 需要安装

效果如下：

二、业务分析

现在我们分析一下我们的界面，我们应该如何更好地使用这个脚手架。

上面是一个头部“我产下的企业”，界面中是一个店铺列表，列表中的一条店铺也可以作为一个单独的组件。

三、开始编写

1、脚手架框架修改

（1）首先修改一下index.js为这样，删除一些用不到的代码：

删除App.js部分代码：

（2）然后在src下面创建一个文件夹components，用来放我们的组件，

在components分别创建文件夹，App、Header、OrderItem、OrderList文件夹，并且在文件夹下面都创建index.js与style.css两个文件。

将外层的App.css、App.js、App.test剪贴到App文件夹中，删除App.test，因为用不到。然后将App.js改名为index.js；App.css改名为style.css；因为这样可以方便引用。注意引用路径需要改变！！！

（3）在public文件下创建一个mock文件夹，然后创建orders.json文件里面数据就是保存我们的店铺信息，因为我们是模仿服务器，并不是真正有服务支持我们的数据来源，所以高度模仿一个，在public放置一些静态文件：

下面是我编写的文件，名字都是我的损友们哈哈哈哈。

[{"id":1,
    "product":"大嘴烧烤",
    "picture":"https://img2.baidu.com/it/u=3545609094,467381486&fm=26&fmt=auto&gp=0.jpg",
    "shop":"每天来点小烧烤",
    "price":68,
    "ifCommented": true
},
{
    "id":2,
    "product":"马达地锅鸡",
    "picture":"https://img1.baidu.com/it/u=3398303349,1242866015&fm=26&fmt=auto&gp=0.jpg",
    "shop":"贴个膜",
    "price":58,
    "ifCommented": true
},
{
    "id":3,
    "product":"天宇网咖",
    "picture":"https://img2.baidu.com/it/u=3150413600,2901327889&fm=15&fmt=auto&gp=0.jpg",
    "shop":"来桶泡面",
    "price":88,
    "ifCommented": false
},
{
    "id":4,
    "product":"昊宇女仆会所",
    "picture":"https://img1.baidu.com/it/u=500365298,1500855368&fm=26&fmt=auto&gp=0.jpg",
    "shop":"这个好",
    "price":288,
    "ifCommented": false
},
{
    "id":5,
    "product":"阿硕医学院",
    "picture":"https://img1.baidu.com/it/u=3849975142,3987691507&fm=26&fmt=auto&gp=0.jpg",
    "shop":"有病就来看",
    "price":1888,
    "ifCommented": true
},
{
    "id":6,
    "product":"帅印心理咨询",
    "picture":"https://img0.baidu.com/it/u=212011660,3241595708&fm=11&fmt=auto&gp=0.jpg",
    "shop":"心里指定带点病",
    "price":48.8,
    "ifCommented": false
}]

（4）我们可以安装一些快捷插件

Reactjs code snippets，快捷创建组件基本内容

 Prettier - Code formatter代码格式化插件

 

2、Header组件的内容

这个组件比较好理解，就是目标界面上面的部分，css代码也在旁边，大家肯定看得懂。

 这是我们完成的头部组件，但是还没有引用组件，需要在App文件下的index.js中引用组件。

3、OrderItem组件内容

这个组件就比较复杂了，我们来分析一下：

（1）首先在index.js里面输入rcc快捷键创建一个框架，并且把名字改为OrderItem；

 

（2）在render中把框架搭建出来，根据我们的界面，我们一条店铺信息包含什么呢？

 是不是这几个盒子，那我们先来创建盒子，并且盒子给上命名，这里我们使用css的BEM命名规范：

 （3）你会发现，里面用的JSX的语法，但是这个些参数都没定义，于是我们在要给一个初始的定义：

现在类下面定义一个构造函数，里面定义一些初始的状态，用来判断店铺评价时候状态发生改变，比如评价完成后，评价按钮变成已评价

 盒子定义好传入了值，我们要得到这些值怎么办，props可以让我们得到这些值，

 （4）接下来写提交评论的界面：

 我们这次选择写在这个组件中，其实可以单独写一个组件，但是会有其它问题需要注意：

首先我们写文本框和提交取消按钮：

 我们直接写成一个方法，然后再进行调用；

接下来写星星：

 这里面我们构建一个数组，用来比较我们点击星星的时候，可以几个星星改变颜色，剩下的不改变颜色。

（5）上面的代码中我们在按钮的地方引入了很多的方法，为了实现我们的交互，下面在写这些方法：

 （6）下面就是整个代码，加上样式代码：

 

4、OrdeList组件内容

下面我们来看列表组件的内容：

（1）我们在构造函数中设置状态；

（2）我们在组件挂载前获取到店铺数据，用模仿服务器的方法fetch；

（3）在render中返回数据并且传入组件OrderItem中；

（4）写一个方法，获取改变状态需要的初始状态，然后修改为新的状态。

（5）下面是完整的代码

5、App组件内容

挂载组件

 

6、index.js内容

渲染内容到浏览器

 四、最终结果

运行代码npm start;