React+redux 高阶实战项目-周末班

前言:

今年妙味课堂在周末做了许多技术分享活动,内容涉及到 AngularReactVue 等各种流行框架与前沿的 WEB 开发技术,帮助大家开拓了一些技术视野。许多朋友在活动后纷纷表示:

“也是奇怪,你们周末有时间,却为啥不开周末班?”
“老是做免费技术分享活动,虽然讲的是真东西,但我们学的不系统啊~”
“能不能有个周末班,价格别太贵,讲一些最流行的前端框架类、实际开发项目的那种,无论是面试还是工作中,我们都用得到的…”
“这些破框架啥的学起来又复杂,网上资料也不太好,但工作中这些内容可是刚需啊!!”
“……”

这样的咨询多了以后,做为一家商业培训机构,我们开始计划在本月底,为大家奉上一系列 “有深度、有干货、有实战、够系统” 的前端框架课程体系。并根据 北京上海 两地不同的市场差异(招聘需求差异),先后开设不同的前端框架类课程。

妙味 React+redux 高阶实战项目班(周六)

开班时间:2017 年 11 月 25 日(周六)早上 10:00 ~ 晚上 18:00

开班地点:

课时安排:周六全天上课,每天 6~8 小时,共计 6 周,约 48 课时

课程总费用:1888 元/位

课程优惠信息:

☩ 凡 11 月 20 日之前报名者,每人减免 88 元,即:1800 元/位;
☩ 凡 2 人组团报名,每人减免 158 元,即:1730 元/位;
☩ 凡 3 人组团报名,每人减免 188 元,即:1700 元/位;

咨询QQ:2852509867

微信咨询:miaov-class

上课形式 & 课程服务:

  • 讲师面授:
    采取讲师现场面授的形式,一边现场讲解、一边演示代码。不仅深入讲解课程中涉及到的知识点,且会一一辅导,帮助所有人顺利进入开发场景;

  • 耐心辅导:
    遇到知识难点,或者有人听不太明白的情况,讲师会耐心的一遍遍重复讲解,直到大家都听懂为止;

  • 现场练习:
    学员们上课时必须要带笔记本电脑来听课,每次课后,学员们需要在讲师辅导下,在笔记本电脑上配置安装环境、每次课都要完成各种代码练习后才能离开教室,确保学习质量;

  • 录制视频:
    现场授课会录制视频,方便大家课后复习知识点。同时周末班临时有事来不了的同学,事后也能在线观看当天现场录制的授课内容;

  • 源码课件:
    提供讲师现场演示的源代码、PPT 等授课资料;

  • 技术解答:
    讲师现场除了给大家答复课程范围内的提问外,也愿意和大家一起讨论工作中的各种问题;

学前基础要求:

1、有 HTML、CSS、JS 基础,熟悉 DOM\BOM 等操作,能独立完成 妙味 JavaScript 课程 中级阶段课后案例即可,例如:>QQ邮箱删除功能
2、具备 ES6AJAX 等相关知识;

报名须知:

1、报名需要预交 500 元定金,用来确定座位以及占据该班相应名额。开班当天需缴纳剩余学费后进行听课,报名后不支持退费。如开班前放弃学习,则退还 70% 定金给所报名的学员;
2、开班当天仍然有顾虑的学员,可参加半天的试听课。试听后满意即补交余款,试听不满意则不必补交余款,但之前缴纳的定金只能退还 70%;
3、周末班属于短期学习计划,因此开课后均不受理任何请假、重听服务。


React 相关视频试看(暨周六公开课视频回放):

这套视频是来自讲师之前的一次远程公开课:《妙味 React 实战答疑 + 精品案例 公开课》

在这次公开课中,讲师为大家介绍了 react 官方推荐的学习方案,react 学习路径,现场为大家讲解了 react 的常见问题,以及为大家现场演示了一个以 react 方式开发的精品小实例 “电商网站商品分类筛选”。

通过这样一个实例,能让大家了解 react 相关的工作流程、环境配置、各种问题的解决方案等……视频最后,讲师会告诉大家要完成一个什么样量级的项目,才代表是真正掌握了 react 的开发技能,希望本套视频可以让你对 react 有一个更为系统直观的概念,让你更容易进入项目的开发。

>>1-react视频介绍
>>2-问题解答与学习方法
>>3-react 体系介绍
>>4-商品筛选-react 介绍
>>5-商品筛选-基于数据渲染结构
>>6-商品筛选-更新视图
>>7-商品筛选-完成选择选项
>>8-商品筛选-删除及高亮


