0
0

React项目 实战案例 实用推荐收藏

React项目实际开发项目简单案例，对于一些没有项目经验的同学以及之前写过但是知识点生疏的同学参考，有问题欢迎评论区留言，谢谢。

纯干货共分为四个章节项目结构的创建、页面组件划分、页面组件实现、获取服务器数据

**一、项目结构创建 **React 开发环境搭建 超详细 全面 推荐-CSDN博客

推荐使用react的脚手架创建项目，**npx create-react-app my-app **其中my-app是新建的项目名称

npm版本要高于5.2+

注意：这里如果创建项目下载文件比较慢，可以npm使用国内淘宝镜像 参考：npm国内淘宝镜像registry镜像过期-CSDN博客

my-app项目创建成功了！

现在我们用 vscode 打开项目，可以看到我们项目的整个结构。

安装配置vscode参考：vscode下载安装配置一步到位超简单-CSDN博客

我们现在用vscode打开终端 运行xiang

此时修改app.js文件内容 页面也更改成功了！

至此项目结构创建已经完成了。

**二、页面组件划分 **

1）、这里在src>新建 component文件夹 然后分别新建 三个文件夹 Header OrderItem OrderList

每个文件夹分别创建 index.js 和 style.css 文件；

2）、在component文件夹新建App文件夹，然后把之前App.css、App.js、App.test.js 文件移到刚刚新建的App文件夹下。 并把App.css改成style.css，App.js改成index.js，App.test.js暂时删除

因为有些文件名称以及位置发生变化，所以有些文件引入资源的路径和名称需要修改

运行项目正常运行，至此页面组件划分部分完成。

React基础知识 精简全面 推荐-CSDN博客文章浏览阅读596次，点赞17次，收藏12次。文章包含一些react的基本知识，进行了精简方便自己查看以及需要的同学，谢谢参考。https://blog.csdn.net/weixin_43483590/article/details/140660294?spm=1001.2014.3001.5502

**三、页面组件实现 **

项目入口文件引入 订单列表组件 OrderList 和Header组件， 并且render渲染

Header组件部分代码

OrderList组件部分 这里主要是引入了OrderItem组件 并且使用react的map 遍历data数据 渲染 OrderItem 样式部分不是重点，

现在的页面是这样的

获取订单模拟数据，public新建了mock数据，组件完成挂载的时候请求加载数据

新增订单评价功能组件 对OrderItem 组件进行优化 代码如下：

  1. import React, { Component } from 'react';
  2. import './style.css'
  4. class OrderItem extends Component {
  6.     constructor (props){
  7.         super(props);
  8.         this.state = {
  9.             editing:true,
  10.             starts:0
  11.         };
  12.     }
  14.     render() {
  15.         const { shop,product,price,picture,ifCommented} = this.props.data;
  16.         return (
  17.             <div className='orderItem'>
  18.                 <div className='orderItem__picContainer'>
  19.                     <img className='orderItem__pic' src={picture} alt='' />
  20.                 </div>
  21.                 <div className='orderItem__content'>
  22.                     <div className='orderItem__product'>{product}</div>
  23.                     <div className='orderItem__shop'>{shop}</div>
  24.                     <div className='orderItem__detail'>
  25.                          <div className='orderItem__price'>{price}</div>
  26.                          <div>
  27.                             {
  28.                                 ifCommented ?
  29.                                 (<button className='orderItem__btn orderItem__btn--grey'>已评价</button>)
  30.                                 :
  31.                                 (<button className='orderItem__btn orderItem__btn--red'>评价</button>)
  32.                             }
  33.                         </div>
  34.                     </div>
  35.                 </div>
  36.                 {this.state.editing ? this.renderEditArea():null}
  37.             </div>
  38.         );
  39.     }
  41.     
  43.     renderStarts(){
  44.         const {starts} = this.state;
  45.         return (
  46.             <div>
  47.                 {[1,2,3,4,5].map((item,index) =>{
  48.                         const light = starts >= item ? "OrderItem__start--light":"";
  49.                         return (
  50.                             <span key={index} className={light}>★</span>
  51.                         )
  52.                     }) }
  53.             </div>
  54.         )
  55.     }
  57.     renderEditArea(){
  58.         return (
  59.             <div className='orderItem_commetContainer'>
  60.                 <textarea className='orderItem_commet' />
  61.                     {this.renderStarts()}
  62.                     <button className='orderItem__btn orderItem__btn--red'>提交</button>
  63.                     <button className='orderItem__btn orderItem__btn--grey'>取消</button>
  64.             </div>
  65.         )
  66.     }
  68. }
  70. export default OrderItem;

页面效果：

四、业务功能实现

业务功能这部分主要修改了orderItem 和OrderList组件，代码如下

