共计 2288 个字符，预计需要花费 6 分钟才能阅读完成。
前言
前段时间学习完了 React 的基础, 自己网上找了一些实战项目, 做了几个感觉项目不是很全面, 就想做一个完整的项目来提升自己的 React 水平. 以前学习 Vue 的时候, 就看过 bailicangdu 大神的 vue2-elm 项目, 所以自己打算用 react 重写它, 后端数据还是用 vue2-elm, 实在没有精力撸后端 (感谢 bailicangdu 大神). 该项目是饿了么, 目前开发了登录、注册、购物车、商品展示、用户信息等, 算一个比较完整的项目, 这个项目比较复杂, 这也是我选这个项目的原因.
技术栈
react4 + react-redux + react-router + es6 + axios + sass + webpack
项目效果
说明
觉得对你有帮助, 请到 github 的 Star 支持一下, 感谢 bailicangdu 大神的项目地址点这里
演示
demo
请用 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
