593集前端视频教程全部免费抗击疫情身体力行

我是技术胖，在全国新冠疫情的笼罩下，很多小伙伴不敢出门（我们小区已经戒严，每家只发一个通行证，每天只可以外出一小时），可能很多小伙伴会因此丢掉工作，技术胖作为一个还有100万房贷要还的程序员，经济上实在没办法帮助太多，但也要身体力行，抗击疫情，尽自己所能作点什么。

所以我在这里整理了我所有的视频教程，并全部免费掉，希望小伙伴们能更简单的在家学习。疫情过后，我们一定会有更美好的明天。加油！奥里给！！！

视频还在持续整理中，有些有版权问题，正在协商(建议收藏此文章)

你的一次点赞，会帮助更多的人在线免费学习，你也算是为抗击疫情作了贡献。

下面所有视频免费观看.................

大胖逼逼叨(软技能)

01、大胖逼逼叨01-如何高效学习新编程技术:www.bilibili.com/video/av711…
02、大胖逼逼叨02-三招提高代码质量:www.bilibili.com/video/av718…
03、大胖逼逼叨03-程序员到底学什么语言好:www.bilibili.com/video/av735…
04、大胖逼逼叨04-程序员如何避免从入门到入狱:www.bilibili.com/video/av743…
05、大胖逼逼叨05-前端三大框架到底学哪个好:www.bilibili.com/video/av751…
06、大胖逼逼叨06-12年程序员感悟编程的意义:www.bilibili.com/video/av760…
07、大胖逼逼叨07-大胆预测明年软件开发趋势:www.bilibili.com/video/av768…
08、大胖逼逼叨08-如何布置桌面提高编码效率:www.bilibili.com/video/av776…
09、大胖逼逼叨09-程序员通关阿里面试全攻略:www.bilibili.com/video/av785…
10、大胖逼逼叨10-2019年前端大事回顾:www.bilibili.com/video/av793…
11、大胖逼逼叨11-程序员快速成神三部曲-基础篇:www.bilibili.com/video/av810…
12、大胖逼逼叨12-程序员快速成神三部曲-进阶篇:www.bilibili.com/video/av821…
13、大胖逼逼叨13-程序员成神三部曲时间管理:www.bilibili.com/video/av830…
14、大胖逼逼叨14-程序员跨过这些坑少走3年弯路:www.bilibili.com/video/av842…
15、大胖逼逼叨15-程序员改掉这些陋习轻松涨薪5000元:www.bilibili.com/video/av851…
15、大胖逼逼叨16-程序员改掉这4个陋习将获得同事的尊重:www.bilibili.com/video/av866…

React16版基础视频【28集】

从这里开始学习吧。

011、React课程前言:jspang.com/detailed?id…
012、React简介和Vue对比:jspang.com/detailed?id…
013、React开发环境搭建:jspang.com/detailed?id…
014、脚手架生成的项目目录介绍:jspang.com/detailed?id…
015、HelloWorld和组件的讲解:jspang.com/detailed?id…
016、React中JSX语法简介:jspang.com/detailed?id…
017、React实例-小姐姐服务菜单:jspang.com/detailed?id…
018、React实例-宝剑磨的好,理论不能少:jspang.com/detailed?id…
019、React实例-老板我要加个钟:jspang.com/detailed?id…
020、React实例-宝剑虽然好老腰受不了:jspang.com/detailed?id…
021、React进阶-JSX防踩坑的几个地方:jspang.com/detailed?id…
022、React进阶-Simple React Snippets:jspang.com/detailed?id…
023、React进阶-组件的拆分:jspang.com/detailed?id…
024、React进阶-父子组件的传值:jspang.com/detailed?id…
025、React进阶-单项数据流和其他:jspang.com/detailed?id…
026、React高级-调试工具的安装及使用:jspang.com/detailed?id…
027、React高级-PropTypes校验传递值:jspang.com/detailed?id…
028、React高级-ref的使用方法:jspang.com/detailed?id…
029、React高级-生命周期讲解-1:jspang.com/detailed?id…
030、React高级-生命周期讲解-2:jspang.com/detailed?id…
031、React高级-生命周期讲解-3:jspang.com/detailed?id…
032、React高级-生命周期改善程序性能:jspang.com/detailed?id…
033、React高级-axios数据请求:jspang.com/detailed?id…
034、React高级-Axios请求EasyMock:jspang.com/detailed?id…
035、React高级-用CSS3实现react动画:jspang.com/detailed?id…
036、React高级-CSS3的keyframes动画:jspang.com/detailed?id…
037、React高级-react-transition-group:jspang.com/detailed?id…
038、React高级-多DOM动画制作和编写:jspang.com/detailed?id…

