妙味 React 实战答疑 + 精品案例 公开课

React 框架学习之路颇为陡峭,许多朋友看手册、看视频、看案例学习,难免碰到各种 “拦路虎”。还有些小伙伴购买了妙味的 >>react最佳入门 视频教程,遇到一些技术问题后到 >>社区 提问,尽管讲师们已经对各种提问给出了详细解答,但这样仍然不 “过瘾”,索性我们给大家来一场远程公开课吧,和大家当面聊聊 React 学习过程中有哪些常见的问题,以及现场为大家演示几个精彩案例,看看这些实用的功能,如果由 React 来实现的话,能带来怎样的便捷和优势。

远程公开课:React 实战答疑 + 精品案例 公开课

上课时间:2017 年 11 月 18 日 (周六) 晚上:19:00 ~ 21:00

免费报名地址:>>腾讯课堂

公开课内容:

  1. React 环境配置、路由等相关学习问题解答;
  2. 详解 React 官方推荐的学习方法、学习路径;
  3. React 精品案例之:修改文本框的值、电商网站商品分类筛选;
  4. React 问答及编写代码和解决问题的思路和方法;

公开课 React 案例之一:修改文本框的值

描述
  • 在这个文本框中案例中,我们会先定义出这个应用所需要的数据结构,接着我们会根据这些数据生成结构并渲染到页面中;在生成 dom 结构的过程中,我们还会给元素添加事件,当某些事件触发后,我们会去更改某些数据,接着 react 会基于这些新的数据产生新的结构,并把这些更新反映到页面中。

  • 在修改文本框时,我们会使用一个数组来代表文本框的数据,每个文本框的数据使用对象表示,对象会有一个属性表示状态。表明文本框当前是否处于修改中,一个属性表示文本框的值,基于不同按钮所触发的事件,我们会修改相应的数据。

  • 点击编辑会切换文本框的状态属性,确定或取消会修改文本框的值和状态属性。而对象的状态值会决定显示哪个组件,另外一个属性值会决定显示的文本内容……


公开课 React 案例之二:电商网站商品分类筛选

描述
  • 在商品筛选这个例子中,我们会先定义出选择的数据、还有分类的数据。每个分类的每个内容都会有 id 去识别,当某个分类的某个内容被点击后,我们会添加相应的数据到选择数据的字段中。
  • 选择数据中的节点被取消后我们会移除相应的数据,每一次数据的修改 react 都会基于当前数据的状态得到一份新的渲染。

涉及到的知识点:

  • 数组操作的方法:map、filter;
  • react 的事件;
  • react 的状态更新;
  • 组件声明;

参加本次公开课你能收获什么:

  • react 官方推荐的学习方法、方式,学习路径以及如何避免少走弯路;
  • 抛开环境配置,开始的阶段尽量不必感受 webpack 和 npm 的存在,可以使用一些已有的脚手架,如官方推荐的 create-react-app;
  • 了解一些进步的语法和 api 后直接上手写些小案例,比如有了 jsx, state, props 这些概念之后就做一个 todo 的小案例,这样会巩固语法和更好的体会 react 的工作方式;
  • 更顺利、更深入的学习 react,能掌握更多的概念,比如生命周期。尝试理解 react 的工作原理,开始编写一些更复杂的项目;
  • 通过两个小案例,体会基于 react 去编写代码和解决问题的思路和方法;
  • 页面的状态是基于当前数据状态的一个反映;
  • 对 dom 的操作变成的对数据的操作;

学前基础要求:

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


精品课程推荐:

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

  • 周末班,彻底玩转 React “全家桶” 系列;
  • 从 Npm + webpack + React 到 react-router-dom + Redux + react-redux;
  • 讲师手把手带领大家从 React 基础的 API,到 React 案例、电商购物车商品管理系统实战;
  • 全程录制视频、提供全部资料源码 PPT 下载;

详情:http://www.miaov.com/index.php/news/newsDetail/nid/263


课程咨询:

咨询QQ:2852509867

微信咨询:miaov-class

电话咨询:010-57269690

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