课程大纲:

  • react

    • jsx 语法, 写结构的语法糖, 快速创建 dom 结构
      • 在 jsx 中嵌入表达式
      • jsx 本身作为表达式
      • 在 jsx 中指定属性
      • 在 jsx 中指定 children
      • jsx 中的防注入攻击, react 会把内容转成字符串
      • 写在 React 作用域内
      • 使用点符号
      • 大写开头的自定义组件
      • 运行时选择类型的解决方案
      • 在属性中使用表达式
      • 字符串字面量
      • 属性的默认值: true
      • 属性的展开写法
      • 字面量作为 children
      • jsx 作为 children
      • 表达式作为 children
      • 函数作为 children
      • 会被忽略的 Booleans, Null, Undefined, 不会渲染到页面
    • 定义组件, 构建一个可维护的应用

      • 类式组件, 有完整的生命周期和内部状态
      • 函数式组件, 为渲染而生, 没有生命周期和内部状态
      • 使用 PropTypes 对 props 进行类型检查, 在开发期间规范代码和数据检测
      • 定义默认 props, 在没有传入 props 的时候, 保证有一个默认值
      • 使用 refs 得到真实的 DOM, 可以调用浏览器 dom 的 API
      • 使用 refs 得到类组件实例, 可以访问组件实例的方法和属性
    • Event, 在 jsx 中使用事件

      • react 中的合成事件对象, 事件触发会往回调函数传入一个 event 对象, 这是 react 集成的, 也可以通过 event.nativeEvent 拿到原生事件对象
      • react 中支持的事件, react 中有着完善的事件支持, 而且不需要额外兼容
    • props, 构建视图, 在组件直接建立沟通的桥梁
      • 组件之间的交流, 组件之间可以通过 prop 传递数据
      • 单向数据流, 组件的数据永远是从顶层流向底层, 这会带来清晰的数据流
      • props 只读, 属性是只读的, 这样会保护单向数据流的特性
    • state, 更新视图, 把对页面的维护变成对数据的维护
      • 定义组件的内部状态, 内部状态意味它某个时刻可能会变化
      • react 更新视图的机制, 如果要修改 state, 应该使用 setState
      • state 的异步更新, 在一次事件循环中 state 不会马上改变
      • state 的合并更新, 多次 setStete 会合并在一起, 保证效率和性能
      • 让组件受控, 限制组件自身的行为, 接受 react 控制
      • setState API, 通过它来更新组件的状态
    • 生命周期, 利用钩子函数更简便的参与页面的状态变化
      • Mounting 阶段
        • constructor(), 构造组件实例
        • componentWillMount(), 组件将要挂载之前
        • render(), 返回 jsx, 用于渲染
        • componentDidMount(), 组件挂载完成之后调用, 可以在此发起数据请求
      • Updating 和相应的生命周期函数
        • componentWillReceiveProps(), 依赖于父组件更新阶段的 render 执行, 可以在此 setState
        • shouldComponentUpdate(), 可以拦截此次更新, 阻断 render 的执行, 在这里可以做一些性能优化的操作
        • render(), 返回 jsx, 用于渲染
        • componentDidUpdate(), 更新之后函数会执行
      • Unmounting 和相应的生命周期函数
        • componentWillUnmount(), 在组件卸载之前可以在此做一些清空操作, 比如不再等待数据返回, 清空定时器和事件

  • todo 案例

  • 功能描述:

    • 对 todo 进行增删改查
    • 全选和取消 todo 全选
    • 统计剩余未完成的 todo
    • 清除完成的 todo
    • 通过切换不同状态显示不同状态的 todo
  • 通过这个案例, 我们可以学习到:

    • 数据的增删改查操作
    • 更加熟悉 react 编写代码的思路和方式
    • 事件的使用以及事件对象
    • 如何基于数据渲染结构并且了解其中需要注意的细节
    • 如何让组件受控
    • 何时可能会用到 ref
    • 何时应该使用类式组件, 何时应该使用函数式组件, 来让组件结构更加简洁, 更加高效
  • 为什么做这个案例?

    • 我们学习了 react 的知识, 需要通过这个案例来巩固我们学到的知识以及让这些知识能够灵活使用, 而 todolist 在这个阶段作为案例非常合适, 它的复杂度并不高, 但又最大限度的能够让我们组合使用我们学过的不同的 react 知识来解决问题
    • 当我们更熟悉 react 编写代码的方式后, 会更容易的进入到后面阶段的学习

  • Npm 基本使用
    • 切换镜像, 国内的网络访问 npm 服务器可能比较慢, 切换到国内的镜像会更快
    • 安装卸载, 使用 npm 快速安装和卸载项目依赖, 同时也可以把项目依赖声明在 package.json 文件里
    • 运行命令, 在 package.json 的 script 字段里面, 你可以声明一些和项目相关的自定义命令, 这样可以快速对项目进行一些相应的操作
  • webpack
    • 模块打包器, 除了分析 js 模块依赖, 配合相应的 loader 还可以对你的资源依赖进行分析和打包
    • loader 相关, 在引入模块前, loader 会先预处理一下模块的内容
      • babel-loader 处理 js 模块, 配合不同的 babel 插件可以编译不同内容
      • css, style-loader 引入 css, 如果你要引入 css, 应该先让 css-loader 介入处理
      • file-loader 加载资源文件, css-loader 会帮你引入一些图片或者你会在 js 里面引入一些资源依赖, 这个时候需要你把这些路径和资源交给 file-loader 处理.
    • plugin 相关, 插件会做一些 loader 做不来的事情, 它可能会在构建的不同时间点起作用
      • html-webpack-plugin
      • clean-webpack-plugin
      • ProvidePlugin, 更快速的引入模块
    • devtool 找到源码的位置
    • webpack-dev-server, 开发测试的利器
  • react-router-dom

    • 构建多视图应用的最佳实践
    • 不同类型的Router, 你应该把你的组件置于这个组件之下
      • BrowserRouter, 使用 html5 history api, 需要后端的服务器配置
      • HashRouter, 它使用起来兼容性更强, 也不需要在服务器做一些其他配置
    • Link和 NavLink, 一个增强的 a 链接, 你可以使用它来跳转页面
    • Route, 路由的核心组件, 如果 path 被匹配到, 它指定的组件会被渲染
      • 使用 component 渲染组件, 接受一个组件变量或回调函数用于渲染
      • 使用 render 渲染组件, 接受一个回调函数用于渲染
      • 使用 children 渲染组件, 接受一个回调函数用于渲染, 但此 route 一定会被匹配
      • match prop,
      • location prop
      • history prop
        • 被匹配到的组件可以通过不同的方式拿到以上三个组件
      • exact 级别的匹配, 这意味着你没法利用穿透特性去匹配路由
      • strict 级别的匹配, path 的后的 slash 大有不同, 它要求你的 location.pathname 也必须也有 slash
    • Switch , 有时候你想让一个的 pathname 匹配到多个 Route 来组合你的页面, 但有时候你只想挑选其中一个, 使用 Switch
    • Redirect 路由的重定向 , 如果它被渲染, 会重新跳转地址
    • withRouter 可以跨层级拿到 match, location, history
  • redux

    • 管理更复杂的应用状态, 提供可预测的状态管理
    • action 动作, 如果你要修改数据, 你应该先发起一个动作
      • action type, action是一个对象, 它应该有一个 type 属性标明它的身份
      • action creater, 它用来创建 action, 有中间件参与有你还可以在里面封装逻辑和异步操作
      • 使用 bindActionCreators 绑定 action creater, 这样你就可以直接发起 action 啦
    • reudcer , 计算出下一个应用状态
      • 纯函数, 确定的输入总会有相同的数据, 并且无副作用
      • 使用 combineReducers 合并子 reducers, reducer 只有一个, 此方法可以把你写的小 reducer 快速合并成一个
    • middleware, 中间件, 捕捉每一次 action
      • 理解 middleware, 在 action 的发起到 reducer 的执行的期间, 你可以让 middleware 介入并做一些其他操作
      • 一个简单的 middleware, redux-thunk, 这样你的 action creator 可以返回更多的数据类型
    • store, 应用中唯一 store, 使用这个对象用来维护整个应用的 state
      • getState 方法, 获取state
      • dispatch( action ), 更新 state
      • subscribe(listener) 注册监听器
    • react-redux, 让 react 和 redux 连接起来
      • Provider 应用中最顶层的组件
      • connect, 连接 react组件 和 store, 这个高阶组件可以返回一个增强过后的组件, 如果你想让某个应用从 state 里面拿到数据, 使用 connect