Redux免费视频教程【24集】

039、基础-认识Redux和文章介绍:jspang.com/detailed?id…
040、基础-Redux工作流程:jspang.com/detailed?id…
041、基础-Ant Design介绍和环境初始化:jspang.com/detailed?id…
042、基础-用Ant Design制作UI界面:jspang.com/detailed?id…
043、基础-创建Redux中的仓库-store和reducer:jspang.com/detailed?id…
044、基础-Redux Dev Tools的安装:jspang.com/detailed?id…
045、基础-通过Input体验Redux的流程:jspang.com/detailed?id…
046、基础-Redux制作ToDoList列表:jspang.com/detailed?id…
047、基础-用Redux实现ToDoList的删除功能:jspang.com/detailed?id…
048、基础-工作中写Redux的小技巧-1:jspang.com/detailed?id…
049、基础-工作中写Redux的小技巧-2:jspang.com/detailed?id…
050、加餐-Redux填三个小坑:jspang.com/detailed?id…
051、进阶-组件UI和业务逻辑的拆分方法:jspang.com/detailed?id…
052、进阶-填坑和Redux中的无状态组件:jspang.com/detailed?id…
053、进阶-Axios异步获取数据并和Redux结合:jspang.com/detailed?id…
054、进阶-Redux-thunk中间件的安装和配置:jspang.com/detailed?id…
055、进阶-Redux-thunk中间件的安装和配置:jspang.com/detailed?id…
056、进阶-Redux-saga的安装和配置:jspang.com/detailed?id…
057、进阶-用Redux-saga获取TodoList列表:jspang.com/detailed?id…
058、进阶-React-Redux介绍和安装:jspang.com/detailed?id…
059、进阶-React-redux中的Provider和connect:jspang.com/detailed?id…
060、进阶-React-redux的数据修改:jspang.com/detailed?id…
061、进阶-React-redux增加List数据:jspang.com/detailed?id…
062、加餐-React-redux程序优化(完结):jspang.com/detailed?id…

React Router免费视频教程【9集】

063、React Router 安装和基础环境搭建:jspang.com/detailed?id…
064、像制作普通网页一样使用ReactRouter:jspang.com/detailed?id…
065、ReactRouter动态传值-1:jspang.com/detailed?id…
066、ReactRouter动态传值-2:jspang.com/detailed?id…
067、ReactRouter重定向-Redirect使用:jspang.com/detailed?id…
068、实例-ReactRouter嵌套路由-1:jspang.com/detailed?id…
069、实例-ReactRouter嵌套路由-2:jspang.com/detailed?id…
070、实例-ReactRouter嵌套路由-3:jspang.com/detailed?id…
071、后台动态获取路由进行配置:jspang.com/detailed?id…

React Hooks 免费视频教程【共11集】

072、React Hooks介绍和环境搭建:jspang.com/detailed?id…
073、useState 的介绍和多状态声明:jspang.com/detailed?id…
074、useEffect代替常用生命周期函数:jspang.com/detailed?id…
075、useEffect 实现 componentWillUnmount生命周期函数:jspang.com/detailed?id…
076、useContext 让父子组件传值更简单:jspang.com/detailed?id…
077、useReducer介绍和简单使用:jspang.com/detailed?id…
078、useReducer代替Redux小案例-1:jspang.com/detailed?id…
079、useReducer代替Redux小案例-2:jspang.com/detailed?id…
080、useMemo优化React Hooks程序性能:jspang.com/detailed?id…
081、useRef获取DOM元素和保存变量:jspang.com/detailed?id…
082、自定义Hooks函数获取窗口大小:jspang.com/detailed?id…

React服务端渲染框架Next.js入门(共12集)

083、Next.js简介和创建项目:jspang.com/detailed?id…
084、creact-next-app快速创建Next.js项目:jspang.com/detailed?id…
085、Next.js的Page和Component的使用:jspang.com/detailed?id…
086、路由-基础和基本跳转:jspang.com/detailed?id…
087、路由-跳转时用query传递和接受参数:jspang.com/detailed?id…
088、路由-六个钩子事件的讲解:jspang.com/detailed?id…
089、在getInitialProps中用Axios获取远端数据:jspang.com/detailed?id…
090、使用Style JSX编写页面的CSS样式:jspang.com/detailed?id…
091、Lazy Loading实现模块懒加载:jspang.com/detailed?id…
092、自定义Head 更加友好的SEO操作:jspang.com/detailed?id…
093、Next.js框架下使用Ant Design UI:jspang.com/detailed?id…
094、Next.js生产环境打包（完结）:jspang.com/detailed?id…

