前言

前段時間學習完了React的基礎,自己網上找了一些實戰專案,做了幾個感覺專案不是很全面,就想做一個完整的專案來提升自己的React水平.以前學習Vue的時候,就看過bailicangdu大神的vue2-elm專案,所以自己打算用react重寫它,後端資料還是用vue2-elm,實在沒有精力擼後端(感謝bailicangdu大神) 該專案是餓了嗎, 目前開發了登入、註冊、購物車、商品展示、使用者資訊等,算一個比較完整的專案,這個專案比較複雜,這也是我選這個專案的原因

技術棧

react4 + react-redux + react-router + es6 + axios + sass + webpack

專案效果

在這裡插入圖片描

說明

覺得對你有幫助,請到github的Star支援一下,感謝 bailicangdu大神的專案地址點這裡 推薦一下我的另一個專案基於vue的UI框架(教你從零開始造輪子) 點這裡

演示

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