• 投稿

黑马程序员前端React视频教程，react零基础入门原理详解到好客租房项目实战

43.4万
4385
2021-05-07 08:40:19
未经作者授权，禁止转载
3504
2646
1.4万
1461
传智教育·黑马程序员前端研究院全新录制的前端入门教程，相关资料源码笔记等关注微信公众号：黑马程序员，回复关键词：领取资源02 =============================== 1、课程经过精心设计，知识点讲解简洁、明了； 2、课程由浅到深，由原理到实践，适合零基础入门学习； 3、结合实际案例，培养解决实际问题的能力； 4、对 React 优化更加全面、细致深入剖析。 =============================== 本教程学完请继续下一课程：TypeScript入门到实战BV14Z4y1u7pi
react框架
react
JavaScript教程
react.js
前端教程
黑马程序员 发消息
咨询课程1对1就业指导、技术提升直接私信，周一到周五晚7点直播答疑求职技术干货，领取课程源码+资料，关注黑马程序员公众号，回复：领取资源02
视频选集
（1/178）
01-react基础目标
01:12
02-react概述
05:13
03-react的基本使用
07:07
04-react的基本使用（常用方法说明）
05:08
05-react脚手架的基本使用
04:59
06-react脚手架的基本使用（细节补充说明）知道即可
01:58
07-react脚手架中使用react
04:31
08-react基础阶段总结
03:07
09-JSX的学习目标
01:06
10-JSX的基本使用
07:02
11-为什么脚手架中可以使用JSX语法
02:23
12-JSX的注意点
05:34
13-在JSX中使用JavaScript表达式
03:08
14-JSX中使用JavaScript表达式的注意点
07:33
15-JSX的条件渲染
07:32
16-JSX的列表渲染
06:03
17-JSX的样式处理
05:53
18-JSX阶段总结
04:12
19-React组件基础学习目标
01:21
20-React组件介绍
02:11
21-组件的两种创建方式（1函数组件）
08:11
22-组件的两种创建方式（2类组件）
04:57
23-组件的两种创建方式（3抽离为独立js文件）
05:44
24-React事件处理（1事件绑定）
06:52
25-React事件处理（2事件对象）
03:51
26-有状态组件和无状态组件
04:22
27-state的基本使用
05:52
28-组件中的state和setState()（1setState()修改状态）
05:52
29-组件中的state和setState()（2从JSX中抽离事件处理程序）
05:48
30-事件绑定this指向（1箭头函数）
03:41
31-事件绑定this指向（2bind）(1)
03:42
32-事件绑定this指向（3class的实例方法）
02:06
33-事件绑定this指向-总结
03:35
34-表单处理（1受控组件概念）
03:25
35-表单处理（2受控组件使用步骤）
05:11
36-表单处理（3受控组件的示例）
07:35
37-表单处理（4多表单元素优化）
08:55
38-表单处理（5非受控组件）
04:37
39-React组件基础总结
02:33
40-React组件基础综合案例（1案例需求分析）
04:14
41-React组件基础综合案例（2渲染评论列表）
03:39
42-React组件基础综合案例（3渲染暂无评论并优化代码）
08:30
43-React组件基础综合案例（4获取评论信息）
05:15
44-React组件基础综合案例（5发表评论-1）
06:27
45-React组件基础综合案例（6发表评论-2边界情况处理）
05:07
46-React组件进阶学习目标
01:05
47-组件通讯介绍
01:55
48-组件的props（1基本使用）
07:26
49-组件的props（2特点）
09:01
50-组件通讯的三种方式（1父组件传递数据给子组件）
04:54
51-组件通讯的三种方式（2子组件传递数据给父组件）
08:05
52-组件通讯的三种方式（3兄弟组件通讯）
08:51
53-Context的基本使用
09:20
54-props深入（1children属性）
07:08
55-props深入（2props校验）
10:11
56-props深入（3props校验-约束规则）
06:45
57-props深入（4props的默认值）
04:25
58-组件的生命周期（1概述）
03:13
59-组件的生命周期三个阶段（1创建时）
12:11
60-组件的生命周期三个阶段（2更新时-1触发时机）
06:15
61-组件的生命周期三个阶段（2更新时-2钩子函数说明）
12:58
62-组件的生命周期三个阶段（3卸载时）
06:51
63-组件的生命周期三个阶段（4不常用钩子函数介绍）
04:28
64-render props和高阶组件概述(1)
06:40
65-render props模式（1思路分析）
05:21
66-render props模式（2使用步骤）
09:35
67-render props模式（3演示Mouse组件的复用）
06:21
68-render props模式（4children代替render属性）
06:03
69-render props模式（5代码优化）
06:00
70-高阶组件（1介绍）
05:21
71-高阶组件（2使用步骤）
13:14
72-高阶组件（3设置displayName）
07:36
73-高阶组件（4传递props）
03:54
74-React组件进阶总结
05:01
75-React原理揭秘学习目标
01:06
76-setState()方法的说明（1更新数据）
08:47
77-setState()方法的说明（2推荐语法）
07:53
78-setState()方法的说明（3第二个参数）
05:57
79-JSX语法的转化过程
08:16
80-组件更新机制
08:43
81-组件性能优化（1减轻state）
03:14
82-组件性能优化（2避免不必要的重新渲染1）
08:57
83-组件性能优化（2避免不必要的重新渲染-随机数案例）
10:48
84-组件性能优化（2避免不必要的重新渲染-随机数案例2）
06:57
85-组件性能优化（3纯组件-基本使用）
09:10
86-组件性能优化（3纯组件-shallow compare）
12:58
87-虚拟DOM和Diff算法
10:38
88-虚拟DOM和Diff算法（代码演示）
06:16
89-React原理揭秘总结
06:51
90-React路由基础学习目标
00:57
91-React路由介绍
03:30
92-路由的基本使用
09:06
93-路由的基本使用（常用组件说明）
08:43
94-路由的执行过程
05:41
95-编程式导航
11:00
96-默认路由
03:05
97-匹配模式（1模糊匹配模式）
08:29
98-匹配模式（2精确匹配）
05:02
99-React路由基础总结
04:58
01-好客租房移动Web（上）学习目标
01:38
02-项目介绍
10:57
03-本地接口部署
07:12
04-初始化项目
12:35
05-组件库antd-mobile的介绍和使用
09:08
06-配置基础路由
11:06
07-外观和样式调整
06:23
08-两种布局页面
04:41
09-嵌套路由_20190822_083951
15:53
10-实现TabBar（1基本使用）
15:08
11-实现TabBar（2修改TabBar外观样式）
22:27
12-实现TabBar（3TabBar配合路由使用）
24:02
13-实现TabBar（4TabBar.Item代码重构）
08:46
14-首页模块（首页路由处理）
14:23
15-轮播图组件的基本使用
15:52
16-获取轮播图数据
11:03
17-导航菜单
11:03
18-导航菜单（代码重构）
04:41
19-轮播图Bug分析和修复
10:26
20-TabBar菜单高亮Bug分析和修复
13:12
21-在脚手架中使用sass
06:07
22-租房小组的业务介绍和数据获取
08:49
23-租房小组结构样式
20:12
24-租房小组数据渲染
03:32
25-最新资讯（作为练习）及解决TabBar遮挡Bug
05:11
26-顶部导航
08:02
27-H5中的地理位置API
12:00
28-百度地图API（1介绍）
05:40
29-百度地图API（2申请百度账号和秘钥）
05:03
30-百度地图API（3使用步骤）
15:58
31-百度地图API（4获取顶部导航城市信息）
12:49
32-城市选择模块功能分析
03:35
33-城市选择模块（顶部导航栏）
13:29
34-获取并处理城市列表数据
04:09
35-获取并处理城市列表数据（1数据格式分析和转化）
17:23
36-获取并处理城市列表数据（2热门城市数据）
08:01
37-封装获取当前定位城市的函数
23:12
38-获取并处理城市列表数据（3添加当前定位数据）
03:14
39-长列表性能优化（1概述）(1)
04:32
40-长列表性能优化（2懒渲染说明）
03:32
41-长列表性能优化（3可视区域渲染）
06:34
42-react-virtualized（1概述）
03:12
43-react-virtualized（2基本使用）
13:10
44-渲染城市列表（让List组件占满屏幕）
11:48
45-渲染城市列表
09:52
46-渲染城市列表（展示城市索引）
06:28
47-渲染城市列表（展示索引下的城市以及动态计算每一行的高度）
10:08
48-渲染右侧索引列表
13:20
49-渲染右侧索引列表（2滚动城市列表让对应索引高亮）
09:48
50-渲染右侧索引列表（3点击索引指定该索引城市）
19:16
51-切换城市
11:01
52-好客租房移动Web（上）-总结
09:46
53-好客租房移动Web（中）学习目标
01:46
54-地图找房模块功能分析
03:27
55-封装顶部导航栏组件（1顶部导航）
09:14
56-封装顶部导航栏组件（2样式调整）
09:20
57-封装顶部导航栏组件（3功能处理withRouter）
11:58
58-封装顶部导航栏组件（4添加props校验）
06:18
59-在城市选择页面使用NavHeader组件
04:07
60-组件间样式覆盖问题的说明
12:11
61-CSS-IN-JS的说明
05:35
62-CSS Modules的说明
09:44
63-CSS Modules在项目中的使用
11:01
64-CSS Modules的应用
10:05
65-地图找房页面顶部导航栏样式处理
05:56
66-根据定位展示当前城市
12:45
67-创建文本覆盖物
06:59
68-绘制房源覆盖物
11:02
69-地图找房功能分析
05:52
70-渲染所有区的覆盖物
19:53
71-地图找房功能的封装流程
08:02
72-地图找房功能renderOverlays
14:33
73-地图找房功能createOverlays
07:30
74-地图找房功能createCircle
07:54
75-地图找房功能createRect（绘制小区覆盖物）
08:22
76-获取并展示小区房源数据
19:27
77-获取并展示小区房源数据（优化）
08:15
78-createRect方法封装完成
18:28
79-添加loading优化体验
07:10

