学习 React 前你须要知道些什么

若是你正在看这篇文章，你极可能已经知道 React 是啥了。React 的学习曲线陡峭是众所周知的，不少人在开始学习 React 时都一头雾水，笔者天然也不例外。究其缘由，是由于咱们在学习 React 的时候，要学的并不单单只是 React 这个库自己。React 自身只是一个 JavaScript 编写的 UI 库，可是要用好这个 UI 库，却须要了解许多额外的知识。

本文列举了笔者认为初学者在学习 React 以前须要的知识储备，并结合本身的学习过程，附上了推荐的学习资源。但愿能帮你更好更快地入门 React。对于已经知道的部分，能够直接跳过。

• JavaScript 基础
• ES6
• 模块化
• 命令行存活与包管理器

JavaScript 基础

俗话说的好，要想建高楼，先把地基打深。React 说到底仍是一个 JavaScript 库，JS 基础不牢的话，天然也学很差 React。若是你还不清楚 JS 原始类型有哪些，哪些值是 falsy 的，this 到底指代啥，你可能须要补习一下 JS 的基础知识。

且慢，先别急着翻开《JavaScript 权威指南》开始啃。语言学习并不是一朝一夕之事，若是你之前有过编写 JS 脚本的经验，这里有几篇文章能够帮助你回想起来一些重要的概念，剩下的留着到具体实战中慢慢体会。

推荐阅读：

1. 从新介绍 JavaScript | MDN
2. JavaScript 参考文档: this | MDN
3. JavaScript 深刻系列 by 冴羽

深刻学习：

1. 《JavaScript 高级程序设计》
2. 《你不知道的 JavaScript》
3. 《JavaScript 语言精粹》

ES6

你极可能已经知道 ES6（ECMAScript 6）了。自 2015 年发布以来，ES6 为 JavaScript 这门语言注入了新的生命力，极大地提升了开发体验。由于目前主流的框架都在使用 ES6，就算你不用 React，你也会用到 ES6。另外，Babel 的存在能够帮你免去后顾之忧。

ES6中有很多重要的知识点，包括但不限于：let/const、箭头函数、解构赋值、Set/Map、Generator/Iterator、Promise、async/await等。请善用 MDN 的搜索功能。

推荐阅读：

1. ECMAScript 6 入门
2. 解构赋值 | MDN
3. 箭头函数 | MDN
4. 类 - MDN

模块化

目前的网站早已再也不像当年刀耕火种的年代同样，一个手工编写的 JS 脚本就能囊括全部的网站交互。随着业务逻辑逐渐变得复杂，如何管理代码、提升代码复用率便成了一个问题。模块化的存在就是为了解决这个问题，使得用 JavaScript 构建大型应用成为可能。

目前流行的模块化方案有：CommonJS、ES6 Module、AMD 规范、CMD 规范等。其中，最经常使用的是 CommonJS 和 ES6 Module。ES6 Module 自不用说，就是 ES6 在语言层面上提出的模块化方案，而 CommonJS 则是 Node.js 采用的模块化方案。

推荐阅读：

1. JavaScript Modules: A Beginner’s Guide by Preethi Kasireddy
2. ECMAScript 6 入门：Module 的语法 by 阮一峰

深刻学习：

1. JavaScript 模块化七日谈 by Hux

命令行存活与包管理器

为了在命令行存活下来，你并不须要像黑客同样熟练掌握全部酷炫的命令。首先，你须要选择一把趁手的终端，MacOS 用户推荐使用 iTerm2，Windows 用户无责任推荐 Powershell。其次，你得可以使用命令行在文件系统中自如跳转，进行一些基本的文件操做，对系统进行简单的管理。这就足够了。

之因此要学习命令行，是由于 JS 的包管理工具都是在命令行下工做的，包括 npm 和 yarn。

那么什么是包管理工具呢？顾名思义，就是管理项目依赖的工具。JavaScript 的强大与其繁荣的生态系统密不可分，有数不清的模块帮你解决各类各类的问题，React 也是其中一个。有了包管理工具，你再也不须要跑到某个网站上下载一个 JS 文件下来，你只须要使用命令行从 npm 服务器上拉取指定的文件就行了。

npm（node package manager）是 Node 自带的包管理工具，而 yarn 则是当年 Facebook 为了解决 npm 存在的一些问题而提出的包管理器。（最新版本的 npm 已经很好用了）

推荐阅读：

1. Mac OS 终端利器iTerm2
2. 程序员的自我修养：经常使用终端命令
3. A Beginner’s Guide to npm
4. 淘宝 NPM 镜像