React 技術棧實現點評電商 App Demo">React 技術棧實現點評電商 App Demo

React技術棧實現XXX電商App-Demo

項目地址： https://github.com/Nealyang/React-Fullstack-Dianping-Demo

技術棧：react、react-router4.x 、 react-redux 、 webpack3.x、 redux-saga 、 css-module 、 ES6 、babel...

在慕課網看到相關視頻，但是我等屌絲碼農真心買不起這個價位的視頻。有幸看到源代碼，但是看到代碼的我。。。也不是很茍同上面代碼中react技術棧這一套使用方式。遂自己寫了一個demo。

一同學習react、node的同學歡迎加入：

Node.js技術交流群：209530601

React技術棧：398240621

項目截圖

• 加載

• 首頁

• 詳情頁

• 城市選擇

項目運行展示(gif)

流量黨慎入

app運行展示

state樹變化

項目內容不多，就涉及到三個頁面，主要是為了學習新的知識。項目中用的redux-saga也是前天才學習的。項目的架構也是最近在各種探討研究。還求大神多指點~

項目技術總結

• react技術棧項目結構探究
• redux-saga初體驗
• 關於項目中webpack的配置說明

項目簡單說明

• 開發react-redux這一套，我個人的理解是 Redux體現的是代碼分層、職責分離的編程思想,邏輯與視圖嚴格區分。 而某網上的這一套代碼，邏輯都寫到了view組件層，組件需要關心如何獲取數據，如何處理數據，這樣的組件層是不容易復用的，Redux的使用也是殘缺的。甚至這種情況，你不用Redux，直接定義一個全局的state變量，所有組件都來直接操作它好了。

• 項目還有許多需要完善的地方，redux-saga的使用方式、項目結構、包括webpack3.x配合react的代碼優化以及react的Universal渲染甚至後端Node的代碼編寫。歡迎各路大神前來指教~

項目實現

• react熱更新

• css-module使用

• react-redux異步處理

• react-router 瀏覽器傳參、獲取

• redux-saga輔助

• 上拉加載更多

• 全局監控Loading

• ......

• Universal渲染 可參考我另一個項目webpack1.x

安裝步驟

# clone this demo 
git clone ...

# install dependencies
npm i (or yarn)

# serve with hot reload at localhost:8000
npm start

more

後續會繼續改進技術，如果有時間會寫一個 全棧的demo ，著重後端Node和mongo的使用。前端依舊使用react技術棧完成。

(^_^)/~~

文章來源：