React技術棧實現XX點評App-Demo

項目地址：github.com/Nealyang/Re…

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

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

項目截圖

• 加載
  

  

• 首頁
  

  

• 詳情頁

• 

• 城市選擇

項目運行展現(gif)

流量黨慎入

項目內容很少，就涉及到三個頁面，主要是爲了學習新的知識。項目中用的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技術棧完成。

(^_^)/~~

喜歡的朋友歡迎關注微信公衆號：前端的全站之路