學習 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 鏡像