学完本节课,我们的 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 中
- 同一种商品,不同颜色的处理
- List 产品组件列表
- 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
