如何从零学习 React 技术栈

为什么要学习 React?

首先，React 相较于其他框架，其生态圈发展最为完整成熟，有非常多现成的、完整的解决方案。

其次，它适用于大中型应用的开发，便于团队中多人之间协作，很多大厂都在正式的项目中使用了 React。

在学会 React 之后，你的能力将不止局限于浏览器，React 还可以拓宽到使用 React Native 开发原生应用，以及使用 ReactVR 开发虚拟现实等各个领域。

通过本课程可以学到什么？

本课程共六篇文章，除了示例代码的讲解之外，还会对个别核心概念的原理进行讲解介绍，并用实际案例 TodoList 应用来展示。

在课程最后我还会分享一篇学习 React 的心得体会。

课程内容

第01课：实战篇导读

什么是 React ？

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

React 的优点是它很快、很轻。并且它组件化的思想在开发构建界面时也对我们有很大的帮助。当学过 React 之后你会发现，它这种规范化的写法，对于一个需要共同开发协作的项目组或团队是大有裨益的。

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

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

为什么要学习 React?

看到这个课程介绍，有些同学可能会有疑问：现在有很多流行的框架，为什么我非得选 React 不可呢？

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

这个课程可以学到什么？

早些时候我在网络上连载了《从零学习 React 技术栈·理论篇》的系列教程。理论篇的教程可以在我的个人公众号或者博客查看：

余博伦博客
余博伦微信公众号

作为理论知识的实践补充，我又设计了《从零学习 React 技术栈·实战篇》，以 GitChat 达人课的形式来展现。本课程共六篇文章，除了示例代码的讲解之外，还会对个别核心概念的原理进行讲解介绍，并用实际案例 TodoList 应用来展示。在课程最后还会分享一篇我学习 React 的心得体会。

课程大纲如下：

01-设计原型
02-开发准备
03-组件开发
04-样式编写
05-数据处理
06-路由配置

每个课时对应的项目源码可以在这里查看：

React Todo Demo on Github

本课程的优势是？

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

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

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

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

教程使用的是目前 React 发行的最新版本，新版本当中引入了非常多的 ES6 的新特性，所以代码看起来和我们以前习惯的 jQuery 风格代码会有很多的不同。

在正式学习 React 技术栈之前，推荐你最好掌握一些 ES6 的基本语法，例如箭头函数、Class类、let、const等一些新的声明变量的方法等等。

MDN JavaScript 参考文档

本课程的设计初衷？

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

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

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

本教程的前置知识？

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

另外在正式学习《从零学习 React 技术栈·实战篇》教程内容之前，你最好已经阅读过了《从零学习 React 技术栈·理论篇》的内容，并尝试编写过其中的示例。

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

框架及库

react@16.0.0
redux@3.7.2
react-router@4.2.0

软件及工具

npm/cnpm
webpack
create-react-app
Codepen/Codepan
Chrome
vs code
VS Code React 技术栈代码补全插件

代码示例

React on Codepen
react-router on Codepen
Redux on Codepen
React Demo Project on Github
React Todo Demo on Github

学习资源

React官方中文文档
余博伦个人博客

第02课：设计原型

第03课：开发准备

第04课：组件开发

第05课：样式编写

第06课：数据处理

第07课：路由配置

第08课：我是如何学习 React 技术栈的

阅读全文: http://gitbook.cn/gitchat/column/59ae12fdbc511269a95f9616