todoMvc-4step原始碼 todoMvc-4step演示
這一章主要以【刪除】鍵為例講一下如何使用以 React 封裝了一套 Ant Design 的元件庫：
1.安裝
推薦使用 npm 的方式進行開發，不僅可在開發環境輕鬆除錯，也可放心地在生產環境打包部署使用，享受整個生態圈和工具鏈帶來的諸多好處。
可以通過 npm 直接安裝到專案中，使用 import 或 require 進行引用。
$ npm install antd --save
複製程式碼2.載入
可以通過以下的寫法來按需載入元件。
import Button from 'antd/lib/button';
import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 載入 css 檔案
複製程式碼但我推薦使用更簡便的寫法： 首先需要安裝babel-plugin-import 依賴
$ npm install babel-plugin-import --save-dev
複製程式碼然後在我們的根目錄下新建.babelrc：
{
"plugins": [["import", {"libraryName": "antd", "style": "css"}]] //import js and css modularly
}
複製程式碼這時我們需要什麼UI元件，即可如下這麼寫以達到按需載入js和css：
import { Button } from 'antd';
複製程式碼3.使用
由於Antd元件已經油React封裝好了，用法和原生html標籤沒差：
<Button type="danger" size="small" onClick={this.handlerDelete.bind(this)}>刪除</Button>
複製程式碼剩餘的樣式我們就可以對著antd components的demo來開發。
React+webpack從0到1開發一個todoMvc（一） React+webpack從0到1開發一個todoMvc（二） React+webpack從0到1開發一個todoMvc（三） React+webpack從0到1開發一個todoMvc（五）