别急,先看看这门课到底能不能接得住你

这门课专门解决 React 框架“看着高大上,上手就卡壳”的难题。很多教程讲得太快,连开发环境都还没配好,直接扔给你复杂的 Hooks 概念,初学者很容易晕。我们先把环境搭建、JSX 语法的本质、基础组件和状态管理这些地基打牢,再一点点通过评论案例去实战。如果你之前没碰过 React,或者想从 Vue 转过来但不敢直接啃大书,这门课能帮你把节奏慢下来,确保每一步都听懂。

建议先看哪几块,哪些地方可以暂时跳过

基础薄弱的朋友,务必先看“开发环境创建”和"JSX 基础”这几节。JSX 是 React 的骨骼,如果不理解什么是 JSX 表达式和列表渲染,后面跟着老师写代码会非常痛苦,建议这部分不要倍速,哪怕看两遍视频。至于资料包里的 day01 到 day12 是纯基础理论,一定要配合视频看,看完视频立刻去压缩包里的对应 day 文件夹里找代码对照,这样印象最深。至于 day13 开始的评论案例,那是用来串联前面知识点的,如果你连状态修改规则(day11)都不懂,可以先倍速看案例演示,理解流程,代码细节等基础打牢了再细嚼慢咽。对于有原生 JS 经验但没写过前端框架的人,可以先跳过一些过于啰嗦的旧时代概念讲解,直奔组件和事件绑定部分。

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

资料包里的视频是主菜,对应的 day 编号压缩包是配菜。学习时,务必“视频暂停 + 手动敲代码”的模式。比如视频讲到列表渲染,你就暂停视频,自己在本地环境里把代码敲一遍,运行看看对不对,不对再看视频里老师是怎么改的。不要直接复制粘贴压缩包里的代码,那样代码写一遍就忘。学完这套内容,你能独立搭建一个 React 项目,处理简单的列表展示(比如商品列表、用户评价)、实现基础的增删改查交互(比如删除评论、切换 Tab 页签)以及控制页面样式。但你要心里有数,这只是 React 的入门实战,复杂的 Hooks 深度定制、服务端渲染(SSR)或大型架构设计可能还没涉及,遇到更复杂的业务需求时,还得继续自己补课。

课程目录

