学完本节课，我们的 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 中，作为第二个参数

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

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

妙味 React 微信讨论群

（PS：群人数过多，请加小美微信邀请入群）

相关推荐

上海《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