logoAnt Design X

设计研发组件演示
  • Ant Design X of React
  • 更新日志
    v1.2.0
  • 模型接入
    • OpenAI
      Updated
    • 通义千问
      Updated
    • 其他
  • 其他
    • 贡献指南
    • dangerouslyApiKey 说明
      New
    • FAQ
  • 如何使用
    • 在 create-react-app 中使用
    • 在 Vite 中使用
    • 在 Next.js 中使用
    • 在 Umi 中使用
    • 在 Rsbuild 中使用

在 create-react-app 中使用

相关资源

Ant Design
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

create-react-app 是业界最优秀的 React 应用开发工具之一,本文会尝试使用 create-react-app 创建一个 TypeScript 项目,并引入 @ant-design/x。

@ant-design/x 基于最新稳定版本的 TypeScript(>=5.0.0),请确保项目中使用匹配的版本。

安装和初始化

在开始之前,你可能需要安装 yarn 或者 pnpm 或者 bun。

npm iconnpm
yarn iconyarn
pnpm iconpnpm
Bun LogoBun
bash
$ npx create-react-app antdx-demo --template typescript

工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请尝试配置代理或使用其他 npm registry。

然后我们进入项目并启动。

bash
$ cd antdx-demo
$ npm run start

此时浏览器会访问 http://localhost:3000/ ,看到 Welcome to React 的界面就算成功了。

引入 @ant-design/x

这是 create-react-app 生成的默认目录结构。

├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
└── yarn.lock

现在从 yarn 或 npm 或 pnpm 安装并引入 @ant-design/x。

npm iconnpm
yarn iconyarn
pnpm iconpnpm
Bun LogoBun
bash
$ npm install @ant-design/x --save

修改 src/App.js,引入 @ant-design/x 的气泡组件。

tsx
import React from 'react';
import { Bubble } from '@ant-design/x';
const App: React.FC = () => (
<div className="App">
<Bubble content="Hello world!" />
</div>
);
export default App;

好了,现在你应该能看到页面上已经有了 @ant-design/x 的气泡组件,接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的官方文档。

自定义主题

参考 配置主题,通过 XProvider 进行主题配置:

tsx
import React from 'react';
import { XProvider } from '@ant-design/x';
const App: React.FC = () => (
<XProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
<MyApp />
</XProvider>
);
export default App;

@ant-design/x 使用 TypeScript 书写并提供了完整的定义,你可以享受组件属性输入建议和定义检查的功能。

我们现在已经把 @ant-design/x 组件成功运行起来了,开始开发你的应用吧!