简单上手蚂蚁金服团队开源reactjs UI 框架Ant Design
框架简介
Ant Design为Web应用程序提供了企业级UI设计语言，其中包含一组开箱即用的高质量React元件。它是用TypeScript编写的，具有完整的定义型别。并且支援服务端渲染。github star 47K+, MIT 协议，最新版本v3.19.5。
框架主要功能
提炼自企业级中后台产品的互动语言和视觉风格。开箱即用的高质量 React 元件。使用 TypeScript 构建，提供完整的型别定义档案。全链路开发和设计工具体系。浏览器支援
IE / Edge: IE9, IE10, IE11, Edge( IE9/10 提供有限度的支援，部分样式和动画在 IE9/10 下的表现会比较裸。少阵列件使用到了 Flex 布局，在 IE9/10 下也会有问题)Firefox/Chrome/Safari/Opera/Electron: last 2 versions。
快速上手
本地环境Node.js v8 或以上安装npm 包npm install antd
yarn add antd
用法import { DatePicker } from \'antd\';
ReactDOM.render(, mountNode);
手动引入import \'antd/dist/antd.css\'; // or \'antd/dist/antd.less\'
按需载入元件import Button from \'antd/lib/button\';
import \'antd/lib/button/style\'; // 或者 antd/lib/button/style/css 载入 css 档案
antd/es/button 可以载入 ES 版本的模组，方便进一步 Tree Shake.
如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需载入，加入这个外挂后。你可以仍然这么写：
import { Button } from \'antd\';
外挂会帮你转换成 antd/lib/xxx 的写法。另外此外挂配合 style 属性可以做到模组样式的按需自动载入。
注意，babel-plugin-import 的 style 属性除了引入对应元件的样式，也会引入一些必要的全域性样式。如果你不需要它们，建议不要使用此属性。你可以 import \'antd/dist/antd.css\' 手动引入，并覆盖全域性样式。
直接使用antd元件
直接用下面的程式码替换 index.js 的内容，用 React 的方式直接使用 antd 元件。import React from \'react\';
import ReactDOM from \'react-dom\';
import { LocaleProvider, DatePicker, message } from \'antd\';
// 由于 antd 元件的预设文案是英文，所以需要修改为中文
import zhCN from \'antd/lib/locale-provider/zh_CN\';
import moment from \'moment\';
import \'moment/locale/zh-cn\';
import \'antd/dist/antd.css\';
import \'./index.css\';
moment.locale(\'zh-cn\');
class App extends React.Component {
state = {
date: null,
};
handleChange = date => {
message.info(`您选择的日期是: ${date.format(\'YYYY-MM-DD\')}`);
this.setState({ date });
};
render() {
const { date } = this.state;
return (
当前日期：{date ? date.format(\'YYYY-MM-DD\') : \'未选择\'}
);
}
}
ReactDOM.render(, document.getElementById(\'root\'));
