logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.0
  • Ant Design of React
  • 更新日志
    v5.25.0
  • 如何使用
    • 快速上手
    • 在 Vite 中使用
    • 在 Next.js 中使用
      Updated
    • 在 Umi 中使用
    • 在 Rsbuild 中使用
    • 在 Farm 中使用
    • 使用 Refine
  • 进阶使用
    • 定制主题
    • 样式兼容
    • 服务端渲染
    • 使用 CSS 变量
      New
    • 使用自定义日期库
    • 国际化
    • 通用属性
    • React 19 兼容
      New
  • 迁移
    • 从 v4 到 v5
    • 从 Less 变量到 Design Token
  • 其他
    • 社区精选组件
    • 贡献指南
    • FAQ

快速上手

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

Ant Design React 致力于提供给程序员愉悦的开发体验。

在开始之前,推荐先学习 React,并正确安装和配置了 Node.js v16 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识,并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React,将 UI 框架作为你的第一步可能不是最好的主意。


第一个例子

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

import React from 'react';
import { Button, Space, DatePicker, version } from 'antd';

const App = () => (
  <div style={{ padding: '0 24px' }}>
    <h1>antd version: {version}</h1>
    <Space>
      <DatePicker />
      <Button type="primary">Primary Button</Button>
    </Space>
  </div>
);

export default App;
Open on CodeSandboxOpen Sandbox

1. 创建一个 codesandbox

访问 https://u.ant.design/codesandbox-repro 创建一个 codesandbox 的在线示例,别忘了保存以创建一个新的实例。

2. 使用组件

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

jsx
import React, { useState } from 'react';
import { ConfigProvider, DatePicker, message } from 'antd';
// 由于 antd 组件的默认文案是英文,所以需要修改为中文
import dayjs from 'dayjs';
import { createRoot } from 'react-dom/client';
import 'dayjs/locale/zh-cn';
import zhCN from 'antd/locale/zh_CN';
import './index.css';
dayjs.locale('zh-cn');
const App = () => {
const [date, setDate] = useState(null);
const [messageApi, contextHolder] = message.useMessage();
const handleChange = (value) => {
messageApi.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`);
setDate(value);
};
return (
<ConfigProvider locale={zhCN}>
<div style={{ width: 400, margin: '100px auto' }}>
<DatePicker onChange={handleChange} />
<div style={{ marginTop: 16 }}>
当前日期:{date ? date.format('YYYY年MM月DD日') : '未选择'}
</div>
</div>
{contextHolder}
</ConfigProvider>
);
};
createRoot(document.getElementById('root')).render(<App />);

3. 探索更多组件用法

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

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

diff
- import { ConfigProvider, DatePicker, message } from 'antd';
+ import { ConfigProvider, DatePicker, message, Alert } from 'antd';

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

diff
<DatePicker onChange={value => this.handleChange(value)} />
<div style={{ marginTop: 16 }}>
- 当前日期:{date ? date.format('YYYY-MM-DD') : '未选择'}
+ <Alert message="当前日期" description={date ? date.format('YYYY年MM月DD日') : '未选择'} />
</div>

选择一个日期,在右侧预览区就可以看到如图的效果。

codesandbox screenshot

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

4. 下一步

在实际项目开发中,你会遇到构建、调试、代理、打包部署等一系列工程化的需求。你可以阅读后面的文档或者使用以下脚手架和范例:

  • Ant Design Pro
  • create-next-app
  • 更多脚手架可以查看 脚手架市场

按需加载

antd 默认支持基于 ES modules 的 tree shaking,直接引入 import { Button } from 'antd'; 就会有按需加载的效果。

自行构建

如果想自己维护工作流,我们推荐使用 webpack 或者 vite 进行构建和调试,可以使用 React 生态圈中的 各种脚手架 进行开发。

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