黑马程序员前端React18入门到实战视频教程，从react+hooks核心基础到企业级项目开发实战（B站评论、极客园项目等）及大厂面试全通关
黑马程序员
116.9万 1.7万

从夯到拉，锐评 39 个前端技术！
程序员鱼皮
21.8万 1227

这就是为什么你觉得React比Vue难的原因，一次性讲透
大伟AI全栈
2.1万 7

2026 年vue和react 选择哪个
后盾人-前端后端编程
4.2万 32

我在黑马楼下暗访了黑马程序员的学生，没想到他们这样说！！！
龙哥说IT
26.2万 78

【完整版52集】React19 + Typescript 基础进阶与实战完全指南
react教程
5.2万 50

【34集已完结】2025年全网最详细的React+vite学习课程，全程无尿点！墨落老师光速给你学完
墨落老师
7万 146

【2025最新完结版】React系统教程，React全家桶 项目实战 一套搞定,耗时300小时制作，手把手带你从零到全栈开发!
react教程
15.8万 520

大公司用React小公司用Vue，背后的真实原因
计算机大白话
3.2万 18

2025年最新React全精通教程，5小时吃透react
前端老炮
14.6万 330

React19+TypeScript 保姆级教程｜从 0 到 1 吃透基础 + 进阶，新手也能秒懂！附react面试题35集
react__
16.8万 340

