React+Redux開發實戰項目【美團App】，沒你想的那麼難

README.md 前言

開始學習React的時候，在網上找了一些文章，讀了官網的一些文檔，後來覺得React上手還是蠻簡單的，  然後就在網上找了一個React實戰的練手項目，個人學完之後覺得這個項目很適合初學者或者進階的朋友  練習，在此分享跟大家

項目介紹

該項目類似與福士點評，美團等一些O2O的軟體，功能相似，但由於是練手的項目，目的在於React+Redux  的應用，所以在一些功能上會簡化，功能稍後點評，先讓大家看效果

項目示範

GitHub 地址
線上示範 功能介紹

1. 首頁開發GitHub 地址

2. 城市頁面GitHub 地址

3. 搜尋結果頁GitHub 地址

4. 詳情頁面GitHub 地址

5. 登入頁面GitHub 地址

6. 收藏與購買GitHub 地址

7. 個人中心頁面GitHub 地址

8. 評價功能GitHub 地址
體系&技術分析

如果沒有瞭解[React](http://reactjs.cn/)和[Redux](http://redux.js.org/)的初學者可以先去網上找一些資料  和部落格看一下，先入門，最好是到去看官方文檔。- React架構React提供模組開發的規範，每一個組件，每一個頁面當做一個模組Component,極大便捷了團隊的開發，同時可以很  方便做到組件的分離- redux是一個資料管理容器，可以很方便的實現組件之間的資料共用，由於React的資料流是單向的，不像Angular等其  他的雙向資料流的架構，所以React會結合Flux或者Redux來開發使用。官方的概念晦澀難懂, 理解了state, store,   action,reducer之後再看就能理解了>Redux is a predictable state container for JavaScript apps.- less 一種css的先行編譯語言。這個項目中的樣式和布局還是div+css.- 管理工具git&webpack&npm git作為代碼的託管工具，webpack作為開發的管理工具，npm包管理 - 後台類比資料KOA

總結

學完這個項目之後，相信大家會知道React+Reduce的開發的應用，和開發流程等等，同時會加深對React的理解，這也是  這個項目最大的好處。另一方面，React帶給我們組件化的開發模式，在代碼結構上非常的清晰，易於維護和擴充。相對於  利用Jquery開發最大的好處就是React的資料驅動視圖的開發方式，在效能上也有一定的提升。

但實戰項目始終是架構的運用，如果要做到代碼和架構的效能最佳化，這個項目遠遠達不到效果。同時在這個項目中，我們也  使用了企業中常用的一些效能最佳化，比如使用React官方提供的庫 **react-addons-pure-render-mixin** ，但對於一  些特定功能來講，使用這個方法並達不到很好的效果，如果需要更加深刻的理解React的架構，除了必要的文檔，其內部的  組織架構和實現方式也要瞭解，小編現在還沒有深入研究，有能力的學生可以多研究一下。

說明

 開發的流程也就是按照上面的順序開發，GitHub上面有9個分支，對應每一個功能的開發，大家可以按照順序下載代碼學習   方便初學者學習和使用，項目來源於Mooc網的React實戰項目，在此基礎上修改了一下小問題，主要代碼一致。參考MOOC網   [React模仿福士點評],這個上面的手記特別的詳細，大家務必看一下