React+ Redux + React-route + Axios 實戰,很適合進階

前言

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