课程案例:基于 react 开发的电商购物系统

项目说明:

当我们学习过 react, react-router-dom, redux 后, 我们就需要一个合适的案例对我们学过的这三部分内容的知识进行灵活使用.

在这个购物系统的实现中, 我们会使用 react 合理的拆分出不同的组件, 同时它又涉及到多个视图, 这时我们会让 react-router-dom 介入进来管理视图, 当我们能管理好这些视图, 我们也就掌握的 react-router-dom 的使用, 并且把这些技巧用到其他项目中. 最后, 这个购物系统所要管理的数据也更加复杂, 这些数据可能来自多个数据源, 不同层级之间的组件也会有传递数据的需求. 这个使用使用 redux 来管理应用状态再好不过了. 这个时候, react 在应用中承担渲染的角色, 路由的介入会辅助不同视图的渲染过程和逻辑操作, 我们还把状态的维护交给了redux, 这三个工具相互配合, 各司其职. 当我们能灵活使用这些工具的组合, 我们就能由此应对其他的开发需求.


小福利:在开班前(2017 年 11 月 25 日前)转发该信息到朋友圈,集齐 5 个赞,可奖励 10 枚微币。微币可用于观看 妙味 VIP 视频、下载资料、购买远程视频课 等。

报名方式:

• 咨询QQ:2852509866、2852509867、2852509868
• 微信:miaov-class
• 电话:010-57269690

想要了解妙味课堂最新开课消息吗?长按二维码关注吧!

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