React Hooks+Egg.js博客实战视频教程(更新39集)

更新完成

目前我的博客就是用的这个程序,预览页面

095、博客实战的课程介绍:jspang.com/detailed?id…
096、项目前端基础开发环境搭建:jspang.com/detailed?id…
097、制作博客公用头部并形成组件:jspang.com/detailed?id…
098、完成首页主体的两栏布局:jspang.com/detailed?id…
099、利用List组件制作博客列表:jspang.com/detailed?id…
100、编写“博主介绍”组件:jspang.com/detailed?id…
101、编写“通用广告”组件:jspang.com/detailed?id…
102、博客列表页面快速制作:jspang.com/detailed?id…
103、博客详细页面制作1-编写基本页面结构:jspang.com/detailed?id…
104、博客详细页面制作2-解析Markdown语法:jspang.com/detailed?id…
105、博客详细页面制作3-Markdown导航制作:jspang.com/detailed?id…
106、中台搭建1-安装egg.js开发环境:jspang.com/detailed?id…
107、中台搭建2-egg.js目录结构和约定规范:jspang.com/detailed?id…
108、中台搭建3-RESTful API设计简介和路由配置:jspang.com/detailed?id…
109、中台搭建4-Egg.js中连接mysql数据库:jspang.com/detailed?id…
110、中台搭建5-数据库设计和首页接口制作:jspang.com/detailed?id…
111、前中台结合1-前台读取首页文章列表接口:jspang.com/detailed?id…
112、前中台结合2-文章详细页面接口制作展示:jspang.com/detailed?id…
113、解决egg.js的跨域问题:jspang.com/detailed?id…
114、重构前台博客详细页面1-marked+highlight:jspang.com/detailed?id…
115、重构前台博客详细页面2-实现文章导航:jspang.com/detailed?id…
116、前台文章列表页的制作1-接口模块化和读取文章分类:jspang.com/detailed?id…
117、前台文章列表页的制作2-根据类别读取文章列表:jspang.com/detailed?id…
118、让前台所有页面支持Markdown解析:jspang.com/detailed?id…
119、后台开发01-开发环境搭建:jspang.com/detailed?id…
120、后台开发02-页面路由配置:jspang.com/detailed?id…
121、后台开发03-编写登录界面:jspang.com/detailed?id…
121、后台开发04-UI框架搭建:jspang.com/detailed?id…
122、后台开发05-添加文章页面制作1:jspang.com/detailed?id…
123、后台开发06-添加文章页面制作2:jspang.com/detailed?id…
124、后台开发07-Markdown编辑器制作:jspang.com/detailed?id…
125、后台开发08-编写service登录接口:jspang.com/detailed?id…
126、后台开发09-实现前台登录操作:jspang.com/detailed?id…
127、后台开发10-中台路由守卫制作:jspang.com/detailed?id…
128、后台开发11-读取添加文章页面的类别信息:jspang.com/detailed?id…
129、后台开发12-添加文章的方法(上):jspang.com/detailed?id…
130、后台开发13-添加文章的方法(中):jspang.com/detailed?id…
131、后台开发14-添加文章的方法(下):jspang.com/detailed?id…
132、后台开发15-文章列表制作(上):jspang.com/detailed?id…
133、后台开发16-文章列表制作(中):jspang.com/detailed?id…
134、后台开发17-删除文章:jspang.com/detailed?id…
135、后台开发18-修改文章（上）:jspang.com/detailed?id…
136、后台开发19-修改文章（下）:jspang.com/detailed?id…
137、博客部署介绍和演示:jspang.com/detailed?id…

【第一季】Vue2.x视频教程-内部指令(共8集)

001.走起我的Vue2.x : jspang.com/detailed?id…
002.v-if v-else v-show 指令: jspang.com/detailed?id…
003.v-for指令：解决模板循环问题: jspang.com/detailed?id…
004.v-text & v-html: jspang.com/detailed?id…
005.v-on：绑定事件监听器: jspang.com/detailed?id…
006.v-model指令: jspang.com/detailed?id…
007.v-bind 指令: jspang.com/detailed?id…
008.其他内部指令(v-pre & v-cloak & v-once): jspang.com/detailed?id…

