• 课程介绍
  • 学习目标
  • 课程详情
  • 从必备的 ES6 语法、工作流程、使用 npm 管理开发依赖、使用 BABEL 语法编译器、webpack,到 JSX、声明组件 Component、react 相关的数据与事件、组件生命周期,再到更高层面搭建项目和设计组件,通过真实的开发环境来进行 react 项目的开发,最终进入 Redux 的世界……
  • 理解react的使用和工作机制, 把react带到自己的实际开发中.
  • 我们刚刚完成了一部体系庞大、知识结构精炼且学习轨迹清晰的 React 视频教程。

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

    React 最佳入门!

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

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

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

    视频介绍地址:https://study.miaov.com/v_show/1549

    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课程准备

    1- 课程介绍

    2- 准备工作环境

    3- es6部分介绍

    4-  let const

    5-  arrowfunction

    6-  默认参数与rest

    7- spread

    8- 模板字符串

    9- 类以及类的继承

    10- 模块化语法-ES6

    11. 模块化语法-CommonJs

    12- 认识工作流程

    13- npm简单使用

    14- babel简单介绍

    15- webpack简单使用

    2.1 Hello React

    1- hello react

    2.2 jsx

    1- jsx

    2.3 组件

    1- 组件

    2.4 数据

    1- 为下节课做准备

    2- props

    3- 属性验证

    4- context, 跨层级传递数据

    5- state

    6- 组件的this指向

    7- state特性

    2.5 事件

    1- 事件系统

    2- 组件交流

    2.6 生命周期

    1- 组件生命周期

    3.1 react工作原理

    1- react工作原理

    3.2 todoList

    1- todoList介绍

    2- 初始化项目目录

    3- 拆分组件

    4- 添加和删除TODO

    5- 受控与非受控组件

    6- todo的状态

    7- 视图状态

    8- 让todo可编辑

    9- refs 拿到真实的dom

    10-小思考和小作业

    11- 无状态函数式组件

    3.3 路由 react-router-dom

    1-什么是路由

    2- 高层接口 BrowserRouter

    3- Route

    4- 匹配规则, 路由是怎么匹配到的

    5-Link, 跳转到新视图

    6-Route props,以及什么是entry和hsitory stack

    7-用路由改造todoList

    3.4 多视图案例

    1-项目介绍

    2-初始化项目目录

    3-layout, 布局组件

    4-CSS Module, CSS也可以模块化

    5-NavLink, 一个方便好用的Link

    6-致歉, 重命名一下Layout.js

    7-查看首页数据

    8-完成首页结构,

    9-显示首页的数据

    10-完成登录注册的结构, 顺便看看props.children

    11-登录注册前端验证

    12- 登录请求

    13-注册请求

    14-清除错误提示信息

    15-完成登录注册

    16-重定向到新页面

    17-自动登录

    18-注销

    19-分析用户页

    20-用户页的结构

    21-点击用户头像进入用户页(以及withRouter)

    22-显示文集

    23-显示用户信息

    24-让用户页面可以刷新

    25-从文集进入用户页

    26-点击我的头像

    27-查看所属文集

    28-从文集列表里查看文集

    29-重置用户页

    30-解决id和user_id的报错

    31-编辑用户介绍

    32-更新用户介绍

    33-写文章页的结构

    34-登录之后才能写文章

    35-写文章页显示和选择文集

    36-提交文章

    37-添加文集


     

    课程费用:

    活动价:¥228.00299.00      VIP价:¥208.00

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


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



    移动端学习地址:


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

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

其他人在开团,您可以直接参与

  • xiaomiya2008

    xiaomiya2008

    还差1人成团剩余 01 : 16 : 50 结束
    参团价:¥208.00
  • hxx5710505

    hxx5710505

    还差1人成团剩余 10 : 45 : 53 结束
    参团价:¥208.00
  • 13611496568

    13611496568

    还差4人成团剩余 05 : 56 : 09 结束
    参团价:¥198.00

课程目录

资料下载

购买课程后,可免费下载课件

讲师信息

翟宏杰

主讲教师:翟宏杰

讲师介绍:全职讲师,妙味课堂《react最佳入门》、《redux 精品先导课程》、《webpack实用性基础教程》、《AI 训练系统:react+redux 实战视频教程》录制者 react 重度使用者,使用 react+react-router+redux 开发项目若干 知晓 react+react-router+redux 技术栈的开发流程 "妙味 React+redux 高阶实战项目周末班" 全职讲师 乐于传授实际开发经验、布道 react 项目开发技巧 对学员态度积极热忱、态度坚韧,擅长细致耐心的帮助学员彻底弄明白技术难点…

相关课程

  • AI 训练系统:react+redux 实战视频教程

    ¥199.00
    当前热度:6269
  • React - 移动端企业级数据交互项目实战

    ¥258.00
    当前热度:4728
  • React+redux 高阶实战项目

    ¥1,888.00
    当前热度:694
“100%中奖,幸运好礼转到手”
幸运用户
用户 奖励方式
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
1. 中奖后请联系客服,兑换奖品;
2. 兑奖有效期:2018 年 10 月 18 日 - 2018 年 12 月 31 日;
3. 本活动最终解释权归妙味课堂所有;
您还剩余1次抽奖机会
 
“100%中奖,幸运好礼转到手”
恭喜中奖
奖品名称
“下笔消费返还10%现金”
查看奖品详情
 
“100%中奖,幸运好礼转到手”
奖品名称
下笔消费返还10%现金
奖品描述:

1、赠送1年VIP会员视频权限

2、不能赠予,仅限中奖的用户使用

3、提供ID号+绑定的手机号

4、提供个人中心的中奖截图

兑换有效期: 2018年11月31日 - 17:00:00
兑换方式:联系客服兑换

客服联系方式:

QQ:2852509866、2852509868

微信:miaov-class、miaov-study

返回
联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号