React+ Redux + React-route + Axios 實戰,很適合進階
摘要：
前言
前段時間學習完了React的基礎,自己網上找了一些實戰專案,做了幾個感覺專案不是很全面,就想做一個完整的專案來提升自己的React水平.以前學習Vue的時候,就看過bailicangdu大神的 vue2-elm 專案,所以自己打算用react重寫它,後端資料還是用vue2-elm,...
前言
前段時間學習完了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