这门课解决什么工作场景

这门资料聚焦于使用 React 与 Hook 构建在线租房地图应用。在实际的前端开发工作中，处理列表数据展示、表单交互以及地图定位是业务里非常高频的场景。比如开发租房、二手房或本地生活服务类平台时，核心需求就是将地理位置数据与前端界面结合，实现精准定位与房源展示。这套资料通过一个完整的租房项目，把 React 基础语法、Hook 用法以及第三方地图 API 的接入串联起来，解决的是初学者懂语法但不知道怎么拼装成真实业务模块的问题。它不是单纯讲概念，而是带你在地图业务场景里走一遍数据绑定与组件通信的流程。

适合什么基础与建议学习顺序

这套资料适合已经掌握 JavaScript 基础、能看懂基本 ES6 语法，但缺乏 React 项目实操经验的人。如果你连变量作用域和数组方法都不熟练，建议先补 JS 再来看。资料的前半部分是 React 基础，从项目创建、JSX 语法、函数式与类组件的区别，到事件绑定与 state 状态管理，讲得比较细。建议先重点看这部分，特别是函数式组件和 Hook 的使用，因为这是目前主流写法。接着看评论列表等列表交互模块，理解表单双向数据绑定和事件处理的逻辑。基础打牢后，再进入地图定位与租房业务结合的实战部分，这样不容易在底层逻辑上卡壳。

学完能独立做什么与资料配合方式

学完后，你应该能独立用 React 搭建一个带地图定位功能的列表展示应用，掌握组件拆分、状态管理与第三方 API 接入的基本套路。资料里包含了视频讲解和项目代码，建议的练习方式是先看视频理解思路，然后对照资料包里的代码自己敲一遍，不要直接复制运行。遇到地图定位和租房列表部分，重点调试数据怎么从接口流到地图组件，以及怎么处理用户交互时的状态更新。把这套流程跑通后，你可以尝试替换成其他业务数据，比如把租房列表改成店铺点评列表，验证自己是否真正掌握了这套开发模式，而不是停留在跟着视频抄代码的阶段。


学习react，提升你的前端技术，购课后获得全部代码资料

课程目录

*   01 react基础/

  *   01 react项目创建和启动.mp4 (48.42 MB), 09:58

  *   02 JSX在react中的使用.mp4 (41.57 MB), 08:35

  *   03 1.3函数式组件和类组件.mp4 (22.89 MB), 05:20

  *   04 绑定事件.mp4 (27.70 MB), 04:40

  *   05 1.5react中state状态的使用.mp4 (19.65 MB), 04:37

  *   06 1.6react中this的指向.mp4 (19.71 MB), 04:29

  *   07 1.7改变this的指向.mp4 (21.70 MB), 04:54

*   02 评论列表功能实现/

  *   01 2.1给组件绑定事件.mp4 (11.88 MB), 02:27

  *   02 2.2给input表单进行双向数据绑定.mp4 (12.74 MB), 03:05

  *   03 介绍.mp4 (69.07 MB), 13:19

  *   04 2.4通过ref来获取表单元素的值.mp4 (17.13 MB), 03:57

  *   05 2.5无序列表的渲染.mp4 (28.05 MB), 05:37

  *   06 表单元素和state进行绑定.mp4 (25.04 MB), 04:44

  *   07 添加评论的功能开发.mp4 (25.41 MB), 04:49

*   03 父子组件传值/

  *   01 介绍.mp4 (26.93 MB), 06:07

  *   02 3.2props可以是任意类型.mp4 (37.15 MB), 07:55

  *   03 3.3子组件向父组件传值.mp4 (26.80 MB), 06:16

  *   04 3.4兄弟组件之间如何传值.mp4 (48.10 MB), 10:15

  *   05 3.5Context跨组件传值.mp4 (36.96 MB), 08:02

  *   06 3.6children属性.mp4 (22.31 MB), 04:49

  *   07 3.7props属性类型验证.mp4 (29.86 MB), 05:45

  *   08 3.8元素属性的更多类型约束.mp4 (15.67 MB), 04:09

  *   09 3.9属性默认值如何设置.mp4 (4.64 MB), 01:13

