React+webpack从0到1开发一个todoMvc（四）

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标签没差：

删除

剩余的样式我们就可以对着antd components的demo来开发。

React+webpack从0到1开发一个todoMvc（一）
React+webpack从0到1开发一个todoMvc（二）
React+webpack从0到1开发一个todoMvc（三）
React+webpack从0到1开发一个todoMvc（五）