从零学习 React 技术栈·理论篇教程简介

Hello大家好，我是余博伦，在接下来的一段时间里，由我和大家从零开始共同学习React技术栈的相关知识。教程将会以连载的形式发布在我的个人博客和微信公众号上，以文字教程为主，辅以一些代码示例供同学们参考，在连载结束之后，我会将所有内容整理为电子书提供下载。连载时教程会在每日早晨由公众号推送，同时为了方便一些外链和代码示例，可以在本博客查看教程。
作者：余博伦​
教程谢绝任何形式转载。
《从零学习 React 技术栈·实战篇》 已在 Gitchat 发布！
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.* 之后的版本的代码也是适用于[email protected]的)新版本当中引入了非常多的 ES6 的新特性，所以代码看起来和我们以前习惯的 jQuery 风格代码会有很多的不同。
在正式学习 React 技术栈之前，推荐你最好掌握一些 ES6 的基本语法，例如箭头函数、Class类、let、const等一些新的声明变量的方法等等，当然如果你不了解也别担心，在接下来的教程当中，每当涉及到这些新的语法时，我也会稍作简介。
​JavaScript 参考文档​
教程主要内容介绍
教程主要会分为六个部分进行讲解，在简要的基础知识准备和开发环境搭建之后，我们会分别对React/Redux/react-router的关键知识点进行学习，之后我们还会介绍到如何在React应用中编写样式，在最后一个部分，我们将一同实现一个运用上述React技术栈实现的Todolist应用。
在第一部分我们将会一同学习本教程的主角，也就是如何使用React。在这一部分当中，我们不光会介绍如何编码，也会讲解React当中一些关键的原理，以及在开发过程中运用到的 的一些最佳实践等内容。
接下来我们会一同学习Redux的使用，首先我会帮助大家理解状态管理到底是一个什么样的概念，之后会依次介绍redux当中几个关键的概念如何实现，如何编写以及如何运用。
再然后呢，我们会介绍到前端路由的概念。react技术栈当中，有一个非常棒的库，react-router来实现前端路由的功能，比较特殊的是，这个库目前以及发行到了4.0版本，而之前的版本也都在维护，各个大版本之间有比较多的变化，一些比较细节的内容，即使是它的官方文档也没有写清楚。我在这里呢，会着重教给大家最新版的使用方法，以及一些官方文档都没有提到的配置方法和小技巧。
我们还会学习到如何在 React 应用中开发编写样式，在这里部分，我会介绍几种比较主流流行的解决方案供大家参考，你可以在日后正式的工作当中，自行选取你觉得最为合适的开发样式的方法。
在教程的最后一个部分，我们将会学习到开发Rect应用的一般思路，以及利用之前学过的知识一同实现一个TodoList应用。
有的同学呢可能还会有一些疑问，比方说，现在还有一些别的很流行的框架，为什么我非得选 React 不可呢？
首先，React 相较于其他框架，其生态圈发展最为完整成熟，有非常多现成的完整的解决方案。并且它适用于大中型应用的开发，便于团队中多人之间协作，很多大厂就在正式的项目中使用了 React，并且学会 React 之后，你的能力将不止局限于浏览器之中，React还可以拓宽到开发原生应用，以及刚刚发布的ReactVR虚拟现实，甚至是物联网等各个领域。
为什么会有这个系列教程？
互联网上什么都有，杂乱无章。信息太多，相当于没有信息，选择太多，相当于没有选择。React 的中文资源比较少，大多数都已经过时，使用的是一两年前的版本，跟不上官方的版本更迭，且有一些中文资料由于翻译的不准确存在一些知识性的错误，很有可能会误导初学者。
中文的学习资源还是太少，而且良莠不齐。国内前端学习者普遍英文水平还不够，况且现在前端发展这么快，等学好英语考过四六级，说不定 React 已经过气了。
另外，网上还没有综合 React 技术栈所有库的最新版本的教程和代码示例。一些教程虽然非常优秀，但随着 React 及相关库的新版本发布，这些教程已经过期，甚至提供的示例代码已经不能正常运行了。
本教程相较其他React学习资源的优点在哪里？
我在准备教程的过程中查阅大量资料，综合了国内外所有优秀的 React 学习资源，萃取其中最精华的知识点，选择最为流行的 React 技术栈，立足最新版本的官网文档，在帮助新手入门上手的同时，也会对一些重要的知识概念进行讲解，满足初级、中级各个学习阶段和水平的同学。
全部采用当前发布的正式版本库进行教学，确保我用起来是这个样子，你学完之后用起来也是这个样子。
本教程的前置知识
想要学习本教程的同学最好对 JavaScript 基础知识、ES6 新特性等相关内容掌握了解。熟悉 JavaScript 中变量、对象、函数等基本概念，ES6 中const/class/箭头函数/解构赋值等新语法的基本使用。本教程 90% 的内容为 JavaScript 相关知识，学习者仅需熟悉基础的 HTML/CSS 即可。
本教程使用的框架版本及软件依赖
框架及库
[email protected]
[email protected]
[email protected]
软件及工具
npm/cnpm
webpack
create-react-app
codepen/codepan
vs code
chrome
​VS Code React技术栈代码补全插件​
代码示例
​React on Codepen​
​react-router on Codepen​
​Redux on Codepen​
​React Demo Project on Github​
学习资源
​React官方中文文档​
​余博伦个人博客​
​知乎专栏·从零学习React技术栈​
​知乎专栏·LeanReact​
​知乎专栏·pure render​
Next - Preparation
1-1-React 新版本及 ES6 简介
Last modified 2yr ago
Copy link
On this page
教程主要内容介绍
为什么会有这个系列教程？
本教程相较其他React学习资源的优点在哪里？
本教程的前置知识
本教程使用的框架版本及软件依赖