React基础共11篇
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
第03节:初识JSX语法-微看VCAN

第03节:初识JSX语法

JSX即Javascript XML,它使用XML标记来创建虚拟DOM和声明组件。第02节的HelloWorld程序从本质上能完成所有的工作。只是有一些开发效率问题,比如JavaScript代码与标签混写在一起、缺乏模板支持...
第04节:进阶JSX语法-微看VCAN

第04节:进阶JSX语法

上节课我们已经对JSX语法有了一定的了解,这节课我们再深入了解一下,作两个复杂一点的例子。目的是大家充分理解JSX的知识,并加以练习和熟悉。 JSX上的数组输出 使用JSX输出数组是有些小坑需要...
第05节:React组件——state成员-微看VCAN

第05节:React组件——state成员

从前面的课程中,已经初步认识了组件,但是并没有进行详细讲解,从这节课开始用3-5节课的时间,具体讲一下React组件的作用。React组件可以把它看作带有props属性集合和state状态集合并且构造出...
第06节:React组件——props和render成员-微看VCAN

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

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

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

一个组件完整的生命周期包含实例化阶段、活动阶段、销毁阶段三个阶段。每个阶段又由相应的方法管理。 过程中涉及三个主要的动作术语: mounting:表示正在挂接虚拟DOM到真实DOM。updating:表示正...
第08节:React组件小实——必做练习-微看VCAN

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

在了解了基本的钩子函数后,我们再作一个跟生命周期有关的小效果,进一步了解生命周期的用途。练习这个案例还可以对React的State和props有更深入的了解。这个案例是自定义一个组件,并把组件进...
第09节:React组件:this.props.children-微看VCAN

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

this.props对象的属性与组件的属性一一对应,但有一个例外,就是this.props.children属性。它表示组件的所有子节点。 子节点 组件经常会写入很多子属性,就像我们HTML当中的<ul>下,一定...
第10节:React组件:props属性验证-微看VCAN

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

组件的属性是可以接收任何值的,但有时候我们希望对外界父级组件传递进来的属性数据进行限定,比如希望name属性不能缺少、onClick属性必须是函数类型等,这对确保组件被正确使用非常有意义。为...
第11节:React组件:获取真实DOM节点-微看VCAN

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

React中的DOM也是虚拟DOM(virtual DOM),这点跟我们以前讲的Vue非常类似。只有当它插入文档以后,才会变成真实的DOM。React也是在虚拟DOM发生变化时,进行比对后,只渲染变化的部分,它是Reac...
第01节、认识React-微看VCAN

第01节、认识React

我们常看到的React教程,上来就是构建复杂的环境,webpack,ES2015技术等繁华的技术所遮掩,其实React的核心是简单和简洁的。我们教程也会从最简朴的方式开始教学,让大家了解React的基本思想和...
第02节、React环境搭建和HelloWorld程序-微看VCAN

第02节、React环境搭建和HelloWorld程序

如果不考虑工程化的问题,React的运行基础环境非常简单,只需要在HTML文件中引入两个js文件(react.min.js和react-dom.min.js)即可开始工作 1、 搭建开发环境 下载所需文件 首先我们访问https:...