【第二季】Vue2.0视频教程-全局API(共9集)

009.Vue.directive 自定义指令: jspang.com/detailed?id…
010.Vue.extend构造器的延伸: jspang.com/detailed?id…
011.Vue.set全局操作: jspang.com/detailed?id…
012.Vue的生命周期（钩子函数）: jspang.com/detailed?id…
013.Template 制作模版: jspang.com/detailed?id…
014.Component 初识组件: jspang.com/detailed?id…
015.Component 组件props 属性设置: jspang.com/detailed?id…
016.Component 父子组件关系: jspang.com/detailed?id…
017.Component 标签: jspang.com/detailed?id…

【第三季】Vue2.0视频教程-选项（共6集）

018.propsData Option 全局扩展的数据传递: jspang.com/detailed?id…
019.computed Option 计算选项: jspang.com/detailed?id…
020.Methods Option 方法选项: jspang.com/detailed?id…
021.Watch 选项监控数据: jspang.com/detailed?id…
022.Mixins 混入选项操作: jspang.com/detailed?id…
023.Extends Option 扩展选项: jspang.com/detailed?id…

【第四季】Vue2.0视频教程-实例和内置组件（共4集）

024.实例入门-实例属性: jspang.com/detailed?id…
025.实例方法: jspang.com/detailed?id…
026.实例事件: jspang.com/detailed?id…
027.内置组件 -slot讲解: jspang.com/detailed?id…

Vue-router免费视频教程

028.Vue-router入门: jspang.com/detailed?id…
029.vue-router配置子路由: jspang.com/detailed?id…
030.vue-router如何参数传递: jspang.com/detailed?id…
031.单页面多路由区域操作: jspang.com/detailed?id…
032.vue-router 利用url传递参数: jspang.com/detailed?id…
033.vue-router 的重定向-redirect: jspang.com/detailed?id…
034.alias别名的使用: jspang.com/detailed?id…
034.路由的过渡动画: jspang.com/detailed?id…
035.mode的设置和404页面的处理: jspang.com/detailed?id…
036.路由中的钩子: jspang.com/detailed?id…
037.编程式导航: jspang.com/detailed?id…

Vue-cli 免费视频教程

038.Vue-cli，开始吧骚年: jspang.com/detailed?id…
039.Vue-cli项目结构讲解: jspang.com/detailed?id…
040.解读Vue-cli的模板: jspang.com/detailed?id…

vuex免费视频教程

041.初出茅庐来个小Demo: jspang.com/detailed?id…
042.state访问状态对象: jspang.com/detailed?id…
043.Mutations修改状态: jspang.com/detailed?id…
044.getters计算过滤操作: jspang.com/detailed?id…
045.actions异步修改状态: jspang.com/detailed?id…
046.module模块组: jspang.com/detailed?id…

Vue实战视频-快餐店收银系统 (共11集)

047.Mockplus把我们的想法画出来: jspang.com/detailed?id…
048.Vue-cli搭建开发环境: jspang.com/detailed?id…
049.搞定项目图标Iconfont: jspang.com/detailed?id…
050.编写独立的侧边栏导航组件: jspang.com/detailed?id…
051.开启Element封印: jspang.com/detailed?id…
052.利用Element快速布局（1）: jspang.com/detailed?id…
053.利用Element快速布局（2）: jspang.com/detailed?id…
054.Axios从远程读取数据: jspang.com/detailed?id…
055.订单模块制作核心功能-1: jspang.com/detailed?id…
056.订单模块制作核心功能-2: jspang.com/detailed?id…
057.项目打包和上线: jspang.com/detailed?id…

WEEX免费视频教程-从入门到放肆 (共17集)

058.课程介绍: jspang.com/detailed?id…
059.开发环境安装(1): jspang.com/detailed?id…
060.开发环境安装(2): jspang.com/detailed?id…
061.weex常用命令和热更新: jspang.com/detailed?id…
062.Android Studio 开发设置: jspang.com/detailed?id…
063.weex和vue的爱恨情仇: jspang.com/detailed?id…
064.自定义组件和Text组件: jspang.com/detailed?id…
065.Input组件和初识内建模块: jspang.com/detailed?id…
066.Image和video组件: jspang.com/detailed?id…
067.从后端服务器上获取数据: jspang.com/detailed?id…
068.作轮播图片效果: jspang.com/detailed?id…
069.a组件和web组件: jspang.com/detailed?id…
070.通用事件和动画: jspang.com/detailed?id…
071.教会你自学weex: jspang.com/detailed?id…
072.Navigator和webview模块: jspang.com/detailed?id…
073.vue-router的使用: jspang.com/detailed?id…

