React+Redux开发美团App实例

零下一度

发布时间：2017-06-26 11:22:38

2643人浏览过

来源于php中文网

原创

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分钟在线高效完成平面设计，AI帮你做设计

下载

5. 登录页面GitHub 地址
Login Page

6. 收藏与购买GitHub 地址
Buy&&Store Page

7. 个人中心页面GitHub 地址
User Page

8. 评价功能GitHub 地址
Comment Page

体系&技术分析

如果没有了解[React]()和[Redux]()的初学者可以先去网上找一些资料  
和博客看一下，先入门，最好是到去看官方文档。

- 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模仿大众点评],这个上面的手记特别的详细，大家务必看一下

React Context API 中异步获取数据并初始化状态的正确实践

React 组件不重新渲染：如何正确更新数组对象状态并触发重绘

如何在 React 标签页系统中持久化组件状态并实现“冻结”渲染

React 组件未重新渲染：如何正确更新数组对象状态并触发重绘

RTK Query 与 Redux Persist 共存的正确配置方法

美团

美团app是一款吃喝玩乐一应俱全的生活服务类软件，汇集团购、美食、酒店、外卖、电影、美发、美甲、KTV等服务于一体，为用户提供非常便利且全面的服务，有需要的小伙伴快来保存下载体验吧！

下载

相关专题

微信文件过期恢复教程

本专题整合了微信文件过期恢复方法、技巧教程，阅读专题下面的文章了解更多详细内容。

2026.02.04

抖音网页版入口与视频观看指南抖音官网视频在线访问

本专题汇总了抖音网页版的入口链接、官方登录页面以及视频观看入口，帮助用户快速访问抖音网页版，提供免登录访问方式和直接进入视频播放页面的方法，确保顺利浏览和观看抖音视频。

2026.02.04

学习通网页版入口与在线学习指南学习通官网登录与使用方法

本专题详细汇总了学习通网页版入口与登录方法，提供学习通官方网页端入口、学生登录平台、网页版使用指南等内容，帮助用户快速稳定地登录学习通官网，顺利进入学习平台，提升学习效率和体验。

2026.02.04

Python Web 框架 Django 深度开发

本专题系统讲解 Python Django 框架的核心功能与进阶开发技巧，包括 Django 项目结构、数据库模型与迁移、视图与模板渲染、表单与认证管理、RESTful API 开发、Django 中间件与缓存优化、部署与性能调优。通过实战案例，帮助学习者掌握使用 Django 快速构建功能全面的 Web 应用与全栈开发能力。

2026.02.04

Java 流式处理与 Apache Kafka 实战

本专题专注讲解 Java 在流式数据处理与消息队列系统中的应用，系统讲解 Apache Kafka 的基础概念、生产者与消费者模型、Kafka Streams 与 KSQL 流式处理框架、实时数据分析与监控，结合实际业务场景，帮助开发者构建高吞吐量、低延迟的实时数据流管道，实现高效的数据流转与处理。

2026.02.04

Golang 容器化与 Docker 实战

本专题深入讲解 Golang 应用的容器化与 Docker 部署，涵盖 Docker 基础概念、容器构建与镜像管理、Go 应用的 Dockerfile 编写、跨平台容器部署与优化、Docker Compose 和 Kubernetes 部署工具。通过实际案例，帮助学习者掌握如何将 Golang 应用容器化并实现高效部署与管理，提升系统的可扩展性与运维效率。

2026.02.04