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

如果你正在看这篇文章，你很可能已经知道 React 是啥了。React 的学习曲线陡峭是众所周知的，很多人在开始学习 React 时都一头雾水，笔者自然也不例外。究其原因，是因为我们在学习 React 的时候，要学的并不仅仅只是 React 这个库本身。React 自身只是一个 JavaScript 编写的 UI 库，但是要用好这个 UI 库，却需要了解许多额外的知识。

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

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 已经很好用了）