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


README.md

前言

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

項目介紹

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

項目演示

Demo

GitHub 地址 
在線演示

功能介紹

1. 首頁開發GitHub 地址 
Main Page

2. 城市頁面GitHub 地址 
City Page

3. 搜索結果頁GitHub 地址 
Search Page

4. 詳情頁面GitHub 地址 
Detail Page

5. 登錄頁面GitHub 地址 
Login Page

6. 收藏與購買GitHub 地址 
Buy&&Store Page

7. 個人中心頁面GitHub 地址 
User Page

8. 評價功能GitHub 地址 
Comment Page

體系&技術分析

如果沒有了解[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模仿大眾點評],這個上面的手記特別的詳細,大家務必看一下


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM