Skip to content

Files

Latest commit

3eace55 · Mar 5, 2017

History

History

todoMvc-4step

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Mar 4, 2017
Mar 4, 2017
Feb 18, 2017
Mar 5, 2017
Mar 4, 2017
Feb 18, 2017
Feb 18, 2017

README.md

todoMvc-4step源码

todoMvc-4step演示

这一章主要以【删除】键为例讲一下如何使用以 React 封装了一套 Ant Design 的组件库:

Ant Design

1.安装

推荐使用 npm 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。 可以通过 npm 直接安装到项目中,使用 importrequire 进行引用。

$ 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组件,即可如下这么写以达到按需加载jscss

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(五)