# 这门课解决什么问题

这门课针对的是：零基础或仅有少量前端经验的自学者，希望系统理解Node.js与React的核心原理，并最终能独立完成一个完整的前端项目。它不追求快速掌握某个单一工具，而是帮你把环境搭建、模块机制、组件生命周期、状态管理这些关键概念串成一条清晰的路径，让你知其然也知其所以然。

适合什么基础

适合完全没有编程基础、或仅用过基础HTML/CSS的自学者。课程会从头讲起，但要求你具备耐心，能跟着一步步做。如果你已经熟悉浏览器基础操作和简单的网页搭建，会更顺畅；如果连“变量”“函数”这样的概念还需要重新梳理，这门课也会帮你补上。

建议先看哪几块

建议按资料包里的顺序，分两段走。第一段是NODE部分，从环境变量配置、Node运行开始，依次理解模块、同步异步、模块方法、导入导出、yarn包管理、发布包。这部分的重点是建立对Node运行环境和模块机制的整体认知，异步阻塞的概念虽然抽象，但通过具体案例会讲得更清楚。第二段是REACT部分，从React项目结构、组件（switch、类组件、函数组件）开始，理解JSX语法和render原理，再进入状态管理（reducer、store、actions）和上下文，最后看高阶组件和react-redux的集成。状态管理部分是最核心、也是最容易卡住的地方，建议在这里多花时间，跟着Todo的例子一步步走。

学完能独立做什么

学完这两段内容，你就能独立搭建一个React项目环境，使用npm/yarn管理依赖，创建并理解组件的渲染逻辑，管理组件内部状态，通过reducer和store管理全局状态，并集成react-redux。这意味着你可以开始构建一个实际的前端应用，比如一个包含计数器、待办列表等基础功能的小项目，并清楚知道每个状态是如何流转和更新的。

资料怎么配合练习

资料包里的视频是主线，建议边看边跟着在本地环境里操作。比如看完环境变量配置，就实际配置一次；看完模块导入导出，就写一个简单的文件互相导入。REACT部分可以配合一个在线编辑器（如CodeSandbox）或本地项目，跟着视频里的代码片段进行修改和调试。遇到异步或状态管理概念时，可以暂停视频，用自己的话复述一遍，或尝试用不同数据结构模拟reducer的输出。视频本身不会提供额外代码文件，所有练习都需要你自己动手，这正好是学习的关键环节。

课程目录