全网首套鸿蒙5.0零基础入门到项目实战开发全套视频教程，原生鸿蒙正式版项目实战从ArkTS+AI到V2应用状态管理，鸿蒙API16应用开发全掌握
黑马程序员
96.5万 3467

79K Star，这可能是GitHub上最牛的中文项目！
程序员少北晨
16.2万 4

黑马程序员Java实战项目《天机学堂》全套视频教程，基于SpringCloudAlibaba技术栈的企业级在线教育微服务项目
黑马程序员
98.1万 1.1万

26年前端3个月速通学习路线
黑马pink讲前端
4.5万 14

【黑马程序员课程点评】五天肝完黑马React18的课程，谈谈我的感受
复旦第一锦鲤
2.4万 8

30分钟学会React18核心语法 可能是你学会React最好的机会 前端开发必会框架 无废话精品视频
吴悠讲编程
24.9万 802

黑马程序员前端面试必看视频教程（手写Promise+js设计模式+继承+函数柯里化等），10小时JavaScript面试全通关
黑马程序员
14.3万 881

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等
咸虾米_
122.7万 3.5万

2026年最新保姆级React教程，新手也能秒懂！从 0 到 1 吃透基础 + 进阶+项目，一套学完！
推荐编程
9571 3
展开
徕卡F1联名款？24 小时极速上手体验！
客服
顶部
赛事库 课堂 2021拜年纪