这门课究竟在解决什么问题

市面上关于 React 的教程大多停留在 TodoList 或简易博客层面，一旦进入真实的企业级项目，学生会立刻发现：路由如何动态守卫、状态如何跨组件传递、性能瓶颈如何排查、以及如何对接后端 API，这些关键章节往往一笔带过或直接跳过。大众点评 WebApp 是一个典型的中等复杂度单页应用，它强制要求开发者处理复杂的路由嵌套、全局用户状态管理以及高频的数据渲染优化。

这门课程的核心价值，不在于教会你 React 的语法糖，而在于展示一个完整的大型前端项目是如何从零搭建并工程化的。它解决了「学完 React 不会写大项目」的痛点，将分散的知识点串联成一套可落地的开发工作流。对于正面临从 Demo 项目向真实业务代码转型的开发者而言，这是一个极佳的实战范本。

适合什么基础，建议先看哪几块

本课程定位明确，不适合从未接触过前端基础（HTML/CSS/JS）或尚未掌握 React 基本概念（Props、State、Hooks）的初学者。它最适合的是已经能够独立编写小型组件，但在构建复杂应用时感到无从下手的中级开发者，或者希望系统梳理 React 工程化思维的转行者。

建议在观看时，优先关注以下几个核心模块：首先是项目初始化与目录结构设计，这决定了后续代码的可维护性；其次是路由模块的配置，特别是动态路由与权限控制，这是点评类应用的核心逻辑；再次是状态管理部分的实现，理解如何避免 prop drilling 以及如何使用 Context 或第三方库管理全局数据；最后是接口对接与数据缓存策略，这部分直接体现了高级开发者的工程素养。其他过于基础的 UI 组件编写环节，已有基础的读者可以快速略过，重点消化其背后的架构思路。

学完能独立做什么，资料怎么配合练习

完成本课程后，你将具备独立搭建中型 React 应用的能力。具体而言，你可以独立完成包含多级路由、全局状态共享、复杂表单处理及前后端分离联调的 Web 应用开发。你不再只是堆砌组件，而是能够从架构层面考虑代码的组织方式、性能优化策略以及可复用性的设计。你将能够面对一个模糊的产品需求，将其拆解为合理的组件树和技术方案。

为了最大化学习效果，请务必配合资料包进行动手练习，切忌只做「抄写员」。首先，建议先自行根据需求分析画出简单的页面结构和数据流向图，再对照课程中的实现进行比对，找出自己思维上的盲区。其次，在练习过程中，应刻意尝试替换课程中的技术方案，例如将实现的状态管理库换成另一种，或优化某个复杂组件的渲染逻辑，以此检验是否真正理解原理。最后，尝试在原有项目基础上增加一个未讲解的小功能（如评论折叠、搜索建议），这是检验学习成果的最佳方式。只有经过自己敲代码解决的 Bug 和遇到的坑，才能转化为真正的职场技能。

mksz313 - React高级实战 打造大众点评 WebApp

本课程隶属 会员库 · MK实战课（一部分是老课） / 课程盒子3-mksz300至399，完整课程目录与配套资料如下。

课程目录

