React 最佳入门视频教程

我们刚刚完成了一部体系庞大、知识结构精炼且学习轨迹清晰的 React 视频教程。

在把这部视频呈现给大家之前,我们需要暂时平复一下内心的喜悦,
先给这套视频起一个与之相匹配的好名称。
经过再三思量……最终,我们将这部视频命名为:

React 最佳入门!

之所以称之为 “最佳入门”,是因为当我们站在初学者的角度、遍历市面上几乎所有 react 教程过后,都感觉非常失望。那些照搬官方文档套路式的视频,怎能激发学习的快感?!

自此之后,我们便开始积极筹备,计划录制一部实用性极强、特色鲜明的 react 教程,期待它最终的亮相,必定和市面上所有 react 教程彻底区格开!

而今天,此事已达成!不妨先看看这套视频的内容介绍~

视频介绍地址:http://2017.miaov.com/v_show/1454

React 最佳入门视频共计三大部分、84 集内容,内容涵盖了必备的 ES6 语法、工作流程、使用 npm 管理开发依赖、使用 BABEL 语法编译器、webpack,到 JSX、声明组件 Component、react 相关的数据与事件、组件生命周期,再到更高层面搭建项目和设计组件,通过真实的开发环境来进行 react 项目的开发,最终进入 Redux 的世界……

视频列表:


以下内容为视频作者笔述(也可作为学习指南):

视频教程第一阶段:知识依赖

学习 React 终归不是仅仅学 React,你难免会需要一些其他储备知识。

比如 ES6,你的 React 代码几乎就是构建在 ES6 之上的。虽然这样讲并不精准,因为 React 在前期版本中可以支持 ES 5.1 的语法,但 React 官方在新版本中几乎摒弃了 ES 5.1。因此,事实是你写 React 代码就要无时无刻的写 ES6 代码。

没关系,语法方面不用担心,ES6 的语法千千万,但常用的就那么几样,在第一阶段的前 9 集视频中,我已经为大家把这些需要用到的语法归纳出来了。

一个工程化的项目必然要在协作和构建效率上都有所考量。前端发展催生了众多的工具,在 ES 5.1 占据主体的年代你想使用下一代的 JavaScript 语言,怎么办?“babel” 可以帮到你。众多的模块需要打包,复杂的任务需要执行,“webpack” 处理这些事情很成熟。当然,还有 “npm” 可以管理开发依赖。(注:babel、webpack、npm 在本套视频中都有讲解)

上面那些(babel、webpack、npm)无论单拿出哪一样来讲,都是一个完整的体系,都可以单开一门课程了。但问题是:我们要把所有的东西统统涉及到么?那么我们课程的名字该叫什么呢?你要花多少时间用在你压根碰不到的知识上面呢?你有想过这会增加多少学习门槛么?而额外增加的时间成本又要怎样计算?

所以看到辅助工具那一部分视频的时候你或许会很奇怪,这些东西就仅仅是这样了么?当然不是,但了解视频中涉及到的那些知识是很有必要的。告诉自己,你是在学习 React,你要学的是 React,看这些就可以了嘛。你要系统的学习 webpack?那就去看详尽的 webpack 文档就好喽。

如果把所有的知识罗列出来摆在那里,让你去挑,任由你去学……这显然是极其不负责的。做为一个肯担当的老师,一个好的教程必定是会帮你梳理出一条通往目的地最清晰的道路,而不是把所有的路告诉你让你去选择。我们学习 React,尽量把细枝末节都抛开,时刻靠近主道才是关键。清晰的学习路径总是能让你事半功倍。其实学习任何东西都是这样,把时间陷入到不必要的分叉是很糟糕的。


视频教程第二阶段:React 基础

从第二阶段开始就要正式学习 React 的基础 API 了,React 的 API 很少, 用起来似乎很容易。当你刚开始用 React 写代码的初期,你会觉得 React 原来这么简单,很轻松就写出一堆代码来。但按照我的经验,这仅仅是一种错觉。我曾经带着这种错觉完整的写出了一个小项目,从前端到后端,虽然那个项目至今仍能正常运行,但我已经不愿意再维护它了,正是因为那种错觉,让我轻视了 React,造成写出的程序,后期维护极其艰难。

我想用自己的教训提醒大家,使用 React 的成本虽然很低,但是最佳实践的成本却并不低。所以当你在学习 React 基础这部分教程的时候,千万不要觉得某些地方的处理麻烦,而试图用一些看似高深的技巧,比如 “使用发布订阅模式解决组件交流的问题” ,虽然这些看似很有技巧性,但不要那样去做,严格按照我说的做就好,不然会掉坑里的。

该如何摆脱前面所说的错觉呢?学完课上讲的那些知识点当然是不够的。所以我设计了一个贯穿整个阶段的小练习,当然你想从头到尾完成这个小练习并非易事,它几乎是对你全方位的考验,不仅要求你对 React 的认识要清晰,甚至考验了你的 JavaScript 基础功底(例如:对象的引用)。

如果你能够接近我的要求完成那个看似简单的练习,你就越容易摆脱那种错觉。假如你有疑问,被卡住了,觉得实现的不够好,没关系,现在你有了我,你可以在妙味社区里发帖提问,我会来回答你的问题。

提问地址:http://2017.miaov.com/bbs

提问格式请参考如下方案:[react 最佳入门] 在这里写出关键问题描述……


视频教程第三阶段:React 案例