Nuxt.js免费视频教程开启SSR渲染 ( 共10集)

074.课程介绍: jspang.com/detailed?id…
075.Nuxt环境搭建和Hello World: jspang.com/detailed?id…
076.Nuxt目录结构详讲: jspang.com/detailed?id…
077.Nuxt常用配置项: jspang.com/detailed?id…
078.Nuxt的路由配置和参数传递: jspang.com/detailed?id…
079.Nuxt的动态路由和参数校验: jspang.com/detailed?id…
080Nuxt的路由动画效果: jspang.com/detailed?id…
081.Nuxt的默认模版和默认布局: jspang.com/detailed?id…
082.Nuxt的错误页面和个性meta设置: jspang.com/detailed?id…
083.asyncData方法获取数据: jspang.com/detailed?id…
084.静态资源和打包: jspang.com/detailed?id…

Flutter免费视频第一季-环境搭建

001.课程说明，有用的废话: jspang.com/detailed?id…
002.认识一下Flutter: jspang.com/detailed?id…
003.Flutter开发环境搭建Windows版: jspang.com/detailed?id…
004.Flutter开发环境搭建Mac版: jspang.com/detailed?id…
005.安装AVD虚拟机 Flutter跑起来: jspang.com/detailed?id…
006.VSCode下如何玩转Flutter: jspang.com/detailed?id…
007.写一个HelloWorld程序: jspang.com/detailed?id…

Flutter免费视频第二季-常用组件

008.Text Widget 文本组件的使用: jspang.com/detailed?id…
009.Container容器组件的使用1: jspang.com/detailed?id…
010.Container容器组件的使用2: jspang.com/detailed?id…
011.Image图片组件的使用: jspang.com/detailed?id…
012.ListView 列表组件简介: jspang.com/detailed?id…
013.横向列表的使用: jspang.com/detailed?id…
014.GridView网格列表组件: jspang.com/detailed?id…

Flutter免费视频第三季-布局

015.水平布局Row的使用: jspang.com/detailed?id…
016.垂直布局Column组件: jspang.com/detailed?id…
017.Stack层叠布局: jspang.com/detailed?id…
018.Stack的Positioned属性: jspang.com/detailed?id…
019.卡片组件布局: jspang.com/detailed?id…

Flutter免费视频第四季-页面导航和其他

020.一般页面导航和返回: jspang.com/detailed?id…
021.导航参数的传递和接收（1）: jspang.com/detailed?id…
022.导航参数的传递和接收（2）: jspang.com/detailed?id…
023.页面跳转并返回数据: jspang.com/detailed?id…
024.静态资源和项目图片的处理: jspang.com/detailed?id…
025.Flutter客户端打包: jspang.com/detailed?id…

20个Flutter实例视频教程让你轻松上手工作（共20集）

026.底部导航栏制作-1: jspang.com/detailed?id…
027.底部导航栏制作-2: jspang.com/detailed?id…
028.不规则底部工具栏制作-1: jspang.com/detailed?id…
029.不规则底部工具栏制作-2: jspang.com/detailed?id…
030.酷炫的路由动画-1: jspang.com/detailed?id…
031.酷炫的路由动画-2: jspang.com/detailed?id…
032.毛玻璃效果制作: jspang.com/detailed?id…
033.保持页面状态: jspang.com/detailed?id…
034.保持页面状态-2: jspang.com/detailed?id…
035.一个不简单的搜索条-1: jspang.com/detailed?id…
036.一个不简单的搜索条-2: jspang.com/detailed?id…
037.流式布局模拟添加照片效果: jspang.com/detailed?id…
038.展开闭合案例: jspang.com/detailed?id…
039.展开闭合列表案例: jspang.com/detailed?id…
040.贝塞尔曲线切割: jspang.com/detailed?id…
041.波浪形式的贝塞尔曲线: jspang.com/detailed?id…
042.打开应用的闪屏动画案例: jspang.com/detailed?id…
043.右滑返回上一页案例: jspang.com/detailed?id…
044.ToolTip控件实例: jspang.com/detailed?id…
045.Draggable控件实例: jspang.com/detailed?id…

其它视频还在整理中，稍后会更新

593集前端视频教程全部免费 抗击疫情 身体力行