01-webpack配置(微信-rmshou-收集整理)/
【已废弃】搭建webpack环境0 - 课程说明【微信-rmshou-收集整理】.mov
搭建webpack环境0 - 课程说明【微信-rmshou-收集整理】.mov
搭建webpack环境1 - 学习目的【微信-rmshou-收集整理】.mov
搭建webpack环境2 - 安装插件【微信-rmshou-收集整理】.mov
搭建webpack环境3-介绍webpack.config.js-part1【微信-rmshou-收集整理】.mov
搭建webpack环境4-介绍webpack.config.js-part2【微信-rmshou-收集整理】.mov
搭建webpack环境5-webpack命令【微信-rmshou-收集整理】.mov
搭建webpack环境6-介绍webpack.production.config.js【微信-rmshou-收集整理】.mov
视频文件【微信-rmshou-收集整理】.txt
02-react基础(微信-rmshou-收集整理)/
react基础01-介绍jsx-part1【微信-rmshou-收集整理】.mov
react基础01-介绍jsx-part2-拼接到part1后面【微信-rmshou-收集整理】.mov
react基础02-jsx语法几点注意事项-后面拼接上part2【微信-rmshou-收集整理】.mov
react基础03-jsx事件循环和判断【微信-rmshou-收集整理】.mov
react基础04-代码分离方案【微信-rmshou-收集整理】.mov
react基础05-props和state【微信-rmshou-收集整理】.mov
react基础06-智能组件和木偶组件【微信-rmshou-收集整理】.mov
react基础07-生命周期【微信-rmshou-收集整理】.mov
03-react性能优化方案(微信-rmshou-收集整理)/
react性能优化1-优化方案【微信-rmshou-收集整理】.mp4
react性能优化2-todo-list-demo【微信-rmshou-收集整理】.mp4
04-react-router(微信-rmshou-收集整理)/
react-router01-介绍router-map配置【微信-rmshou-收集整理】.mov
react-router02-跳转和参数【微信-rmshou-收集整理】.mov
05-redux基础(微信-rmshou-收集整理)/
redux基础01-简单demo【微信-rmshou-收集整理】.mov
redux基础02-结合react-part1【微信-rmshou-收集整理】.mov
redux基础03-结合react-part2【微信-rmshou-收集整理】.mov
redux基础04-结合react-场景说明【微信-rmshou-收集整理】.mov
06-fetch基础(微信-rmshou-收集整理)/
fetch基础01-get请求【微信-rmshou-收集整理】.mp4
fetch基础02-post请求【微信-rmshou-收集整理】.mp4
fetch基础03-数据模拟Mock【微信-rmshou-收集整理】.mp4
07-开发首页(微信-rmshou-收集整理)/
同类型课程.jpg
首页开发01-开发步骤介绍【微信-rmshou-收集整理】.mov
首页开发02-路由介绍【微信-rmshou-收集整理】.mov
首页开发03-父组件介绍【微信-rmshou-收集整理】.mov
首页开发04-获取城市【微信-rmshou-收集整理】.mov
首页开发05-存储城市到Redux【微信-rmshou-收集整理】.mov
首页开发06-HomeHeader组件part1（后面几秒钟的废话可裁掉）【微信-rmshou-收集整理】.mov
首页开发07-HomeHeader组件part2【微信-rmshou-收集整理】.mov
首页开发08-HomeHeader组件part3【微信-rmshou-收集整理】.mov
首页开发09-简单轮播图【微信-rmshou-收集整理】.mov
首页开发10-获取轮播图index【微信-rmshou-收集整理】.mov
首页开发11-轮播图完成【微信-rmshou-收集整理】.mov
首页开发12-超值特惠-后端接口【微信-rmshou-收集整理】.mov
首页开发13-超值特惠-获取数据【微信-rmshou-收集整理】.mov
首页开发14-超值特惠-展示数据【微信-rmshou-收集整理】.mov
首页开发15-猜你喜欢-后端数据【微信-rmshou-收集整理】.mov
首页开发16-猜你喜欢-获取列表数据【微信-rmshou-收集整理】.mov
首页开发17-猜你喜欢-显示标题【微信-rmshou-收集整理】.mov
首页开发18-猜你喜欢-显示内容【微信-rmshou-收集整理】.mov
首页开发19-加载更多-准备数据【微信-rmshou-收集整理】.mov
首页开发20-加载更多-实现功能【微信-rmshou-收集整理】.mov
首页开发21-加载更多-下拉效果【微信-rmshou-收集整理】.mov
首页开发22-加载更多-总结【微信-rmshou-收集整理】.mov
08-开发城市页(微信-rmshou-收集整理)/
开发城市页面01-路由介绍【微信-rmshou-收集整理】.mov
开发城市页面02-跳转链接【微信-rmshou-收集整理】.mov
开发城市页面03-完成Header【微信-rmshou-收集整理】.mov
开发城市页面04-当前城市【微信-rmshou-收集整理】.mov
开发城市页面05-修改城市的方法【微信-rmshou-收集整理】.mov
开发城市页面06-修改城市完成【微信-rmshou-收集整理】.mov
09-开发搜索页(微信-rmshou-收集整理)/
开发搜索页01-路由配置【微信-rmshou-收集整理】.mov
开发搜索页02-约束性和非约束性组件【微信-rmshou-收集整理】 (2).mp4
开发搜索页03-抽离input-1【微信-rmshou-收集整理】.mov
开发搜索页03-抽离input-1【微信-rmshou-收集整理】.mp4
开发搜索页04-抽离input-2【微信-rmshou-收集整理】.mov
开发搜索页04-抽离input-2【微信-rmshou-收集整理】.mp4
开发搜索页05-SearchHeader组件【微信-rmshou-收集整理】.mov
开发搜索页06-结果列表【微信-rmshou-收集整理】.mp4
10-开发详情页(微信-rmshou-收集整理)/
开发详情页01-header【微信-rmshou-收集整理】.mov
开发详情页02-获取商户信息【微信-rmshou-收集整理】.mov
开发详情页03-展示商户信息-1【微信-rmshou-收集整理】.mov
开发详情页04-展示商户信息-2【微信-rmshou-收集整理】.mov
开发详情页05-用户评论列表【微信-rmshou-收集整理】.mov
11-开发登录页(微信-rmshou-收集整理)/
开发登录页01-路由配置【微信-rmshou-收集整理】.mov
开发登录页02-登录组件-1【微信-rmshou-收集整理】.mov
开发登录页03-登录组件-2【微信-rmshou-收集整理】.mov
12-购买和收藏(微信-rmshou-收集整理)/
购买和收藏01-创建子页面【微信-rmshou-收集整理】.mp4
购买和收藏02-购买功能【微信-rmshou-收集整理】.mp4
购买和收藏03-收藏功能-准备【微信-rmshou-收集整理】.mp4
购买和收藏04-收藏功能-准备2【微信-rmshou-收集整理】.mp4
购买和收藏05-收藏功能-准备3【微信-rmshou-收集整理】.mp4
购买和收藏06-收藏功能-完成【微信-rmshou-收集整理】.mov
13-用户中心(微信-rmshou-收集整理)/
用户中心01-Header【微信-rmshou-收集整理】.mov
用户中心02-用户信息【微信-rmshou-收集整理】.mov
用户中心03-获取订单【微信-rmshou-收集整理】.mov
用户中心04-展示订单【微信-rmshou-收集整理】.mov
14-评价(微信-rmshou-收集整理)/
评价01-评价状态【微信-rmshou-收集整理】.mov
评价02-显示输入框【微信-rmshou-收集整理】.mov
评价03-获取评价内容【微信-rmshou-收集整理】.mov
评价04-提交数据【微信-rmshou-收集整理】.mov
15-总结(微信-rmshou-收集整理)/
总结【微信-rmshou-收集整理】.mov
课程资料/
代码资料.zip