上海《React+redux 高阶实战周末班》课程记录(一)

React.js 作为目前最火的一个前端框架,同样也拥有一个比较陡峭的学习曲线。
从今天开始,我们会发出一个系列的帖子,记录妙味的讲师们在周末班是如何带领大家攀登这座山峰的。

周末 React 班学前基础

课程的整体介绍我们在这就不再多做重复,在我们的 >>《React+redux 高阶实战项目-周末班》的帖子里已经介绍了很详细了。

但是,有个事情还是需要给大家强调一下:ES6 基础很重要、ES6 基础很重要、ES6 基础很重要!!尤其中间的 class、class 的继承一定要重点理解。对 ES6 有问题的同学可以参考下我们的 《ECMAScript 6》系列视频教程。

本周课程记录

需要用到文件

为了能让大家快速上手 React,我们并没有采取传统的先讲开发环境的各种配置的方法,而是利用文件引入的方式,直接给大家开讲 React。当然 npm、webpack 这些相关的配置,我们在后续的课程中也会一一为大家讲解。

  • react.js 和 react-dom.js 这两个是 React 的核心文件,一定要引入;
  • babel.js 一个编译文件,可以把我们在 React 中的语法,编译成浏览器可以识别的 JS 语法;
  • script 标签声明 在 <script> 标签上加上 type='text/babel' 这样的话,babel 才会编译里边的内容;

- 课程时间线 -

  • 10:00 整,上海周末班钟毅讲师(学员赠送外号:“钟萌萌、萌萌跶”)已经准备好了

    萌萌哒钟老师

  • 10:00 - 10:20

    • 学前基础要求介绍
    • 课程内容介绍
  • 10:20 - 10:24
    • react.js、react-dom.js 引入文件说明
  • 10:25 正式讲解内容内容 ^_^
    • ReacDom.render( 内容,容器 )
    • ReactDOM.render( ‘Hello React’, document.getElementById(‘box’) )
    • 向容器中去渲染内容
  • jsx ( Javascript + xml )
    • 允许我们在 javascript 书写 xml,但是浏览器并不能直接识别该语法,需要使用 babel 编译。
  • jsx 语法说明
    • 可以在 JS 中书写 xml( html )
    • 支持嵌套
    • 一个独立结构中,有且只能有一个顶级元素
    • 支持 {插值表达式 } 在 {} 中我们可以使用 JS 中的表达式
  • 插值表达式
    • 类似 es6 中模板字符串,可以在 XML 嵌入 javascript 表达式
    • 格式:{ 表达式 },表达式:算术表达式、变量、函数调用
  • 插值表达式中的类型输出
    • 字符串、数字:原样输出
    • 布尔值、空、未定义:输出空值,也不会有错误
    • 对象:不能直接输出,但是可以通过其他方式,Object.values() 等,去解析对象
    • 数组:支持直接输出,默认情况下把数组通过空字符串进行拼接

11:10 课间休息时间,钟老师默默走下楼,随身摸出口袋里最喜欢的“黄鹤楼”,吐云吐雾间,世界美好无限……


  • 11:25 补充完能量的钟老师,精神抖擞的继续开讲 …
  • jsx 属性操作

    • 属性值加了引号,那么就是一个普通的属性书写方式
    • 属性值可以直接写成差值表达式
    • class:在 JSX 中需要使用 className 属性去代替 class
    • style:在 JSX 中 style 的值只能是对象 style={{ property : value }}
    • 注意,注意,这里是大家经常疏漏的地方,看清楚是 {} 中又套了一个{},外边的括号代表插值表达式,里边的括号是对象的括号
  • React 中的循环输出

    • 插值语法只支持表达式,不支持语句,比如 for,if 等
    • 使用 插值表达式计算返回 JSX 结构

12:18 下课,吃饭饭去了!

吃饭萌萌哒