*   04 react生命周期/

  *   01 4.1组件创建时触发的生命周期.mp4 (30.17 MB), 06:18

  *   02 组件更新触发的生命周期.mp4 (39.17 MB), 07:54

  *   03 4.3组件触发卸载生命周期.mp4 (15.93 MB), 03:22

  *   04 4.4 react组件优化.mp4 (29.66 MB), 07:19

  *   05 nextState参数的使用.mp4 (36.03 MB), 07:36

  *   06 4.6nextProps参数的使用.mp4 (22.72 MB), 04:03

*   05 react中路由的使用/

  *   01 5.1react中路由的配置和使用.mp4 (67.24 MB), 12:19

  *   02 5.2编程式导航的使用.mp4 (52.74 MB), 10:54

  *   03 5.3如何接收路由中的参数.mp4 (23.24 MB), 04:49

*   06 react hook的使用/

  *   01 6.1useSate的使用.mp4 (10.02 MB), 02:31

  *   02 6.2useEffect的使用.mp4 (24.59 MB), 05:40

  *   03 6.3useContext的使用.mp4 (28.94 MB), 06:17

  *   04 6.4useReducer的使用.mp4 (41.00 MB), 08:31

  *   05 6.5useCallback的使用.mp4 (39.70 MB), 08:44

  *   06 6.6useMemo的使用.mp4 (31.32 MB), 06:13

*   07 redux的使用/

  *   01 7.1redux的概念.mp4 (43.78 MB), 09:26

  *   02 7.2redux实现点击计数功能.mp4 (39.57 MB), 09:52

  *   03 7.3redux实现点击计数功能.mp4 (32.06 MB), 07:42

*   08 租房项目/

  *   01 启动node和mysql服务.mp4 (85.87 MB), 13:46

  *   02 8.3react项目初始化.mp4 (27.86 MB), 06:03

  *   03 8.4安装antd-mobile组件库.mp4 (28.28 MB), 05:38

  *   04 8.5安装路由实现页面跳转.mp4 (28.61 MB), 07:17

  *   05 8.6嵌套路由的使用.mp4 (22.31 MB), 05:13

  *   06 8.7实现tabBar标果，引入icon图标.mp4 (45.40 MB), 08:51

  *   07 8.8TabBar的实现思路.mp4 (52.05 MB), 10:27

  *   08 8.9TabBar代码实现1.mp4 (46.16 MB), 09:24

  *   09 8.10TabBar代码实现2.mp4 (43.60 MB), 08:02

  *   10 8.11默认路由的设置.mp4 (14.90 MB), 02:42

*   09 react租房首页功能开发/

  *   01 首页Swiper走马灯效果实现.mp4 (23.57 MB), 05:43

  *   02 9.2首页Swiper数据请求.mp4 (64.97 MB), 10:53

  *   03 9.3封装axios请求.mp4 (37.11 MB), 08:17

  *   04 9.4导航栏目中的图片布局.mp4 (49.28 MB), 08:21

  *   05 9.5整理代码，封装api里面的方法.mp4 (38.23 MB), 06:19

  *   06 9.6租房小组页面渲染.mp4 (63.48 MB), 09:53

  *   07 9.7最新资讯列表渲染.mp4 (36.68 MB), 05:47

*   10 地图找房/

  *   01 10.1获取设备当前经纬度坐标.mp4 (8.65 MB), 02:07

  *   02 10.2百度地图的使用步骤.mp4 (61.11 MB), 09:47

  *   03 百度地图添加控件.mp4 (16.46 MB), 02:48

  *   04 10.4百度地图渲染label.mp4 (79.00 MB), 12:20