orderItem 部分

  1. import React, { Component } from 'react';
  2. import './style.css'
  4. class OrderItem extends Component {
  6.     constructor (props){
  7.         super(props);
  8.         this.state = {
  9.             editing:false,
  10.             comment: this.props.data.comment ||"",
  11.             stars:this.props.data.stars || "",
  12.         };
  13.     }
  15.     render() {
  16.         const { shop,product,price,picture,ifCommented} = this.props.data;
  17.         return (
  18.             <div className='orderItem'>
  19.                 <div className='orderItem__picContainer'>
  20.                     <img className='orderItem__pic' src={picture} alt='' />
  21.                 </div>
  22.                 <div className='orderItem__content'>
  23.                     <div className='orderItem__product'>{product}</div>
  24.                     <div className='orderItem__shop'>{shop}</div>
  25.                     <div className='orderItem__detail'>
  26.                          <div className='orderItem__price'>{price}</div>
  27.                          <div>
  28.                             {
  29.                                 ifCommented ?
  30.                                 (<button className='orderItem__btn orderItem__btn--grey'>已评价</button>)
  31.                                 :
  32.                                 (<button className='orderItem__btn orderItem__btn--red' onClick={this.handleOpenEditArea}>评价</button>)
  33.                             }
  34.                         </div>
  35.                     </div>
  36.                 </div>
  37.                 {this.state.editing ? this.renderEditArea():null}
  38.             </div>
  39.         );
  40.     }
  42.     
  44.     renderStarts(){
  45.         const {stars} = this.state;
  46.         return (
  47.             <div>
  48.                 {[1,2,3,4,5].map((item,index) =>{
  49.                         const lightClass = stars >= item ? "OrderItem__start--light":"";
  50.                         return (
  51.                             <span key={index} onClick={this.handleClickStars.bind(this,item)} className={"orderItem__star"+lightClass}>★</span>
  52.                         )
  53.                     }) }
  54.             </div>
  55.         )
  56.     }
  58.     renderEditArea(){
  59.         return (
  60.             <div className='orderItem_commetContainer'>
  61.                 <textarea onChange={this.handleCommentChange} value={this.state.comment} className='orderItem_commet' />
  62.                     {this.renderStarts()}
  63.                     <button onClick={this.handleSubmitComment} className='orderItem__btn orderItem__btn--red'>提交</button>
  64.                     <button onClick={this.handleCancleComment} className='orderItem__btn orderItem__btn--grey'>取消</button>
  65.             </div>
  66.         )
  67.     }
  68.     //使用es6的箭头函数 
  69.     handleOpenEditArea = () => {
  70.         this.setState({
  71.             editing:true
  72.         })
  73.     }
  74.     handleCommentChange = (e) => {
  75.         this.setState({
  76.             comment : e.target.value
  77.         })
  78.     }
  79.     handleClickStars = (stars) => {
  80.         this.setState({
  81.             stars:stars
  82.         })
  83.     }
  85.     handleCancleComment = () => {
  86.         this.setState({
  87.             editing:false,
  88.             comment: this.props.data.comment ||"",
  89.             stars: this.props.data.stars || "",
  90.         })
  91.     }
  93.     handleSubmitComment = () => {
  94.         const {id} = this.props.data;
  95.         const {comment,stars} = this.state;
  96.         this.setState({
  97.             editing:false,
  98.         })
  99.         this.props.onSubmit(id,comment,stars)
  100.     }
  102. }
  104. export default OrderItem;

OrderList 部分主要代码

  1. import React, { Component } from 'react';
  2. import OrderItem from '../OrderItem';
  4. class OrderList extends Component {
  5.     constructor(props){
  6.         super(props);
  7.         this.state = {data:[]}
  8.     }
  10.     //组件完成挂载的时候获取mock数据
  11.     componentDidMount(){
  12.         fetch('/mock/orders.json').then(res => {
  13.             if(res.ok){
  14.                 res.json().then(data => {
  15.                     this.setState({data})
  16.                 })
  17.             }
  18.         })
  19.     }
  20.     render() {
  21.         return (
  22.             <div>
  23.                 {
  24.                     this.state.data.map(item => {
  25.                         return <OrderItem key={item.id}  data={item} onSubmit={this.handleSubmit} />
  26.                     })
  27.                 }
  28.             </div>
  29.         );
  30.     }
  31.     handleSubmit = (id,comment,stars) => {
  33.         fetch("/saveComment").then(() => {
  34.            //这里获取数据后执行
  35.         })
  36.         //正常开发下，从服务器调取数据成功之后 再回调中执行 
  37.         const newData = this.state.data.map(item => {
  38.             return item.id === id ?
  39.             {
  40.                 ...item,comment,stars,ifCommented:true
  41.             }:item;
  42.         });
  43.         this.setState({
  44.             data:newData
  45.         })
  46.     }
  47. }
  49. export default OrderList;

最终实现效果 点击评价会出现评价输入框以及提交按钮，可以输入评价内容以及对应的星级，点击取消评价框不显示，点击提交之后评价按钮变成已评价并且无法点击状态。

本案例部分知识点进行详解 请参考：

标签： react.js 前端 前端框架
本文转载自: https://blog.csdn.net/weixin_43483590/article/details/140664371
版权归原作者 坚强de土豆仔 所有， 如有侵权，请联系我们删除。
登录后发布评论

“React项目 实战案例 实用推荐收藏”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。