Run Refine development server on localhost:5173
After initialization, enter the project directory and run 'npm run dev' to start the development server. The application will be available at http://localhost:5173/.
getting-started
257 notes in this subject, read out of this brain and free to use. This is page 4 of 5.
Example Refine component using Ant Design Form
The CategoryCreate component example demonstrates using Refine's Create wrapper and useForm hook with Ant Design's Form and Input components. The component uses Create with saveButtonProps and Form with formProps in vertical layout, containing a Form.Item with a required title field.
Import and use Button component from antd in Rsbuild
Import the Button component from antd and use it in React: import { Button } from 'antd'; then render with <Button type="primary">Button</Button>.
Rsbuild project setup for Ant Design
To create a new Rsbuild project with Ant Design, run `npm create rsbuild` (or equivalent with yarn, pnpm, or bun), select the React template during initialization, then navigate to the project directory and run `npm run dev` to start the development server at http://localhost:3000.
Rsbuild is powered by Rspack
Rsbuild is a build tool driven by Rspack.
Create Rsbuild project with npm, yarn, pnpm, or bun
To create a new Rsbuild project, run one of: npm create rsbuild, yarn create rsbuild, pnpm create rsbuild, or bun create rsbuild. During initialization, select the React template. The tool automatically initializes a scaffold and installs necessary dependencies for a React project.
Start Rsbuild development server
After creating an Rsbuild project, navigate to the project directory (e.g., cd demo) and run npm run dev. The development server will start at http://localhost:3000.
Install antd with npm, yarn, pnpm, or bun
To install Ant Design in an Rsbuild project, run one of: npm install antd --save, yarn add antd, pnpm install antd --save, or bun add antd.
Import and use antd Button component in Rsbuild React app
To use the Button component from antd in a Rsbuild React project, import it at the top of your component file: import { Button } from 'antd';. Then use it in JSX: <Button type="primary">Button</Button>.
Mock data setup with Umi defineMock
Create mock API responses using Umi's defineMock() in mock/*.ts files. Example: export default defineMock({ 'GET /api/products': (_, res) => { res.send({ status: 'ok', data: products }); }, 'DELETE /api/products/:id': (req, res) => { products = products.filter((item) => item.id !== req.params.id); res.send({ status: 'ok' }); } });
useQuery and useMutation hooks for react-query in Umi
Import from 'umi': useQuery(['products'], { queryFn() { return axios.get('/api/products').then((res) => res.data); } }) for fetching data. Use useMutation({ mutationFn(id: string) { return axios.delete(`/api/products/${id}`); }, onSettled: () => { queryClient.invalidateQueries({ queryKey: ['products'] }); } }) for mutations. Call mutate() to trigger the mutation.
ProLayout component for standard mid-back office layout
ProLayout from @ant-design/pro-components provides a reusable layout component encapsulating common menu, breadcrumb, and page header functionality. It supports three modes: side, mix, and top. It includes built-in logic for menu selection, breadcrumb generation from menu, and automatic page title setting.
Configure route names for ProLayout menu rendering
Add a name field to each route in .umirc.ts configuration: { path: "/products", component: "products", name: "products" }. ProLayout uses these name fields to render menu items.
Build application with npm run build
Run `npm run build` to bundle all resources including JavaScript, CSS, Web Fonts, images, and HTML. The build output is placed in the dist/ directory.
Initialize Umi project with pnpm create umi
To create an Umi project, run `pnpm create umi`. Users can alternatively use `npm create umi`, `yarn create umi`, or `bunx create-umi` (note the dash between 'create' and 'umi' for bun).
Umi is Ant Design's recommended enterprise framework
Umi is an extensible enterprise-level front-end application framework and is Ant Design's underlying front-end framework. It has directly or indirectly served 10000+ applications. Umi uses routing as its foundation and supports both configuration-based and convention-based routing. It provides a comprehensive plugin system with lifecycle hooks that cover every stage from source code to build artifacts.
Configure routes in .umirc.ts for configuration-based routing
In .umirc.ts, add a routes array to defineConfig(). Each route object must have a path and component property. Example: `routes: [{ path: "/", component: "index" }, { path: "/products", component: "products" }]`. Configuration-based routing requires explicit route configuration but provides higher flexibility than convention-based routing.
Generate pages with npx umi g page command
Use `npx umi g page <pageName>` to generate a new page. For example, `npx umi g page products` creates src/pages/products.tsx and src/pages/products.less files.
Umi supports both configuration-based and convention-based routing
Umi offers two routing approaches: configuration-based routing where routes are explicitly declared in config, and convention-based routing where the file system acts as the router without requiring explicit configuration.
Enable react-query plugin in Umi configuration
To use react-query with Umi, add to defineConfig(): `plugins: ['@umijs/plugins/dist/react-query']` and `reactQuery: {}`. The react-query package is now named @tanstack/react-query but can still be referred to as react-query. Modifying plugin configuration requires server restart.
ProductList component example with Table and Popconfirm
Example React component that displays a product list using Ant Design Table and Popconfirm: ```tsx import React from 'react'; import { Button, Popconfirm, Table } from 'antd'; import type { TableProps } from 'antd'; interface DataType { id: string; name: string; } const ProductList: React.FC<{ products: DataType[]; onDelete: (id: string) => void }> = ({ onDelete, products, }) => { const columns: TableProps<DataType>['columns'] = [ { title: 'Name', dataIndex: 'name', }, { title: 'Actions', render(text, record) { return ( <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}> <Button>Delete</Button> </Popconfirm> ); }, }, ]; return <Table rowKey="id" dataSource={products} columns={columns} />; }; export default ProductList; ```
Creating new Umi pages with CLI
Generate a new page with npx umi g page pagename. This creates src/pages/pagename.tsx and src/pages/pagename.less files. The route must then be added to the routes configuration in .umirc.ts.
Umi configured routing setup
Umi supports configured routing where routes are declared in the .umirc.ts configuration file using a routes array. Each route object has path, component, and optionally name properties. Routes can be configured line by line or discovered via file system convention-based routing.
Umi development server startup
Start the Umi development server with npm run dev or umi dev. The app listens at http://localhost:8000 by default.
Umi is enterprise React framework by Ant Group
Umi is a scalable enterprise front-end application framework and the underlying framework of Ant Group. It has served 10,000+ applications directly or indirectly.
Building Umi application for production
Build the Umi application for production with npm run build. This packages all resources including JavaScript, CSS, Web Fonts, images, and HTML into the dist/ directory.
Umi project creation with pnpm
To create a new Umi scaffold project, use pnpm with the command: mkdir myapp && cd myapp && pnpm create umi. Alternatively, npm create umi, yarn create umi, or bunx create-umi can be used. Select 'Simple App' template to start from scratch.
Recommended dependencies for Umi with Ant Design
After creating a Umi project, install these dependencies: pnpm i @umijs/plugins -D (official plugin set), pnpm i antd axios @ant-design/pro-components -S (UI library, request library, and layout components).
Adding name property to routes for ProLayout menu
To enable menu rendering in ProLayout, add a name field to each route in .umirc.ts routes configuration. The name is used by ProLayout to render menu items and generate breadcrumbs.
ProLayout implementation example
Example layout component using ProLayout: ```tsx import { ProLayout } from '@ant-design/pro-components'; import { Link, Outlet, useAppData, useLocation } from 'umi'; export default function Layout() { const { clientRoutes } = useAppData(); const location = useLocation(); return ( <ProLayout route={clientRoutes[0]} location={location} title="Umi x Ant Design" menuItemRender={(menuItemProps, defaultDom) => { if (menuItemProps.isUrl || menuItemProps.children) { return defaultDom; } if (menuItemProps.path && location.pathname !== menuItemProps.path) { return ( <Link to={menuItemProps.path} target={menuItemProps.target}> {defaultDom} </Link> ); } return defaultDom; }} > <Outlet /> </ProLayout> ); } ```
ProLayout component for backend application layout
ProLayout is an Ant Design Pro component that provides a standard backend application layout with built-in menu, breadcrumbs, page headers, and more. It supports side, mix, and top layout modes, automatically handles menu selection, generates breadcrumbs, and sets page titles.
Complete products page with useQuery and useMutation
Example Umi page component using react-query for data fetching and mutations: ```tsx import React from 'react'; import axios from 'axios'; import { useMutation, useQuery, useQueryClient } from 'umi'; import styles from './products.less'; import ProductList from '@/components/ProductList'; export default function Page() { const queryClient = useQueryClient(); const productsQuery = useQuery(['products'], { queryFn() { return axios.get('/api/products').then((res) => res.data); }, }); const productsDeleteMutation = useMutation({ mutationFn(id: string) { return axios.delete(`/api/products/${id}`); }, onSettled: () => { queryClient.invalidateQueries({ queryKey: ['products'] }); }, }); if (productsQuery.isLoading) { return null; } return ( <div> <h1 className={styles.title}>Page products</h1> <ProductList products={productsQuery.data.data} onDelete={(id) => { productsDeleteMutation.mutate(id); }} /> </div> ); } ```
Enable react-query plugin in Umi
To use react-query in Umi, add the plugin configuration to .umirc.ts: ```diff import { defineConfig } from "umi"; export default defineConfig({ + plugins: ['@umijs/plugins/dist/react-query'], + reactQuery: {}, routes: [...], npmClient: 'pnpm', }); ```
Mock file example with GET and DELETE endpoints
Example Umi mock file that defines API endpoints: ```ts import { defineMock } from 'umi'; type Product = { id: string; name: string; }; let products: Product[] = [ { id: '1', name: 'Umi' }, { id: '2', name: 'Ant Design' }, { id: '3', name: 'Ant Design Pro' }, { id: '4', name: 'Dva' }, ]; export default defineMock({ 'GET /api/products': (_, res) => { res.send({ status: 'ok', data: products, }); }, 'DELETE /api/products/:id': (req, res) => { products = products.filter((item) => item.id !== req.params.id); res.send({ status: 'ok' }); }, }); ```
Umi mock data setup
Create mock data using Umi's built-in Mock function in a mock/products.ts file. Use defineMock to define endpoints and responses for development without a backend API.
Umi routes based on react-router@6.3
Umi's routing is based on react-router@6.3, not the latest 6.4 which contains loader and action functionality not required for Umi.
Create Vite React project with antd-demo
To create a new Vite React project named antd-demo, run one of the following commands depending on your package manager: npm: $ npm create vite antd-demo; yarn: $ yarn create vite antd-demo; pnpm: $ pnpm create vite antd-demo; bun: $ bun create vite antd-demo.
Install antd package in Vite project
Install Ant Design from npm or yarn or pnpm or bun using one of these commands: npm: $ npm install antd --save; yarn: $ yarn add antd; pnpm: $ pnpm install antd --save; bun: $ bun add antd.
Import and use Button component from antd
Import the Button component from antd by adding import { Button } from 'antd'; at the top of your component file. You can then use the component with type="primary" prop to display a blue primary button.
Basic Button component example with Vite
Here is a complete example of a React component using antd Button in a Vite project: import React from 'react'; import { Button } from 'antd'; const App = () => ( <div className="App"> <Button type="primary">Button</Button> </div> ); export default App;
Install antd with bun
To install Ant Design as a dependency, run: bun add antd
Create new Vite project with bun
To create a new Vite project, run: bun create vite antd-demo
Create new Vite project with pnpm
To create a new Vite project, run: pnpm create vite antd-demo
Create new Vite project with yarn
To create a new Vite project, run: yarn create vite antd-demo
Import and use Button component from antd
To use the Button component from Ant Design in a React component: import { Button } from 'antd'; then use it as <Button type="primary">Button</Button>
Install antd with pnpm
To install Ant Design as a dependency, run: pnpm install antd --save
Install antd with yarn
To install Ant Design as a dependency, run: yarn add antd
Initialize Vite project and start development server
After creating a Vite project, enter the directory, install dependencies, and start the development server with: cd antd-demo && npm install && npm run dev. Access the application at http://localhost:5173/
Figma resources for Ant Design available
Up-to-date Ant Design Figma resources are available at https://www.antforfigma.com, providing current design components and patterns in Figma format.
Open source Figma library for Ant Design
A free open source Figma library is available with complete and accurate-to-code Ant Design components at https://www.figma.com/community/file/831698976089873405.
Ant Design Pro templates available
Ant Design Pro provides common templates and pages as a design resource, available in Sketch format for designers.
Sketch Symbols for Mobile available
Official Ant Design Sketch Symbols file for mobile components is available. The file is a sketch resource for mobile design work.
Sketch Symbols for Desktop available
Official Ant Design Sketch Symbols file for desktop components is available at version 5.13.3. The file is named AntDesign5.0_UI.KIT_202401.sketch and can be downloaded from the Ant Design GitHub releases.
AntUIKit Figma design system available
AntUIKit is a comprehensive Figma design system, blocks, flows, and templates resource for Ant Design, available at https://www.antuikit.com.
AntBlocks UI for Figma available
AntBlocks UI for Figma provides high-quality, responsive, and customizable React components built on Ant Design, available at https://www.antblocksui.com/#figma.
Ruyi Design Assistant Figma plugin available
Ruyi Design Assistant is a Figma plugin that enables design using Antd code component library and delivers component code that is friendly to developers. It is available at https://www.figma.com/community/plugin/1192146318523533547.
UI Kit for Adobe XD available
An official Ant Design library of components for desktop is available for Adobe XD at https://www.antforxd.com.
MockingBot Ant Design resources available
MockingBot provides rich Ant Design component resources and templates at https://modao.cc/square/ant-design.
JiShi Design provides Ant Design components and templates
JiShi Design platform offers full Ant Design components and templates at https://js.design/antd.
MasterGo provides Ant Design components and templates
MasterGo platform provides full Ant Design components and templates at https://mastergo.com/community/?utm_source=antdesign&utm_medium=link&utm_campaign=resource&cata_name=AntDesign.