2-4-组件生命周期

这一节课我们来了解一下 React 组件的生命周期,内容会涉及到一些原理的解释,看不懂也没关系,实际运用的时候只需要记住几个主要的生命周期函数方法(土话其实就叫钩子方法)即可。

  • React是如何渲染组件的
  • 渲染组件时会触发的生命周期方法
    • 挂载流程
    • 更新流程
    • 卸载流程

继续阅读“2-4-组件生命周期”

2-2-组件类型

这一节的内容会比较多,如果是刚刚入门的新同学一时半会儿可能会接受不了,而且基本都属于理论知识。如果你在阅读时发现理解有困难也不需要灰心,可以把本篇教程当作随时可供查阅的文档,等到你在实践中积累了一定的代码量之后再回过头来阅读文章就会感觉非常轻松啦。

  • 元素与组件 Element & Component
  • 函数定义与类定义组件 Functional & Class
  • 展示与容器组件 Presentational & Container
  • 有状态与无状态组件 Stateful & Stateless
  • 受控与非受控组件 Controlled & Uncontrolled
  • 组合与继承 Composition & Inheritance

继续阅读“2-2-组件类型”

1-3-React 开发环境配置

如果我们使用 JSX 语法或 ES6 的新特性,我们编写的 React 代码是无法直接在浏览器中运行的,所以我们需要为 React 专门配置开发环境,用来将 React 代码编译为可以直接在浏览器中运行的代码,或者通过一些工具和库在浏览器中处理我们编写的 React 代码,以使其正确地运行。

继续阅读“1-3-React 开发环境配置”

1-2-npm 的安装配置说明

npm 的安装配置

工欲善其事,必先利其器。在正式学习 React 技术栈之前,我们先来介绍一下之后经常要使用到的 npm.

前端初学者的一大障碍就是 npm 的使用,总是会出现包安装不上或者安装不完整,命令行一大堆 error 或者 warning 看不懂。而绝大多数情况下包安装不好并不是你的错,而是我大清自有国情在此,按照本篇教程设置完你的 npm 之后,至少可以解决你使用 npm 时 90% 的困扰。

继续阅读“1-2-npm 的安装配置说明”

1-1-React 新版本及 ES6 简介

第一节课呢,我们就来简单介绍一下应用在 React 开发当中,属于 ES6 的新的关键字和语法糖,也好为我们之后的学习打下一个基础,当然我更推荐同学们对 ES6 有一个比较全面的了解之后再开始学习 React,不过你也不需要担心,以后在课程中每当遇到涉及 ES6 新语法的问题时,我都会稍作讲解介绍。

这是本教程的第一课,主要内容是 ES6 相关的前置知识介绍,如果你有发现不懂的术语,不需要担心,因为在接下来的教程当中,所有我们提到的术语全部都会涵盖讲解。

当然,我也更希望读者能够主动学习,遇到不懂不会的理解不了的,可以随手去查文档:

MDN JavaScript 参考文档

React 官方中文文档

继续阅读“1-1-React 新版本及 ES6 简介”

从零学习 React 技术栈系列教程

Hello大家好,我是余博伦,在接下来的一段时间里,由我和大家从零开始共同学习React技术栈的相关知识。教程将会以连载的形式发布在我的个人博客和微信公众号上,以文字教程为主,辅以一些代码示例供同学们参考,在连载结束之后,我会将所有内容整理为电子书提供下载。连载时教程会在每日早晨由公众号推送,同时为了方便一些外链和代码示例,可以在本博客查看教程。

作者:余博伦

教程谢绝任何形式转载。

继续阅读“从零学习 React 技术栈系列教程”