快速上手

这是一个最简单的 Ant Design 组件的在线 codesandbox 演示。

访问创建一个 codesandbox 的在线示例，别忘了保存以创建一个新的实例。

直接用下面的代码替换的内容，用 React 的方式直接使用 antd 组件。

你可以在左侧菜单查看组件列表，比如 Alert 组件，组件文档中提供了各类演示，最下方有组件 API 文档可以查阅。在代码演示部分找到第一个例子，点击右下角的图标展开代码。

然后依照演示代码的写法，在之前的 codesandbox 里修改 index.js，首先在 import 内引入 Alert 组件：

然后在 render 内添加相应的 jsx 代码：

在右侧预览区就可以看到如图的效果。

好的，现在你已经会使用基本的 antd 组件了，你可以在这个例子中继续探索其他组件的用法。如果你遇到组件的 bug，也推荐建一个可重现的 codesandbox 来报告 bug。

兼容性

Ant Design React 支持所有的现代浏览器和 IE9+。

我们对 IE9/10 提供有限度的支持，部分样式和动画在 IE9/10 下的表现会比较裸。少数组件使用到了 Flex 布局，在 IE9/10 下也会有问题。

注意，不同于 Ant Design，Ant Design Pro 是只支持到 IE11+ 的。

对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用来解决浏览器兼容问题。如果你在使用 umi，可以直接使用配置。

Ant Design 3.0 对 React 15/16 两个版本提供支持，但是我们强烈建议你升级到 React 16，以便获得更好的性能和遇到更少的问题。

如果你使用 parcel，这里也有可以参考。

目前社区也有很多基于 antd 定制的脚手架，欢迎进行试用和贡献。

如果你在开发环境的控制台看到下面的提示，那么你可能使用了 import { Button } from 'antd'; 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。

可以通过以下的写法来按需加载组件。

如果你使用了 babel，那么可以使用来进行按需加载，加入这个插件后。你可以仍然这么写：

import { Button } from 'antd';

插件会帮你转换成 antd/es/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。

注意，babel-plugin-import 的属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 import 'antd/dist/antd.css' 手动引入，并覆盖全局样式。

你可以使用插件用 Day.js 替换 momentjs 来大幅减小打包大小。这需要更新 webpack 的配置文件如下：