React 基础 - 配套资料
React 基础 - day01.rar 10.97M
React 基础 - day02.rar 14.84M
React 基础 - day03.rar 15.53M
React 基础 - day04+day05.rar 16.92M
React 基础 - day06.rar 11.49M
React 基础 - day07.rar 10.77M
React 基础 - day08.rar 10.69M
React 基础 - day09.rar 10.70M
React 基础 - day10.rar 3.74M
React基础 - day11.rar 1.94M
React基础 - day12.rar 5.58M
React基础-视频
Day1-01.React简单介绍.mp4 24.62M
Day1-02.React开发环境创建.mp4 52.00M
Day1-03.JSX基础-概念和本质.mp4 58.87M
Day1-04.JSX基础-识别js表达式.mp4 71.84M
Day1-05.JSX基础-实现列表渲染.mp4 69.86M
Day1-06.JSX基础-实现基础条件渲染.mp4 40.37M
Day1-07.JSX基础-实现复杂条件渲染.mp4 46.56M
Day1-08.React中的事件绑定.mp4 111.54M
Day1-09.React组件基础使用.mp4 61.76M
Day1-10.useState基础使用.mp4 85.94M
Day1-11.useState修改状态的规则.mp4 89.81M
Day1-12.基础样式控制.mp4 55.77M
Day1-13.评论案例-列表渲染.mp4 82.03M
Day1-14.评论案例-删除功能实现.mp4 99.27M
Day1-15.评论案例-tab切换功能实现.mp4 136.42M
Day1-16.评论案例-排序实现.mp4 113.00M
Day1-17.classnames工具优化类名控制.mp4 94.62M
Day2-01.表单受控绑定.mp4 24.13M
Day2-02.React中获取DOM.mp4 73.43M
Day2-03.发表评论-核心功能实现.mp4 100.44M
Day2-04.发表评论-id和时间处理.mp4 106.28M
Day2-05.发表评论-清空内容和聚焦实现.mp4 74.78M
Day2-06.组件通信-父传子-基础实现.mp4 134.03M
Day2-07.组件通信-父传子-props说明.mp4 75.03M
Day2-08.组件通信-父传子-chilren说明.mp4 26.05M
Day2-09.父子组件通信-子传父实现.mp4 129.63M
Day2-10.使用状态提升实现兄弟组件通信.mp4 137.94M
Day2-11.使用context机制跨层传递数据.mp4 133.98M
Day2-12.useEffect-概念理解和基础使用.mp4 128.57M
Day2-13.useEffect-不同依赖项说明.mp4 71.66M
Day2-14.useEffect-清除副作用.mp4 76.69M
Day2-15.自定义Hook实现.mp4 152.76M
Day2-16.ReactHooks使用规则说明.mp4 37.11M
Day2-17.案例优化-使用useEffect获取数据.mp4 138.83M
Day2-18.案例优化-自定义hook封装请求逻辑.mp4 57.51M
Day2-19.案例优化-评论Item组件封装.mp4 37.64M
Day3-01.Redux快速上手.mp4 61.12M
Day3-02.Redux与React-环境准备.mp4 12.75M
Day3-03.Redux与React-实现counter.mp4 35.91M
Day3-04.Redux与React-提交action传参.mp4 10.26M
Day3-05.Redux与React-异步状态操作.mp4 30.02M
Day3-06.Redux调试-devtools.mp4 6.22M
Day3-07.美团案例-案例演示和环境准备.mp4 13.39M
Day3-08.美团案例-分类和商品列表渲染.mp4 35.71M
Day3-09.美团案例-点击分类激活交互实现.mp4 14.25M
Day3-10.美团案例-商品列表切换显示.mp4 4.92M
Day3-11.美团案例-添加购物车实现.mp4 20.02M
Day3-12.美团案例-统计区域功能实现.mp4 19.07M
Day3-13.美团案例-购物车列表功能实现.mp4 30.69M
Day3-14.美团案例-控制购物车显示和隐藏.mp4 31.79M
Day4-01.ReactRouter-快速开始.mp4 32.11M
Day4-02.ReactRouter-抽象路由模块.mp4 13.81M
Day4-03.ReactRouter-路由导航跳转.mp4 13.09M
Day4-04.ReactRouter-导航跳转传参.mp4 18.02M
Day4-05.ReactRouter-嵌套路由配置.mp4 17.52M
Day4-06.ReactRouter-默认二级路由配置.mp4 6.13M
Day4-07.ReactRouter-404路由配置.mp4 8.09M
Day4-08.ReactRouter-俩种路由模式.mp4 4.94M
Day4-09.记账本-功能演示和环境创建.mp4 14.99M
Day4-10.记账本-配置别名路径@.mp4 21.40M
Day4-11.记账本-数据Mock实现.mp4 15.15M
Day4-12.记账本-整体路由设计.mp4 18.03M
Day4-13.记账本-antD主题色定制.mp4 19.21M
Day4-14.记账本-Redux管理账目列表.mp4 31.81M
Day4-15.记账本-TabBar功能实现.mp4 39.38M
Day5-01.月度账单-统计区域-功能演示和结构搭建.mp4 20.91M
Day5-02.月度账单-统计区域-点击切换时间选择框.mp4 25.10M
Day5-03.月度账单-统计区域-点击确定切换时间显示.mp4 17.94M
Day5-04.月度账单-统计区域-数据按月分组实现.mp4 25.28M
Day5-05.月度账单-统计区域-计算选择月份之后的统计数据.mp4 25.95M
Day5-06.月度账单-统计区域-初始化渲染统计数据.mp4 16.73M
Day5-07.月度账单-列表区域-单日统计列表实现.mp4 42.33M
Day5-08.月度账单-列表区域-单日账单列表渲染显示.mp4 11.90M
Day5-09.月度账单-列表区域-点击切换账单展开和收起.mp4 13.36M
Day5-10.月度账单-账单类型图标组件封装.mp4 14.80M
Day5-11.新增账单-功能熟悉和结构搭建.mp4 8.96M
Day5-12.新增账单-支出和收入功能实现.mp4 23.02M
Day5-13.新增账单-新增表单实现.mp4 41.75M
Day5-14.新增账单-收尾优化.mp4 47.66M
Day6-01.使用CRA初始化项目环境.mp4 26.68M
Day6-02.安装scss包.mp4 57.46M
Day6-03.安装antDesign.mp4 58.91M
Day6-04.配置基础路由Router.mp4 114.96M
Day6-05.配置别名路径.mp4 110.00M
Day6-06.使用gitee管理项目.mp4 42.27M
Day6-07.登录-准备静态结构.mp4 88.91M
Day6-08.登录-表单校验实现.mp4 167.66M
Day6-09.登录-获取表单数据.mp4 79.00M
Day6-10.登录-封装request请求模块.mp4 133.33M
Day6-11.登录-redux管理token-编写样板代码.mp4 124.80M
Day6-12.登录-redux管理token-实现Token异步获取.mp4 151.86M
Day6-13.登录-redux管理token-实现登录后续逻辑.mp4 76.82M
Day6-14.登录-Token持久化.mp4 96.36M
Day6-15.登录-封装Token的存取删方法.mp4 25.92M
Day7-01.Axios请求头注入Token.mp4 34.80M
Day7-02.根据Token控制路由跳转.mp4 103.30M
Day7-03.Layout-结构创建和样式reset.mp4 81.06M
Day7-04.Layout-二级路由配置.mp4 85.66M
Day7-05.Layout-点击菜单跳转路由.mp4 110.46M
Day7-06.Layout-根据当前路由路径高亮菜单.mp4 83.91M
Day7-07.Layout-展示个人信息.mp4 167.41M
Day7-08.Layout-退出登录实现.mp4 128.59M
Day7-09.Layout-处理token失效.mp4 129.96M
Day7-10.Home-Echarts基础图表渲染.mp4 187.24M
Day7-11.Home-Echarts组件封装实现.mp4 124.51M
Day7-12.拓展-API模块封装.mp4 39.85M
Day8-01.文章发布-功能演示说明.mp4 12.06M
Day8-02.基础文章发布-准备基础结构.mp4 76.68M
Day8-03.基础文章发布-准备富文本编辑器.mp4 116.53M
Day8-04.基础文章发布-频道列表获取渲染.mp4 220.38M
Day8-05.基础文章发布-收集表单数据提交表单.mp4 221.44M
Day8-06.文章封面-上传文章封面基础实现.mp4 185.15M
Day8-07.文章封面-实现切换封面类型.mp4 167.06M
Day8-08.文章封面-控制上传图片的数量.mp4 68.64M
Day8-09.文章封面-发布带封面的文章.mp4 159.90M
Day8-10.文章列表-功能描述和结构创建.mp4 76.25M
Day8-11.文章列表-通过自定义hook获取频道列表.mp4 179.00M
Day8-12.文章列表-渲染table表格.mp4 222.20M
Day8-13.文章列表-适配文章状态.mp4 37.02M
Day9-01.文章列表-筛选功能实现.mp4 68.56M
Day9-02.文章列表-分页功能实现.mp4 157.36M
Day9-03.文章列表-删除功能实现.mp4 218.43M
Day9-04.文章列表-携带id跳转到编辑页.mp4 49.55M
Day9-05.编辑文章-回填基础数据.mp4 173.21M
Day9-06.编辑文章-回填封面信息.mp4 203.05M
Day9-07.编辑文章-根据id适配编辑和新增状态.mp4 55.92M
Day9-08.编辑文章-更新文章.mp4 243.29M
Day9-09.项目打包-基础打包和本地预览.mp4 39.52M
Day9-10.打包优化-配置路由懒加载.mp4 107.14M
Day9-11.打包优化-包体积可视化分析.mp4 84.25M
Day9-12.打包优化-CDN配置.mp4 47.60M
Day10-01.useReducer.mp4 189.33M
Day10-02.useMemo.mp4 100.06M
Day10-03.React.memo-基础使用.mp4 62.02M
Day10-04.React.memo-props比较机制说明.mp4 131.92M
Day10-05.useCallback.mp4 51.86M
Day10-06.React-forwardRef.mp4 64.09M
Day10-07.useInperativeHandle.mp4 78.46M
Day10-08.Class类组件-基础结构.mp4 69.58M
Day10-09.类组件生命周期函数.mp4 105.29M
Day10-10.类组件的组件通信说明.mp4 87.54M
Day10-11.zustand-基础用法.mp4 321.84M
Day10-12.zustand-异步支持.mp4 101.21M
Day10-13.zustand-切片模式.mp4 110.54M
Day11-01.React+TS基础环境创建.mp4 60.90M
Day11-02.useState-自动推导.mp4 53.50M
Day11-03.useState-泛型参数.mp4 101.98M
Day11-04.useState-初始值为null.mp4 57.33M
Day11-05.Props与TS-基础使用.mp4 51.79M
Day11-06.Props与TS-特殊的children属性.mp4 47.69M
Day11-07.props与TS-为事件prop添加类型.mp4 113.85M
Day11-08.useRef与TS.mp4 91.49M
Day12-01.项目环境创建.mp4 35.64M
Day12-02.安装antDesignMobile.mp4 59.98M
Day12-03.配置基础路由.mp4 76.13M
Day12-04.配置路径别名.mp4 99.11M
Day12-05.axios插件安装配置.mp4 55.53M
Day12-06.API模块封装-axios配合ts使用.mp4 165.89M
Day12-07.Home模块-channels基础数据渲染.mp4 194.40M
Day12-08.Home模块-channels-hooks优化.mp4 65.25M
Day12-09.Home模块-List-列表数据获取渲染.mp4 414.67M
Day12-10.Home模块-List无限加载实现.mp4 327.15M
Day12-11.详情模块-路由跳转&数据渲染.mp4 385.64M
React入门到实战导学视频.mp4 39.84M
React入门到实战完结篇.mp4 8.36M
黑马-React入门到实战核心精讲/