學習 React 前你需要知道些什麼

Hopsken發表於2019-01-16

如果你正在看這篇文章,你很可能已經知道 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 已經很好用了)

推薦閱讀:

  1. Mac OS 終端利器iTerm2
  2. 程式設計師的自我修養:常用終端命令
  3. A Beginner’s Guide to npm
  4. 淘寶 NPM 映象

相關文章