React+ Redux + React-route + Axios 实战,很适合进阶
栏目: JavaScript · 发布时间: 5年前
内容简介:前段时间学习完了React的基础,自己网上找了一些实战项目,做了几个感觉项目不是很全面,就想做一个完整的项目来提升自己的React水平.以前学习Vue的时候,就看过bailicangdu大神的该项目是饿了么, 目前开发了登录、注册、购物车、商品展示、用户信息等,算一个比较完整的项目,这个项目比较复杂,这也是我选这个项目的原因.react4 + react-redux + react-router + es6 + axios + sass + webpack
前言
前段时间学习完了React的基础,自己网上找了一些实战项目,做了几个感觉项目不是很全面,就想做一个完整的项目来提升自己的React水平.以前学习Vue的时候,就看过bailicangdu大神的 vue2-elm 项目,所以自己打算用react重写它,后端数据还是用vue2-elm,实在没有精力撸后端(感谢bailicangdu大神).
该项目是饿了么, 目前开发了登录、注册、购物车、商品展示、用户信息等,算一个比较完整的项目,这个项目比较复杂,这也是我选这个项目的原因.
技术栈
react4 + react-redux + react-router + es6 + axios + sass + webpack
项目效果
说明
觉得对你有帮助,请到 github 的 Star
支持一下,感谢
bailicangdu大神的项目地址 点这里
演示
请用Chrome调试的手机模式查看
项目结构
├── build │ ├── favicon.ico │ └── manifest.json ├── config ------------------webpack配置 │ ├── env.js │ ├── jest │ │ ├── cssTransform.js │ │ └── fileTransform.js │ ├── paths.js │ ├── webpack.config.dev.js │ ├── webpack.config.prod.js │ └── webpackDevServer.config.js ├── package-lock.json ├── package.json --------------------项目package.json ├── public --------------------出口 │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── scripts ---------------------运行的脚本 │ ├── build.js │ ├── start.js │ └── test.js ├── src ----------------------源码目录 │ ├── api ----------------------API目录 │ │ ├── api.js │ │ └── server.js │ ├── assets -----------------------资源目录 │ │ └── iconfont -------------------iconfont目录 │ ├── components -------------------公共组件 │ │ ├── alert_tip -----------------提示组件 │ │ ├── footer -------------------导航栏组件 │ │ ├── header --------------------header组件 │ │ ├── loader --------------------加载组件 │ │ └── shop_list ------------------商店列表组件 │ ├── config ----------------------项目一些配置 │ │ ├── envconfig.js --------------配置信息 │ │ └── rem.js --------------------自适应 │ ├── index.js --------------------入口 │ ├── pages --------------------页面目录 │ │ ├── food --------------------食物页面 │ │ ├── info ---------------------个人信息页面 │ │ ├── login ---------------------登录页面 │ │ ├── msite ---------------------商店页面 │ │ ├── profile --------------------主页页面 │ │ ├── set_user -------------------用户信息设置页面 │ │ ├── shop ---------------------商店详情页面 │ │ └── technology ----------------技术栈页面 │ ├── router -----------------------路由 │ │ └── index.js │ ├── serviceWorker.js --------------热加载 │ ├── store ------------------------react-redux状态管理目录 │ │ ├── store.js │ │ └── user │ ├── style ------------------------通用样式目录 │ │ ├── base.scss │ │ ├── mixin.scss │ │ └── swiper.min.css │ └── utils ------------------------公用方法 │ ├── asyncComponent.jsx -------异步加载组件 │ └── commons.js ---------------公用方法 ├── README.md ----------------------README └── tree.md --------------------------项目结构
项目地址
项目源码 点这里
欢迎提Issue, 觉得不错的话欢迎Star
以上所述就是小编给大家介绍的《React+ Redux + React-route + Axios 实战,很适合进阶》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。