每周三集前端免费视频
每年帮助超100万前端爱好者学习

React免费视频教程-入门和组件 (共11集)

第01节:React课程介绍

课程前言:

这节课是通过微信群里的小伙伴投票的最终结果,这是一整套视频,包括React基础、React全家桶、React Native,都会讲到,但是会分开文章,这样大家可以更容易的查找。

本文的基础视频是全部免费观看的,只要你登录jspang.com官方网站就可以免费观看视频,视频教程放在腾讯视频上,如果你想看离线版本(百度网盘)和小伙伴们一起交流React学习知识,可以进行打赏进微信群(打赏方法看网站右侧),群公告里有网盘地址。

更新频率:

由于录课只能在下班后进行,并不是专职的老师,一节课从备课到录制完成,上传网络大概需要5个小时左右。

所以一周只能更新2-3集(每节课程10-20分钟),希望小伙伴们多谅解。

教程特点

我们常看到的React教程,上来就是构建复杂的环境,webpack,ES2015技术等繁华的技术所遮掩,其实React的核心是简单和简洁的。我们教程也会从最简朴的方式开始教学,让大家了解React的基本思想和方法。只有了解这些,你在实际工作中才可以减少出错,增加排查错误的能力。

React学习Vip微信群:

如果你想找到共同学习的小伙伴,并且在整个学习过程中跟技术胖一起交流(每天保证10-30分在线回答问题)。可以打赏28元后,加技术胖好友发送打赏截图,技术胖拉你入群。(录课开源不易,谢谢大家支持)

打赏文章后你能得到:

  1. 跟学习React的小伙伴一起互动学习,一起交流,技术胖并邀请一线互联网公司React大神入群和大家一同进步。
  2. 技术胖每天10-30分钟的课程问题解答,解决你学不会的问题,保证可以学会。
  3. 你的名字将留在这篇文章里,第一是表示技术胖对你的感谢,第二是你学习的见证。
  4. 如果打赏超过100人,技术胖在课程结束后以抽奖方式送出5本价值69元《React前端技术与工程实践》,并亲自手写感谢寄语。

前置知识:

如果你想学习本套课程还是有一定的门槛的,你需要有下面两个个基础知识。

  • HTML+CSS:你需要会基本的html和css知识,如果你做过一年的布局工作,学习起来会更加容易。
  • JavaScript:需要扎实的JS功底,因为在React中的组件都会用到JS编写,所以你JS基础越好,学习起来越容易。

React简介:

React起源于Facebook的内部项目,该公司积极尝试引入HTML5技术用来架设Instagram网站,开发中发现HTML5的性能下降明显,达不到预期的效果。他们就自己开发了React框架。

ReactJS官方地址:https://facebook.github.io/react/

GitHub地址:https://github.com/facebook/react

react特点:

  • 虚拟DOM: React也是以数据驱动的,每次数据变化React都会扫码整个虚拟DOM树,自动计算与上次虚拟DOM的差异变化,然后针对需要变化的部分进行实际的浏览器DOM更新。
  • 组件化: React可以从功能角度横向划分,将UI分解成不同组件,各组件都独立封装,整个UI是由一个个小组件构成的一个大组件,每个组件只关系自身的逻辑,彼此独立。
  • 单项数据流:React设计者认为数据双向绑定虽然便捷,但在复杂场景下副作用也是很明显,所以React更倾向于单向的数据流动-从父节点传递到子节点。(使用ReactLink也可以实现双向绑定,但不建议使用)

第02节:环境搭建和HelloWorld程序

如果不考虑工程化的问题,React的运行基础环境非常简单,只需要在HTML文件中引入两个js文件(react.min.js和react-dom.min.js)即可开始工作。

搭建开发环境

下载所需文件

首先我们访问 https://facebook.github.io/react/,在页面中单击网页左上角的React版本(课程录制时是v15.6.1)。点击后下载两个文件。

  • react.js:实现React核心逻辑,且于具体的渲染引擎无关,从而可以跨平台公用。如果应用要迁移到React Native,这一部分逻辑是不需要改变的。
  • react-dom.js:包含了具体的DOM渲染更新逻辑,以及服务端渲染的逻辑,这部分就是与浏览器相关的部分了。

下载时你需要有科学上网环境,这里不作过多介绍。如果你不会科学上网,可以直接在我网站上进行下载( 点击下载)。下载好后,你只需要在你HTML中引入这两个文件就可以编写React代码了。

Hello World程序

按照国际惯例,学习一个新程序知识都要写HelloWorld的。我们先动手把这个程序敲出来,然后再讲解。建立工程文件夹,这里假定为d:/react_demo.视频中使用的代码编辑工具是VSCode,你可以用其它你习惯的编辑器(如果你是前端新手,建议使用和视频中一样的编辑器,这样可以保证操作一致)。