NODE
-1.环境变量配置.mp4 295.61M
-2.node运行.mp4 178.27M
-3.模块的理解.mp4 208.43M
-4.process环境变量env配置.mp4 240.46M
-5.同步异步阻塞非阻塞.mp4 720.68M
-6.模块方法.mp4 298.78M
-7.模块的导入导出.mp4 137.32M
-8.yarn.mp4 330.75M
-9.发布包.mp4 193.37M
REACT
1.react项目结构.mp4 123.19M
2.switch组件.mp4 423.07M
3.JSX语法.mp4 500.80M
4.render方法实现原理.mp4 353.08M
5.jsx循环渲染.mp4 252.50M
6.JSX属性went.mp4 171.21M
7.函数组件.mp4 291.07M
8.类组件基本用法.mp4 157.34M
9.类组件中的state状态.mp4 540.50M
-1.抽离状态管理.mp4 523.46M
-10.Counter.mp4 69.65M
-11.react-redux.mp4 254.60M
-12.复习redux.mp4 443.00M
-13.Todo结构.mp4 114.42M
-14.store以及actions和reducer完成.mp4 244.33M
-15.TodoHeader.mp4 189.24M
-16.todoList.mp4 252.31M
-17.todoFooter.mp4 356.78M
-18.高阶组件.mp4 317.61M
-19.context上下文.mp4 316.87M
-2.状态管理.mp4 496.83M
-20.react-redux.mp4 396.67M
-3.createStore.mp4 223.36M
-4.counter.mp4 253.14M
-5.在react中使用store.mp4 459.94M
-6.分析流程.mp4 221.29M
-7.Counter和Compute.mp4 338.19M
-8.合并状态combineReducers.mp4 395.55M
-9.拆分文件.mp4 430.13M
WEEK1
-1.引用数据类型函数问题.mp4 257.48M
-2.变量提声.mp4 250.02M
-3.变量重名.mp4 117.02M
-4.没有关键字的变量.mp4 49.16M
-5.变量提声的特殊问题.mp4 198.38M
-6.私有作用域.mp4 233.88M
-7.上午练习题目.mp4 349.24M
-7.上午练习题最后一道.mp4 130.42M
-8.上一级作用域.mp4 236.12M
-9.块级作用域.mp4 116.18M
1.作用域销毁问题.mp4 209.91M
2.循环绑定事件.mp4 243.65M
3.let循环绑定.mp4 34.62M
4.函数形参赋值.mp4 61.69M
5.解构赋值.mp4 383.59M
6.this问题.mp4 173.55M
7.this练习题.mp4 193.03M
1.js作业题目.mp4 236.00M
2.箭头函数.mp4 181.03M
3.单例模式1.mp4 577.34M
3.单例模式2.mp4 269.97M
4.面向对象.mp4 184.18M
5.构造函数.mp4 186.37M
6.内置类.mp4 232.54M
7.练习题.mp4 180.21M
1.定时器.mp4 198.61M
2.引用数据类型.mp4 177.16M
3.私有作用域和块作用域.mp4 295.82M
4.this.mp4 80.79M
5.原型.mp4 344.77M
6.原型链查找属性.mp4 198.34M
7.判断私有和公有属性.mp4 173.03M
1.Function和Object.mp4 148.74M
2.constructor.mp4 86.61M
3.原型指向.mp4 127.54M
4.数组原型扩展.mp4 198.92M
5.数组方法实现重写.mp4 283.39M
WEEK2
-1.函数的caller和arguments的callee.mp4 201.02M
-10.JSON.mp4 168.07M
-11.获取数据.mp4 122.75M
-2.call.mp4 224.25M
-4.call原理.mp4 325.11M
-5.call案例绑定事件.mp4 122.92M
-6.bind.mp4 124.77M
-7.bind.mp4 102.55M
-8.检测数据类型.mp4 220.88M
-9.forin.mp4 265.06M
1.页面开发步骤.mp4 0.08kb
2.获取数据绑定页面.mp4 205.18M
3.排序sort.mp4 301.16M
4.升序降序的切换.mp4 205.86M
5.排序的一次优化.mp4 143.18M
6.排序初次完成.mp4 201.34M
7.排序完成.mp4 20.09M
cube1.mp4 558.23M
1.正则的基础内容.mp4 204.66M
10.字符串中方法.mp4 193.32M
11.replace.mp4 296.77M
2.特殊意义的元字符.mp4 454.88M
3.量词元字符.mp4 144.61M
4.中括号和或.mp4 220.37M
5.捕获.mp4 200.72M
5.练习.mp4 218.67M
6.match.mp4 107.89M
7.分组捕获.mp4 384.86M
8.贪婪性.mp4 39.86M
9.构造函数创建正则.mp4 166.55M
1.正则选择题目讲解.mp4 753.55M
2.解析URL方法讲解.mp4 531.68M
3.h5表单属性.mp4 138.34M
4.h5表单验证.mp4 646.40M
5.h5表单提交获取数据.mp4 258.20M
1.正则复习.mp4 91.13M
2.函数问题.mp4 151.98M
3.call.mp4 193.53M
4.call案例.mp4 106.68M
5.2个以及2个以上的call.mp4 188.53M
6.Object的toString使用call和将类数变成数组.mp4 374.68M
7.forEach.mp4 62.90M
8.Ejs模板引擎.mp4 391.67M
WEEK3
1.js盒子模型client系列.mp4 308.26M
2.scroll系列.mp4 498.77M
3.水平滚动案例.mp4 283.14M
4.获取浏览器的盒子模型.mp4 184.07M
5.public.mp4 24.50M
6.回到顶部.mp4 267.16M
7.offset系列.mp4 405.32M
8.IE8浏览器关于offset问题.mp4 88.75M
8.补充.mp4 16.90M
1.一张图片延迟加载.mp4 540.15M
2.延迟加载加上渐变.mp4 69.10M
3.getCss.mp4 281.20M
4.setCss.mp4 237.82M
5.使用public的案例.mp4 94.45M
6.setGroupCss.mp4 184.53M
7.css获取设置样式.mp4 124.05M
8.getRandom.mp4 55.00M
9.瀑布流.mp4 489.41M
-1.多张图片延迟加载样式获取数据绑定数据.mp4 246.34M
-2.多张图片延迟加载实现延迟加载.mp4 189.23M
-3.多张图片延迟加载实现渐变和到底加载.mp4 111.60M
-4.hasClass.mp4 221.76M
-5.addClass.mp4 155.68M
-6.removeClass.mp4 148.71M
-7.toggleClass.mp4 113.92M
1.京东楼层导航.optimized.mp4 1.22G
2.JQ对象和原生对象的转换.mp4 211.95M
3.JQ选择器.mp4 506.61M
WEEK4
1.动画初识.mp4 116.62M
10.动画封装完成.mp4 420.60M
2.固定步长的动画.mp4 214.72M
3.固定总时间的动画.mp4 223.26M
4.匀速直线运动.mp4 258.95M
5.多维动画.mp4 273.64M
6.动画完成之后的操作.mp4 194.69M
7.往返运动.mp4 176.90M
8.动画的初步封装.mp4 416.42M
9.动画封装的第一次升级.mp4 508.77M
1.左右轮播获取数据和绑定数据.mp4 456.35M
2.延迟加载和渐变.mp4 113.58M
3.左右轮播自动轮播焦点对齐.mp4 223.60M
4.左右按钮的点击事件.mp4 238.94M
5.焦点点击事件.mp4 46.79M
6.Banner封装获取数据绑定数据自动轮播.mp4 546.12M
7.Banner封装左右切换和焦点点击.mp4 195.07M
8.JQ常用方法和属性.mp4 864.78M
1.浏览器最小化处理.mp4 88.23M
10.渐隐渐现封装自动轮播.mp4 251.86M
11.渐隐渐现封装鼠标滑过事件.mp4 66.41M
12.渐隐渐现封装左右切换.mp4 88.90M
13.渐隐渐现版封装完成.mp4 117.41M
14.补充问题.mp4 6.76M
2.渐隐渐现获取数据绑定数据和默认显示.mp4 235.42M
3.渐隐渐现实现自动轮播.mp4 313.81M
4.焦点对齐和鼠标滑过事件.mp4 95.87M
5.左右切换事件.mp4 105.56M
6.焦点点击事件完成.mp4 35.08M
7.JQ中的遍历.mp4 235.38M
8.JQ中的动画.mp4 267.42M
9.渐隐渐现封装初始化.mp4 271.87M
1.手风琴效果.mp4 246.84M
10.jq轮播案例.mp4 870.42M
2.小米购物车效果.mp4 143.31M
3.小米左侧导航.mp4 192.80M
4.JQ小技巧.mp4 186.99M
5.表格搜索显示.mp4 125.35M
6.复选框1.mp4 181.15M
7.复选框2.mp4 146.15M
8.移动选项.mp4 301.42M
9.JQajax获取数据.mp4 162.92M
1.原型继承.mp4 305.50M
2.冒充对象继承.mp4 103.55M
3.强制改变原型指向.mp4 82.66M
4.call继承组合继承.mp4 72.19M
5.ES6的class.mp4 102.55M
6.ES6继承.mp4 113.77M
WEEK5
1.什么是事件.mp4 301.30M
10.多级菜单JQ版.mp4 96.23M
2.事件绑定.mp4 270.86M
3.事件对象.mp4 304.24M
4.推箱子.mp4 137.53M
5.模拟百度搜索框.mp4 453.44M
6.阻止事件的默认行为.mp4 119.21M
7.事件委托.mp4 477.16M
8.事件委托选项卡.mp4 195.94M
9.多级菜单事件委托.mp4 386.94M
1.鼠标跟随.mp4 301.50M
2.鼠标跟随2.mp4 322.90M
3.放大镜.mp4 212.37M
4.JQ版放大镜.mp4 143.38M
5.拖拽基础版.mp4 276.12M
6.DOM2拖拽.mp4 313.33M
7.DOM2拖拽的this问题.mp4 190.62M
8.JQ事件.mp4 339.84M
9.实现on.mp4 455.22M
1.Callbacks.mp4 186.03M
2.自己实现Callbacks.mp4 400.89M
3.Callbacks升级.mp4 380.85M
4.使用Callbacks.mp4 91.38M
5.案例.mp4 98.34M
6.拖拽封装简易版.mp4 224.85M
7.Drag封装加border实现.mp4 377.95M
8.Drag封装加jump.mp4 267.63M
1.复习事件.mp4 322.54M
10.JQ扩展.mp4 194.01M
2.drag实现zIndex.mp4 243.86M
3.drag实现border.mp4 66.20M
4.drag加上range范围.mp4 278.21M
5.drag加上drop.mp4 168.29M
6.drag加上fly.mp4 382.57M
7.photo实现布局浮动变定位.mp4 241.70M
8.photo实现碰撞检测.mp4 250.71M
9.photo交换位置.mp4 368.38M
2.class的执行变量提升以及静态方法和可枚举性问题.mp4 287.30M
WEEK6
1.media.mp4 248.97M
2.rem.mp4 375.06M
3.loading样式.mp4 414.34M
5.场景2phone的HTML结构.mp4 116.79M
6.phone的样式.mp4 336.18M
7.phone场景显示.mp4 607.89M
1.message结构和样式.mp4 467.47M
2.message场景显示.mp4 574.25M
3.cube场景实现.mp4 660.03M
4.swiper实现滑屏处理.mp4 532.56M
5.makisu折叠菜单效果.mp4 119.54M
6.课程体系动画完成.mp4 593.00M
WEEK7
1.less变量和混合类问题.mp4 371.12M
2.颜色函数.mp4 117.46M
3.when.mp4 91.93M
4.移动端事件touch.mp4 327.56M
5.使用touch模拟滑动和单击.mp4 229.97M
6.点透事件的处理.mp4 91.80M
1.QQ音乐播放器样式书写.mp4 674.87M
2.处理rem和main的高度.mp4 197.03M
3.分析歌词.mp4 415.08M
4.绑定歌词.mp4 57.93M
5.autoPlay1.mp4 115.44M
6.autoPlay和playPause.mp4 193.22M
7.时间和歌词对应.mp4 359.17M
1.新浪新闻首页header.mp4 272.81M
2.banner.mp4 293.27M
3.aside.mp4 285.20M
4.news.mp4 197.11M
WEEK8
1.DOS命令常用几个.mp4 149.29M
2.发布网站.mp4 201.61M
3.从打开一个URL到页面显示中间经历了什么.mp4 192.21M
5.node模块安装.mp4 500.42M
6.自定义模块的导入导出.mp4 133.08M
7.fs模块读文件内容和目录.mp4 392.01M
8.fs模块写入文件内容.mp4 369.64M
2.http模块写服务请求页面.mp4 436.61M
3.http模块处理默认页.mp4 94.62M
4.http模块处理图片.mp4 289.44M
5.http模块处理ajax请求.mp4 336.15M
6.http模块处理post请求.mp4 528.75M
7.http模块处理get参数问题.mp4 305.74M
8.http模块小例子注册用户.mp4 446.46M
1.API文档.mp4 269.61M
10.bindHTML函数的实现.mp4 184.25M
11.changePage函数实现.mp4 115.09M
12.inputChangePage函数的实现.mp4 64.04M
13.removeUser函数的实现.mp4 140.24M
14.查看用户和修改用户页完成.mp4 253.14M
15.查询页完成.mp4 138.03M
2.处理资源文件请求.mp4 155.93M
3.userListAPI处理.mp4 266.42M
4.removeUserAPI处理.mp4 172.09M
5.addUserAPI处理.mp4 244.89M
6.checkUserAPI处理.mp4 78.03M
7.changeUserInfoAPI处理.mp4 113.27M
8.searchUserAPI处理.mp4 98.42M
9.写js结构.mp4 216.03M
1.局部刷新和全局刷新以及前后端分离和不分离.mp4 309.77M
2.前后端分离和不分离的优势和弊端.mp4 418.48M
3.原生AJAX的解读.mp4 808.89M
4.ajax的方法和属性.mp4 454.04M
5.编码和解码.mp4 89.57M
6.AJAX的异步和同步.mp4 290.01M
7.服务器时间做秒杀.mp4 289.38M
8.AJAx的扩展封装.mp4 616.36M
—/珠峰web前端开发14期/
day1
-3.模