学完基础就该做东西了,因此第三阶段就是做案例。

首先是做一个 TODOlist,这里你会学到非常多的知识及使用上的技巧,包括基础阶段没讲到的技术。

接着我们会讲解 React 的路由 V4,了解最新版本路由的使用方法。它跟 V3 的差别非常大,市面上的书几乎没有使用 V4 的。之后我们会使用路由改造一下我们的 TODOlist。

前面只是给你们热热身,接下来可就要紧张起来了。

我们会做一个复杂的案例,单单使用 React 去写这个案例已经很难再扛下去了。它有多个视图,这也是我为什么要在一套 React 的入门教程里去讲路由的原因。为了这个案例我写了一个 Node.js 的后端程序,并且把它部署到阿里云的 ECS 服务器上。你的请求会经过 Nginx 反向代理到 Node 服务器上,并且已经做好了跨域的准备。你们在自己的本地开发,我会教你们如何在自己本地的测试服务器上做开发,然后如何使用我提供给你们的线上接口。

从工作目录到代码技巧,再到逻辑处理,能从这个案例学到的这些,都是普通的入门级教程无法比拟的。

如果你能从头到尾的把这个案例完成,那么当别人问你, “你知不知道 React” 的时候,你可以平淡的告诉他, “还行,入门了”。只有你自己知道,你口中这个 “入门” 的分量有多重。一个人的谦逊,总是会在不经意的时刻体现的那么露骨。


React 最佳入门—课程目录

1 课程准备(vip会员免费看)

  1. 1.课程介绍
  2. 2.准备工作环境
  3. 3.es6部分介绍
  4. 4.let const
  5. 5.arrowfunction
  6. 6.默认参数与rest
  7. 7.spread
  8. 8.模板字符串
  9. 9.解构赋值
  10. 10.
  11. 11.模块化
  12. 12.认识工作流程
  13. 13.npm简单使用
  14. 14.babel简单介绍
  15. 15.webpack简单使用

2.1 Hello React(至此以下是收费课程)

  1. 1-hello react

2.2 jsx

  1. 1-jsx

2.3 组件

  1. 1-组件

2.4 数据

  1. 1-为下节课做准备
  2. 2-props
  3. 3-属性验证
  4. 4-context, 跨层级传递数据
  5. 5-state
  6. 6-组件的this指向
  7. 7-state特性

2.5 事件

  1. 1-事件系统
  2. 2-组件交流

2.6 生命周期

  1. 1-组件生命周期

3.1 react工作原理

  1. 1-react工作原理

3.2 todoList

  1. 1- todoList介绍
  2. 2-初始化项目目录
  3. 3-拆分组件
  4. 4-添加和删除TODO
  5. 5-受控与非受控组件
  6. 6-todo的状态
  7. 7-视图状态
  8. 8-让todo可编辑
  9. 9-refs 拿到真实的dom
  10. 10-小思考和小作业
  11. 11-无状态函数式组件

3.3 路由 react-router-dom

  1. 1-什么是路由
  2. 2- 高层接口 BrowserRouter
  3. 3- Route
  4. 4- 匹配规则, 路由是怎么匹配到的
  5. 5-Link, 跳转到新视图
  6. 6-Route props,以及什么是entryhsitory stack
  7. 7-用路由改造todoList

3.4 多视图案例

  1. 1-项目介绍
  2. 2-初始化项目目录
  3. 3-layout, 布局组件
  4. 4-CSS Module, CSS也可以模块化
  5. 5-NavLink, 一个方便好用的Link
  6. 6-致歉, 重命名一下Layout.js
  7. 7-查看首页数据
  8. 8-完成首页结构,
  9. 9-显示首页的数据
  10. 10-完成登录注册的结构, 顺便看看props.children
  11. 11-登录注册前端验证
  12. 12- 登录请求
  13. 13-注册请求
  14. 14-清除错误提示信息
  15. 15-完成登录注册
  16. 16-重定向到新页面
  17. 17-自动登录
  18. 18-注销
  19. 19-分析用户页
  20. 20-用户页的结构
  21. 21-点击用户头像进入用户页(以及withRouter)
  22. 22-显示文集
  23. 23-显示用户信息
  24. 24-让用户页面可以刷新
  25. 25-从文集进入用户页
  26. 26-点击我的头像
  27. 27-查看所属文集
  28. 28-从文集列表里查看文集
  29. 29-重置用户页
  30. 30-解决iduser_id的报错
  31. 31-编辑用户介绍
  32. 32-更新用户介绍
  33. 33-写文章页的结构
  34. 34-登录之后才能写文章
  35. 35-写文章页显示和选择文集
  36. 36-提交文章
  37. 37-添加文集

一些后续事项:

本套课程共 84 集,其中免费部分 15 集,你可以在下面截图中找到免费部分。其余 69 集将会上传到远程收费课程中。

视频原价:¥299.00

活动价格:¥228.00

VIP 用户:¥208.00

“物超所值” 的解释,大概就是这个意思。


VIP 会员免费试看地址:http://2017.miaov.com/

全套视频地址:http://2017.miaov.com/

PC 端学习地址:http://2017.miaov.com/

移动端学习地址:


妙味课堂“前端开发课程”报名通道:

QQ:2852509866、2852509867、2852509868
TEL:010-57269690
在线时间:周一至周五 9 : 30-18 : 00 周六至周日 10 : 00-17 : 00

妙味网友
请登录后留言,请登录注册