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 start
npm 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 lodash
import _ from 'lodash'
如何找合適的第三方庫?
- 參考 Ant Design 文件中的 社群精選元件,看看有無適合你的庫
- Google 相關的關鍵詞,看看相應的庫 GitHub 星星數等
去哪查文件?
JS, React, Lodash 都不熟,經常要看文件怎麼辦?DevDocs 上這幾個文件都有,Enable 之後將內容下載到離線使用,查閱起來就很方便。