图片来源:妙味 · 上海分部 - 宝龙城楼下的美食城


  • 14:00 休息好的小伙伴们,继续开始学习喽~

  • React 中的组件
    具有独立结构、样式、功能的代码块,我们称之为组件,组件在 React 中有两种形式:

    • 函数式 (调用函数来使用组件)
    • ES6 中的类式
      现在工作中,我们一般都会使用 ES6 中的 class,来进行组件的书写。所以,了解 ES6 中的 class 和 class 的继承很重要。
  • 组件的使用形式
    在 React 中,当我们调用组件的时候,可以把组件直接写成标签的形式,如: <List/>,注意首字母必须大小
  • 父级向子级传递数据
    • 通过标签属性进行传入,如 <List data={data}/>
    • 组件内部通过参数进行接受传入属性和值
    • 函数组件:函数的第一个参数来接收
    • 类组件:通过类下面的 props 属性来接收
    • 在类的构造函数中使用 props 的话,需要通过构造函数的参数进行接收传入
    • 扩展:ES6 箭头函数
      - 案例: 通过数据生成好友列表

通过数据生成好友列表

  • 14:40 各位小伙伴根据思路把案例重新写了一遍。代码就需要多敲,停了再多遍还是需要自己敲一遍去巩固下。

15:10 又到了钟老师补充能量的时候了~


  • 15:25 事件讲解

在 React 中事件和事件绑定与原生的行间事件类似,另外一定要注意事件的 this 问题,这里也是很多初学者容易犯错的地方。

  • 事件名使用驼峰命名:<div onClick={fn}></div>
  • 通常情况下,我们事件绑定的函数写类方法中,通过 this 来调用该方法
  • 事件函数需要注意以下几个问题:
    • 事件函数的 this 默认是 undefined
    • 在事件函数中调用触发该事件的元素的时候,通过 event 的 target/currentTarget 来获取
    • 事件默认行为和冒泡都是通过event对象下的方法来执行的
      • event.preventDefault() : 阻止默认行为
      • event.stopPropagation() : 阻止冒泡
      • 为了能够在事件函数中使用组件的一些数据(props,state)和方法,所以通常情况下,我们会把该函数的this绑定到组件对象上
    • <div onClick={this.fn.bind(this)}></div>
  • state 状态
    • props : 由外部通过属性的方式传入到组件内部的数据,该数据是静态的,只读,不能在组件内部对其进行修改
    • state : 如果我们需要通过一个数据的变化去控制组件的表现行为 - 组件状态,那么 React 为我们提供了一个内部属性:state,这个属性是一个对象,如果我们在组件要用 state 存数据,那么需要在组件的构造函数中进行初始化,如果子组件使用构造函数,那么在子组件的构造函数中就需要手动调用父类的构造函数,组件中使用的 props 需要通过构造函数的参数来接收,state 数据可以在组件内部对其进行修改,当 state 中数据被修改的时候,React 会重新渲染组件视图(结构),但是不能直接给 state 进行赋值,因为这样是不能被 React 监听的,所以我们需要使用 React 为我们提供的一个方法:setState({}) 来对 state 中的值进行修改

- 案例:完善好友列表

好友列表-添加点击

  • 16:20 从事件中的 this 开始,对面向对象不熟悉的同学,已经比较吃力了,所以讲完事件之后,钟老师就停了下来,开始让大家去做东西巩固。其他想要学习 React 的小伙伴们,还是建议学习 React 之前,一定要明白 ES6 中的class 和 基础,再次强调很重要,要不然在组件这里开始,就比较吃力了。

16:30 ~ 16:40 休息一下,大家舒缓一下


  • 16:40 开始整理今天的内容,实现好友列表的最终效果
  • 17:20 钟老师开始大家回顾一天的学习内容,梳理知识难点
  • 18:10 充实的一天到此结束,虽然大家都有些疲惫,但也收获满满,下周六我们继续约起!

再放一组 “萌萌哒” 钟老师~

“萌萌哒”钟老师

本周的课程内容就给大家分享到这里,希望大家可以跟随我们的进度来一块学习React。有什么问题欢迎在 >>【社区】 中和我们交流。


妙味 React 微信讨论群

喜欢 React 的同学可以打开微信扫码入群,和我们一块来学习 React(群人数过多,请加小美微信邀请入群)

妙味 React 讨论群


正在或者准备学习 React 的小伙伴们,不知这篇帖子对您学习 React 有没有帮助?

要不要周末相约妙味课堂、一起与妙味讲师轻松玩转 React + Redux 全家桶,搞定 React 这个 “难堪” 的主流框架呢?

广而告之:

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

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

妙味(2017 年 12 月底)JavaScript 实体班 - 即将开课

详情了解:http://www.miaov.com/index.php/course/coursedetail/cid/34


课程咨询:

咨询QQ:2852509867

微信咨询:miaov-class

电话咨询:010-57269690

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