React + Ant Design 快速上手
背景及目標
日常開發過程中，經常需要做一些 Web 管理平臺供同事或自己使用。作為一個後臺開發前臺知識不紮實，很難簡單快速做出易用的 Web 應用。但是 React 和 Ant Design 的出現使得這種情況有所改善。
這篇文章提供了一個路線圖，供沒有太多前臺經驗的開發快速上手，做出有一些互動的 Web 管理端。重點集中在以下幾點：
- 提供兩個學習路徑，分別針對「快速上手」和「系統學習」兩個場景
- 提供足夠優秀的學習資源，覆蓋重點內容
- 提供一種避開其他不必要的複雜性的方法，比如儘量避開前端構建工具
為什麼要用 React + Ant Design？
React 的優點：
- 元件化，寫一個 UI 元件可以到處用（當然寫通用的元件也不容易）
- 單向資料流，元件化的基本條件，使用元件跟函式呼叫一樣簡單
Ant Design 的優點：
- 提供了一堆高質量的 UI 元件，應有盡有
使用 React 要求的背景知識
使用 React 主要要求這些背景知識：
- JavaScript
- 前端構建過程
- 包管理器（Package Manager）
- 轉譯器（Transpiler）
- 構建、打包工具（Bundler）
下面的內容會提供兩種學習的途徑，一種是「快速上手」，適合簡單粗暴地學一點就上手用；另外一種是「系統學習」，適合系統性地瞭解。
JavaScript
JavaScript 語言有幾版：
| 規範 | 時間 | 支援程度 |
|---|---|---|
| ECMAScript 3 (ES3) | December 1999 | 廣泛支援 |
| ECMAScript 6 (ES6) / ECMAScript 2015 (ES2015) | June 2015 | |
| ECMAScript 7 (ES7) / ECMAScript 2016 (ES2016) | June 2016 |
其中比較關鍵的節點是 ES6 (ES2015)，加入了非常多的特性，更容易寫 JS 程式碼的同時也引入了很多複雜度。對於 React 只需要瞭解 ES6 中的部分特性即可，但是 ES5 及之前的 JS 基礎是需要掌握的。
如果你完全沒有 JS 經驗，那麼：
包管理器
前端構建過程主要用到的工具都是 Node.js 編寫的。因此你需要知道怎樣管理 Node.js 包。
- 快速上手：Windows 環境下安裝部署 npm 及 Yarn
- 系統學習：檢視 npm 及 Yarn 的文件，理解 Yarn 解決了什麼問題
轉譯器
JS 社群標準的轉譯器叫 Babel，它將高版本的 JS 程式碼（比如 ES6），轉譯成低版本的 JS 程式碼（比如 ES5），以在仍不支援 ES6 的執行環境上（比如老版本的瀏覽器）執行 JS 程式碼。
- 快速上手：不用管它，React 的構建工具幫你搞定了
- 系統學習：看看它的文件
構建、打包工具
現在最流行的是 webpack。它很複雜。
- 快速上手：
- 知道
import 'file.css'是它的 css-loader 在起作用，並且import進來的 CSS / JS 檔案最終會被 webpack 打包成一個大的 CSS / JS 檔案 - 其他的不用管它，React 的構建工具幫你搞定了
- 知道
- 系統學習：看看它的文件
開發工具
用 JetBrains 家的 WebStorm。
學習 React 本身
學習 React 最重要的點在於，理解：
- JSX
- 元件化及單向資料流
- Virtual Dom
- 快速上手：
- 通讀 官方文件 中的 Quick Start 部分
- 瞭解腳手架 create-react-app 的基礎用法
npm startnpm run build
- 系統學習：在快速上手的基礎上，
- 通讀 官方文件 中的 Advanced Guides 部分
- 瞭解 Flux / Redux / MobX 等
一些關鍵的難理解的點：
- 與 Vue.js / Angular 不同，React 沒有雙向繫結（即 DOM 元素與其資料繫結），而是使用單向資料流。資料往下流通過 props，資料向上浮通過事件
- JSX 裡面可以巢狀 JS 程式碼。不要把 JSX 理解成一種模板語言，它就是一種可以轉譯成 JS 的、用來簡化書寫的程式碼
學習 Ant Design
用 Ant Design 就跟你之前用 Bootstrap 沒什麼區別：
常見問題和好的實踐
JS 寫著很不爽啊
JS 太垃圾不方便，但是有個非常好用的 Lodash 庫，提供了很多方便的函式，寫起來可以很像 Python。如果你也不知道怎麼用 Lodash，那麼你在 Google 程式碼例子時，加上 lodash 關鍵詞，比如 “lodash iterate object”。
在程式碼裡使用 Lodash：
yarn add lodashimport _ from 'lodash'
如何找合適的第三方庫？
- 參考 Ant Design 文件中的 社群精選元件，看看有無適合你的庫
- Google 相關的關鍵詞，看看相應的庫 GitHub 星星數等
去哪查文件？
JS, React, Lodash 都不熟，經常要看文件怎麼辦？DevDocs 上這幾個文件都有，Enable 之後將內容下載到離線使用，查閱起來就很方便。