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

发布于 余博伦

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

从零学习 React 技术栈

React 是由 Facebook 主导开发的一个 JavaScript 框架。其实它和之前一些流行过的 MVVM 框架,例如 Angular 不同,React 主要只专注于 MVC 中的 V,也就是视图层。React 是当前最流行的,专门用来构建前端UI界面的框架。

React 的优点是它很快、很轻。并且它组件化的思想在开发构建界面时也对我们有很大的帮助,React 风格的代码,在我们学过之后就会了解到,它这种很规范化的写法,在一个需要共同开发协作的项目组或团队中,也是非常有益处的。

就好像100个人写 jQuery 就可能会有100种写法,但是不管让谁来写 React 组件,我们都能保证他写出来的代码和标准是差不多的。

所以假如你对 JavaScript 已经有了相当的掌握,想要学习框架来开发一些Web应用的话,选择 React 准是没错的。

现在的 React 已经不仅仅是一个框架,它逐步发展成了一个非常庞大的生态体系。

本教程会介绍React全家桶当中最为通用流行的一些框架和库,内容主要涉及到 React/React-router/Redux 这几个库,通过学习呢,在教程的结尾我们将能够开发完成一个利用上述三个工具库实现的 TodoList 应用。

现在你去看React官网文档,或者一些比较新的 React 教程,我们在书写 JavaScript 的时候呢,都已经开始采用 ES6 的语法,这些语法乍看起来可能会比较陌生。不过实际上,ES6实现的语法糖和一些新的方法 是能够极大地方便我们的编码的。

教程使用的是目前React发行的最新版本(v15.6.1,同时 v15.5.* 之后的版本的代码也是适用于React@16的)新版本当中引入了非常多的 ES6 的新特性,所以代码看起来和我们以前习惯的 jQuery 风格代码会有很多的不同。

在正式学习 React 技术栈之前,推荐你最好掌握一些 ES6 的基本语法,例如箭头函数、Class类、let、const等一些新的声明变量的方法等等,当然如果你不了解也别担心,在接下来的教程当中,每当涉及到这些新的语法时,我也会稍作简介。

教程主要内容介绍

教程主要会分为六个部分进行讲解,在简要的基础知识准备和开发环境搭建之后,我们会分别对 React/Redux/react-router 的关键知识点进行学习,之后我们还会介绍到如何在 React 应用中编写样式,在最后一个部分,我们将一同实现一个运用上述 React 技术栈实现的 Todolist 应用。

在第一部分我们将会一同学习本教程的主角,也就是如何使用 React。在这一部分当中,我们不光会介绍如何编码,也会讲解 React 当中一些关键的原理,以及在开发过程中运用到的 的一些最佳实践等内容。

接下来我们会一同学习 Redux 的使用,首先我会帮助大家理解状态管理到底是一个什么样的概念,之后会依次介绍 Redux 当中几个关键的概念如何实现,如何编写以及如何运用。

再然后呢,我们会介绍到前端路由的概念。React 技术栈当中,有一个非常棒的库,react-router 来实现前端路由的功能,比较特殊的是,这个库目前以及发行到了4.0版本,而之前的版本也都在维护,各个大版本之间有比较多的变化,一些比较细节的内容,即使是它的官方文档也没有写清楚。我在这里呢,会着重教给大家最新版的使用方法,以及一些官方文档都没有提到的配置方法和小技巧。

我们还会学习到如何在 React 应用中开发编写样式,在这里部分,我会介绍几种比较主流流行的解决方案供大家参考,你可以在日后正式的工作当中,自行选取你觉得最为合适的开发样式的方法。

在教程的最后一个部分,我们将会学习到开发 React 应用的一般思路,以及利用之前学过的知识一同实现一个 TodoList 应用。

有的同学呢可能还会有一些疑问,比方说,现在还有一些别的很流行的框架,为什么我非得选 React 不可呢?

首先,React 相较于其他框架,其生态圈发展最为完整成熟,有非常多现成的完整的解决方案。并且它适用于大中型应用的开发,便于团队中多人之间协作,很多大厂就在正式的项目中使用了 React,并且学会 React 之后,你的能力将不止局限于浏览器之中,React还可以拓宽到开发原生应用,以及刚刚发布的ReactVR虚拟现实,甚至是物联网等各个领域。

为什么会有这个系列教程?

互联网上什么都有,杂乱无章。信息太多,相当于没有信息,选择太多,相当于没有选择。React 的中文资源比较少,大多数都已经过时,使用的是一两年前的版本,跟不上官方的版本更迭,且有一些中文资料由于翻译的不准确存在一些知识性的错误,很有可能会误导初学者。

中文的学习资源还是太少,而且良莠不齐。国内前端学习者普遍英文水平还不够,况且现在前端发展这么快,等学好英语考过四六级,说不定 React 已经过气了。

另外,网上还没有综合 React 技术栈所有库的最新版本的教程和代码示例。一些教程虽然非常优秀,但随着 React 及相关库的新版本发布,这些教程已经过期,甚至提供的示例代码已经不能正常运行了。

本教程相较其他React学习资源的优点在哪里?

我在准备教程的过程中查阅大量资料,综合了国内外所有优秀的 React 学习资源,萃取其中最精华的知识点,选择最为流行的 React 技术栈,立足最新版本的官网文档,在帮助新手入门上手的同时,也会对一些重要的知识概念进行讲解,满足初级、中级各个学习阶段和水平的同学。

全部采用当前发布的正式版本库进行教学,确保我用起来是这个样子,你学完之后用起来也是这个样子。

本教程的前置知识

想要学习本教程的同学最好对 JavaScript 基础知识、ES6 新特性等相关内容掌握了解。熟悉 JavaScript 中变量、对象、函数等基本概念,ES6 中const/class/箭头函数/解构赋值等新语法的基本使用。本教程 90% 的内容为 JavaScript 相关知识,学习者仅需熟悉基础的 HTML/CSS 即可。

本教程使用的框架版本及软件依赖

框架及库

软件及工具

代码示例

学习资源

欢迎关注 余博伦 微信公众号

余博伦

知乎专栏【从零学习前端开发】作者,FreeCodeCamp中国发起人,React中文社区布道师。致力于为前端初学者提供良心的干货、暖心的教程、真心的分享。微信公众号 yunote。

如需转载,烦请注明出处:https://www.fedev.cn/react/react-learn-1.htmlAir Jordan IV 4 Shoes