转自：  https://www.jianshu.com/p/de421e0db710 

 

这段时间因为项目的原因，要做web前端，趁此机会调研了一下当前前端的技术，根据调研的结果，React毫无疑问是现在的NO.1，遂决定入坑学一下React。

工欲善其事必先利其器，搜集整理网上资料制定了一个学习React的基础路线，希望能帮助自己快速的入门React。也跟大家分享一下。

文章大纲如下：

1 React学习“8”步走
2 学习资料总结

First of all

为了稳固基础，这个React学习的基础路线，我们一定要逐步地来进行学习。

不要想着通过接触 React 来将 ES6 + Webpack + Babel + React + Routing + AJAX 这些知识一次性学好。

欲速则不达！

在文章的最后，我将一些相应的资料也做了相应的罗列，大家可以根据自己的需求查看、下载。

1 React学习“8”步走

第0步：JavaScript

在学习之前的你，理应对 JavaScript 有所了解，或至少是 ES5 标准下的 JavaScript。可若了解甚少，那么，你就应该停下手头上的工作，学习好该基础部分后，才可迈步前行。

可倘若早已熟知 ES6 所带来的新特性，那么请继续。因为如你所料，React 的 API 接口在 ES5 和 ES6 两标准间存在着较大的差异性。所以对于你来说，熟悉两种标准其特性的不同至关重要。尽管发生了异常，你也可以通过两种标准之间的转换，寻找出广泛有效的答案。

第0.5步：NPM

NPM 在 JavaScript 世界中，可谓是软件管理方的王者。然而，在这里你却并不需要学习太多关于 NPM 自身的东西。只要在安装好后连同 Node.js，学习如何使用其安装软件即可。

npm install

第1步：React

学习一个新的编程技术，我们往往会从熟悉的Hello World教程开始。首先，我们可以通过使用 React 官方教程所展示的原生 HTML 文件来实现，而该文件包含有一些 script 标签。其次，我们还可以通过使用像 React Heatpack 这样的工具来快速上手。

第2步：构建后摒弃

一旦你完成了 “Hello World” 的基础课程，你将如何去学习 ”think in React” 的课程。

请尝试去构建一些官方文档列表中所展示的项目（TODOs、beers、movies），然后，借此学会数据流（data flow）的工作原理。

当然，你也可以把一些已有的大型 UI 项目（Twitter、Reddit、Hacker News等）分割成一小块来构建 —— 即把其瓜分成组件（components），并使用静态的数据去进行构建。

总的来说，我们需要构建的，理应是一些小型且可被摒弃的应用程序项目。这些项目必须是可摒弃的。否则，你将深陷于一些不为重要的东西，如可维护性和代码结构等。

第3步：Webpack

构建工具是学习过程中的一个主要的难点。搭建 Webpack 的环境会让你感觉是一件繁杂的工作，而且，完全不同于 UI 代码的书写。这就是为什么我要将 Webpack 放在了整个学习路线的第三步，而不是第零步。

在这里，推荐一篇名为《React+Webpack快速上手指南》的文章，作为对 Webpack 的简介。

一旦你清楚 Webpack 所负责的工作（打包生成各种的文件，而不仅仅是 JS 文件） —— 以及其中的工作原理（适用于各种文件类型的加载器），那么，Webpack 对于你来说将会是一个更为欣喜的部分。

第4步：ES6

如今，进入了整个路线的第四步。上述的所有将会作为下面的铺垫。之前，在学习 ES6 过程中，所学到的部分也将会让你写出更为利落简洁的代码 —— 以及性能更高的代码。回想起一开始那时候，某些问题本不应卡住在那 —— 但现在的你，已然清楚知道为啥 ES6 能完美地融合在其中。

在 ES6中，你应该学习一些常用的部分：箭头函数（arrow functions）、let/const、类（classes）、析构（destructuring）和 import

第5步：Router

有些人会把 React Router 和 Redux 这两个概念混为一谈 —— 但是，它们之间并没有任何的关系或依赖。因此，你可以（也理应）在深入 Redux 之前学习如何去使用 React Router。

由于在之前“think in React”的教程中，积累了坚实的基础。因此，相比于第一天学习 React Router，我们此时更能从基于组件（component-based）的构建方式中，领悟出更多的精髓。

下面几个链接可帮助你基本掌握Router
初入react-router新手入门
react-router学习笔记之入门
React Router的一个完整示例
React路由管理 —— React Router 总结
React-Router 中文简明教程

第6步：Redux

React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。
有两个方面，它没涉及。

• 代码结构
• 组件之间的通信

对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。

为了解决这个问题，2014年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。

构建一次性的应用程序。通过些许的 Redux 经验，去逐渐理解其背后的工作原理。

Redux 中文文档
Redux 入门教程

2 学习资料总结

除了上面的资料之外，我还准备了一些较为完整的资料，由浅及深的介绍了React的知识，认真仔细的看完这些书籍，并实践其中的代码，相信一定能够掌握React的开发。

书籍篇

学习书籍是最高效的方法，能迅速带你了解某个知识的整个框架结构，由表及里。

深入REACT技术栈.pdf
react快速上手开发完整版.pdf
深入浅出React和Redux.pdf

网站篇

网站中总结的知识，是对某类知识的一个细化，更加专注于某类问题的解决方法
React官网的中文版（重要资料）
React.js 小书

视频篇

慕课网视频
51CTO视频
百度网盘视频 密码：s0fc

P.S. 上面的书籍篇、网站篇和视频篇部分努力学习好之后，也基本算是对React入门了，后面就是通过项目去不断加深自己的理解。

image.png

祝大家学有所成！！！

作者：艾剪疏
链接：https://www.jianshu.com/p/de421e0db710
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。