前言
前段時間學習完了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