React.createClass

它的作用是注册一个组件类HelloComponent,这个组件类只包含一个render函数,该函数通过调用React.createElement实现了以下HTML内容:

ReactDOM.render()

ReactDOM.render是React的最基本方法,用于将模板转为HTML语言,并插入指定的DOM节点。

总结:听完视频或者看完文章,一定要动手做出我们的Hello World程序。有个好的开始,下节课我们将学习JSX的知识。

第03节:初识JSX语法

JSX即Javascript XML,它使用XML标记来创建虚拟DOM和声明组件。第02节的HelloWorld程序从本质上能完成所有的工作。只是有一些开发效率问题,比如JavaScript代码与标签混写在一起、缺乏模板支持等。而使用JSX,则可以有效解决这些问题。

加入JSX语法支持

如果要使用JSX语法的支持,你可以使用Babel来进行转换,但是为了讲解方便我们这里直接引入Babel的核心文件 browser.min.js。你可以去网上提供的静态资源库引用(http://www.bootcdn.cn/),也可以自己下载。

重写HelloWorld

上节课写的HelloWorld程序,这节课我们用JSX的方式进行重写。

通过上边的代码你可以发现JSX的好处。

  • 可以使用熟悉的语法仿照HTML来定义虚拟DOM。
  • 程序代码更加直观。
  • 于JavaScript之间等价转换,代码更加直观。

JSX中的表达式

JSX是支持表达式的,你只要使用{}括号,就可以使用表达式了。我们把HelloWorld程序改写成使用表达式的。

我们把上边的程序改写成带表达式的形式。

需要注意的是表达式不支持if…else这样的语句,但是支持三元运算符和二元运算符。

第04节:进阶JSX语法

上节课我们已经对JSX语法有了一定的了解,这节课我们再深入了解一下,作两个复杂一点的例子。目的是大家充分理解JSX的知识,并加以练习和熟悉。

JSX上的数组输出

使用JSX输出数组是有些小坑需要迈过的,在两年前我自学React时,没人指导,那时候中文的教程也很少,所以会迈一些坑,我觉的我教程的价值也是帮助大家卖坑,有些坑你在看文档是经常会跌入迈不出来。

上边的代码,我们使用了ES6的语法maps来进行进行循环,循环时需要注意的是,新版本的React需要使用key,如果没有key虽然会出来效果,但是控制台会包错。key的作用是生成虚拟DOM时,需要使用key来进行标记,DOM更新时进行比较。

数组中的JSX

我们上边的例子是循环数组的内容到JSX中,其实在数组中可以直接使用JSX语法,看下面的例子。

JSX允许直接在模版插入JavaScript变量。如果这个变量是一个数组,则会展开这个数组的所有成员。

总结:通过两节课的我们对JSX有了初步认识,虽然React可以不使用任何其他插件,但是JSX的好处太多,React也鼓励使用,在实际工作中也是百分百使用的,所以以后的课程中我们都会使用JSX。

第05节:React组件:state成员

从前面的课程中,已经初步认识了组件,但是并没有进行详细讲解,从这节课开始用3-5节课的时间,具体讲一下React组件的作用。React组件可以把它看作带有props属性集合和state状态集合并且构造出一个虚拟DOM结构的对象。

state成员

组件总是需要和用户互动的。React的一大创新,就是将界面组件看成一个状态机,用户界面拥有不同状态并根据状态进行渲染输出,用户界面和数据始终保持一致。开发者的主要工作就是定义state,并根据不同的state渲染对应的用户界面。

setState()

通知React组件数据发生变化的方法是调用成员函数setState(data,callback)。这个函数会合并data到this.state,并重新渲染组件。渲染完成后,调用可选的callback回调。(大部分情况下不需要调用回调,因为React会负责把界面更新到最新状态)

动手敲个小例子

我们用一个小例子来了解一下状态机的机制。该例子包含一个文本框和一个按钮,单击按钮可以改变文本框的编辑状态:禁止编辑或允许编辑。

程序中需要注意的点

  1. getInitialState函数必须有返回值,可以是null,false,一个对象。
  2. 访问state数据的方法是”this.state.属性名”。
  3. 变量用{}包裹,不需要再加双引号。

第06节:React组件:props和render成员

props是组件固有属性的集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的。属性的初识值通常由React.createElement函数或者JSX中标签的属性值进行传递,并合并到组件实例对象的this.props中。

props实例

这里一点点写一个真实的props程序,并让大家更加了解如何定义props。

我们不应该修改props中的值。事实上,如果要在组件外更改也是一个很麻烦的事,需要找到组件实例,这没有必要。在设计组件时,就要想好组件哪些使用state,哪些使用props集合,那些使用state集合。通常固定的组件内只读的、应由父组件传递进来的属性适合放在props集合中,如组件的类名、颜色、字体、事件响应回调函数等。

props与state的区别

props不能被其所在的组件修改,从父组件传递进来的属性不会在组件内部更改;state只能在所在组件内部更改,或在外部调用setState函数对状态进行间接修改。

render成员函数

首先说render是一个函数,它对于组件来说,render成员函数是必需的。render函数的主要流程是检测this.props和this.state,再返回一个单一组件实例。

render函数应该是纯粹的,也就是说,在render函数内不应该修改组件state,不读写DOM信息,也不与浏览器交互。如果需要交互,应该在生命周期中进行交互。

第07节:React组件:生命周期

一个组件完整的生命周期包含实例化阶段、活动阶段、销毁阶段三个阶段。每个阶段又由相应的方法管理。

过程中涉及三个主要的动作术语:

  • mounting:表示正在挂接虚拟DOM到真实DOM。
  • updating:表示正在被重新渲染。
  • unmounting:表示正在将虚拟DOM移除真实DOM。

每个动作术语提供两个函数:

  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentDidUpdate(object prevProps, object prevState)
  • componentWillUnmount()

 

实例编写

通过一个简单的实例,来看React组件的生命周期。

这个案例在每个生命周期里都加入了输出语句,我们可以打开控制台看代码的执行过程。

第08节:React组件小实例-必做练习

在了解了基本的钩子函数后,我们再作一个跟生命周期有关的小效果,进一步了解生命周期的用途。练习这个案例还可以对React的State和props有更深入的了解。这个案例是自定义一个组件,并把组件进行不断闪烁,形成一种动画形式。

第09节:React组件:this.props.children

this.props对象的属性与组件的属性一一对应,但有一个例外,就是this.props.children属性。它表示组件的所有子节点。

子节点

组件经常会写入很多子属性,就像我们HTML当中的<ul>下,一定有很多<li>标签。这种子属性的需求,就要用到this.props.children属性。

上面代码的NoteList组件有两个span子节点,他们都可以通过this.props.children读取。这里需要注意,this.props.children的值有三种可能,如果当前组件没有子节点,他就是undfined;如果有一个子节点,数据类型是object;如果有多个子节点,数据类型就是array。所以处理this.proprs.children的时候要小心。

第10节:React组件:props属性验证

组件的属性是可以接收任何值的,但有时候我们希望对外界父级组件传递进来的属性数据进行限定,比如希望name属性不能缺少、onClick属性必须是函数类型等,这对确保组件被正确使用非常有意义。为此React引入了propTypes机制。React.PropTypes提供各种验证器(validator)来验证传入数据的有效性。当向props传入无效数据时,React会在JavaScript控制台抛出警告。

PropsTypes

我们来作一个小列子,看一下PropTypes的用法。

上面的代码,我们创建了一个组件,组件里有一个title属性。PropTypes告诉React,这个title属性是必须的,而且它的值必须是字符串。而我们在程序中却给它设置为数值。打开浏览器控制台你可以看到报错信息。

更多的PropTypes的设置,可以查看官方文档

getDefaultProps默认值设置

使用getDefaultProps方法可以用来设置组件属性的默认值。

浏览器这时候显示的是Hello World。

第11节:React组件:获取真实DOM节点

React中的DOM也是虚拟DOM(virtual DOM),这点跟我们以前讲的Vue非常类似。只有当它插入文档以后,才会变成真实的DOM。React也是在虚拟DOM发生变化时,进行比对后,只渲染变化的部分,它是React极高性能的主要原因之一。

但是有时候我们需要从组件中获取真实的DOM节点,来进行业务逻辑的编写,React为我们提供了ref属性。下面我们通过一个实例来了解Ref的用法。

这个案例很简单,就是有一个文本框,当你点击按钮时,光标定位到文本框里。这时就必须获取真实的DOM节点,虚拟DOM是拿不到用户输入的。为了做到这一点,文本框必须有一个ref属性,用this.refs.xxx就可以返回真实的DOM节点。

注意:

由于this.refs.[refName]属性获取的是真实DOM,所以必须得到虚拟DOM插入文档以后,才能使用这个属性,否则会报错。

 

 

未经允许不得转载:技术胖-胜洪宇关注web前端技术 » React免费视频教程-入门和组件
分享到: 更多 (0)

评论 42

  1. #27

    希望可以看到node的视频,谢谢胖哥

    匿名7天前回复
  2. #26

    如果按照React的官方文档来讲那就非常好了

    匿名2个月前 (03-22)回复
  3. #25

    看完还是不是很理解

    匿名2个月前 (03-22)回复
  4. #24

    React.createClass is not a function。 用的最新的react 16 就报错了 第二节课的 hello world的示例

    匿名4个月前 (01-07)回复
  5. #23

    那个属性的验证 props属性验证 ,propTypes有其他的验证方式吗?用正则之类的

    匿名5个月前 (01-03)回复
  6. #22

    去腾讯看 搜不出来啊、搜什么名字啊?胖哥

    匿名5个月前 (12-21)回复
    • 不建议去腾讯看啊,给胖胖增加点流量吧。

      技术胖5个月前 (12-21)回复
  7. #21

    胖老师,React.createClass()已经弃用了,开始我整了很久才用上

    匿名5个月前 (12-13)回复
    • 后边我有讲的,确实已经不使用了。感谢你的建议。

      技术胖5个月前 (12-14)回复
  8. #20

    胖老师,请问,react native 你会在后期的课程中录制吗?谢谢!

    匿名6个月前 (12-02)回复
    • 会录制的,不过可能要等上几个月的时间,因为不是专职讲师,只能业余时间录课。非常抱歉。

      技术胖6个月前 (12-02)回复
  9. #19

    胖哥 getInitialState不是很早之前就弃用了吗

    掌柜。7个月前 (10-26)回复
  10. #18

    讲的很好,谢谢胖哥

    wayne8个月前 (09-12)回复
  11. #17

    问一下,讲完了?????
    什么时间出一个项目版的????

    小江9个月前 (09-05)回复
  12. #16

    感谢胖哥,在这学到好多东西~

    励志一生9个月前 (08-24)回复
    • 非常高兴你能在这里学到东西,也希望你继续支持技术胖。

      技术胖9个月前 (08-24)回复
  13. #15

    完美!

    谢耳朵9个月前 (08-22)回复
  14. #14

    胖哥 看到你的东西 真的觉得 自己还有好多 东西要学!!!我会努力的!

    小米9个月前 (08-21)回复
    • 谢谢你一直一来的支持,让我们共同努力。

      技术胖9个月前 (08-21)回复
  15. #13

    难以置信啊。。。。
    之前就是看vue文档和技术胖的视频以及github项目来写了一个比较完整的vue项目。
    然后今天真的是突发奇想不如入门一下react吧

    但是react在网上的资源确实比vue要少,或者说是没那么容易弄懂吧

    然后就去找文档和阮一峰的教程了。。。

    看着看着想起技术胖的博客,上次来的时候是教weex,当时不太感兴趣就逃了。
    现在回来一看,哈哈,好巧啊,恰好是我想要的!

    最后感谢技术胖~

    gyt959个月前 (08-18)回复
    • 谢谢你能记得技术胖的博客,最近都会更新React的视频教程,请有空就来学习一下,可以加入QQ群,群里有最新视频更新信息,能帮助你更好的学习。

      技术胖9个月前 (08-18)回复
  16. #12

    已经参加了众筹,也添加了私人微信,等待回复中!

    一曲秦殇9个月前 (08-17)回复
    • 已经加入,有时候工作忙,会在晚上或者中午吃饭时才看手机,有些延误,非常抱歉。

      技术胖9个月前 (08-17)回复
  17. #11

    为什么还用一年前都不推荐的方式讲解呢,建议es6吧,script引入的方式,太不推荐了。学以致用,真实项目没有这样搞的

    Lee9个月前 (08-17)回复
    • 如果有些小伙伴不会ES6那,我希望照顾所有小伙伴,让他们容易入手。

      技术胖9个月前 (08-17)回复
    • 我也觉得,而且技术胖其实之前都写了es6教程了。

      119个月前 (08-18)回复
  18. #10

    公司刚好要用react native了,真是及时雨啊,感谢胖老师!

    hking9个月前 (08-16)回复
  19. #9

    感动!

    黑胖9个月前 (08-16)回复
  20. #8

    我还是比较青睐于胖哥你的Node教程或者其他后台的教程,!

    夏雨9个月前 (08-16)回复
    • 以后会出的,谢谢你一直的支持。

      技术胖9个月前 (08-16)回复
  21. #7

    哈哈,看到群公告就过来了,支持Jspang。

    技术渣9个月前 (08-16)回复
  22. #6

    前天还在看你有没有react的视频,今天就出来了,大爱

    hawk9个月前 (08-16)回复
    • 嗯,今天会更新第二节。希望一起学习进步。

      技术胖9个月前 (08-16)回复
  23. #5

    沙发

    deon9个月前 (08-16)回复
  24. #4

    拥抱胖哥

    gss9个月前 (08-15)回复
    • 谢谢支持,我会更加努力的录课回报大家。

      技术胖9个月前 (08-15)回复
  25. #3

    超级棒!

    wxq9个月前 (08-15)回复
    • 谢谢你的支持,视频还在录制中,你算前排了。

      技术胖9个月前 (08-15)回复
  26. #2

    6 啊我的胖哥

    哈哈9个月前 (08-15)回复
  27. #1

    爱你技术胖

    小刘同志9个月前 (08-15)回复