React+webpack從0到1開發一個todoMvc（四）

Zegendary發表於2017-12-13
ReactWebMVC

todoMvc-4step原始碼 todoMvc-4step演示

這一章主要以【刪除】鍵為例講一下如何使用以 React 封裝了一套 Ant Design 的元件庫：

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（五）

相關文章