上海《React+redux 高阶实战周末班》课程记录(六)

学完本节课,我们的 React 框架学习就接近尾声了;各位小伙伴们,你们都还有收获吗?有遇到什么问题吗?可以与我们交流哦;话不多说,上着实战,文末有免费彩蛋视频

实战项目——基于react的电商实战项目

分析项目

制作页面

  • 商品展示列表
  • 商品详情展示
  • 加入购物车
  • 购物车管理
  • 下单
  • 支付
  • 地址管理
  • 订单管理

使用技术

  • react
  • npm/yarn
  • create-react-app
  • react-dom
  • react-router-dom
  • redux
  • react-redux
  • redux-thunk
  • axios/fetch

初始化项目

  • 通过脚手架创建项目:create-react-app name
  • 进入项目目录,启动项目:yarn start / npm start
  • 去除初始化项目中不需要的文件

根据需求拆分组件

我们把组件全部放到 components 目录下进行统一的管理,并且新建 css 文件夹存放 css 文件,创建 img 文件夹存放图片资源

  • Header
    • 创建一个Header.js文件
    • 导入react/css
    • 拆分组件
      • MainNav
      • SubNav
      • UserPopup
      • CartPopup
    • 导出当前组件
  • Main
    • List 产品组件列表
      • 根据后台返还数据渲染,数据存储在 state 中
      • 同一种商品,不同颜色的处理
  • detail 详情页
    • 处理页面刷新时候数据清空问题
  • CartPopus 购物车
    • 获取指定用户的购物车数据
    • 商品的数量
    • 商品数量总计
    • 商品价格总计

数据状态管理

  • redux
  • react-redux
    • 利用 createStore 方法创建一个 store
    • 为了对store 数据进行管理,我们在 src 下创建文件夹,reducers,来管理维护 store 数据
  • 把头部导航数据存储到对应的js中
  • 需要使用 store 数据的组件中,通过 react-redux 提供的 connect 导入数据,到组件的 props 下

路由绑定

下载:react-router-dom

通过 url 访问不同的组件

下载辅助工具

Redux-DevTools

  • 将以下代码放置在 creatStore 中,作为第二个参数
  1. window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

有想一起交流的小伙伴们,可以加我们的 React 技术交流群微信群哦;(拼团,年后报名实体班有优惠哦~)

妙味 React 微信讨论群

(PS:群人数过多,请加小美微信邀请入群)

妙味 React 讨论群


相关推荐

上海《React+redux 高阶实战周末班》课程视频(共 23 集,已更新完毕)

第一集:1-数据展示

第二集:2-state 切换

http://2017.miaov.com/v_show/2084


>>上海《React+redux 高阶实战周末班》课程记录(一)

>>上海《React+redux 高阶实战周末班》课程记录(二)

>>上海《React+redux 高阶实战周末班》课程记录(三)

>>上海《React+redux 高阶实战周末班》课程记录(四)

>>上海《React+redux 高阶实战周末班》课程记录(五)


课程咨询:

咨询QQ:2852509866

微信咨询:miaov-class

电话咨询:010-57269690

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

25647892 25647892

25647892

010-57658918

在线微信客服
客服1
客服在线时间

周一至周六上午:9:00~12:00

下午:13:30~18:00

妙味公众号