前端开发者学堂 - fedev.cn

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

#JavaScript#React#从零学习 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