use-with-vite.en-US.md

group	order	title
title Basic Usage	2	Usage with Vite

Here’s the translation of your guide on using @ant-design/x with Vite:

---

Vite is one of the best tools for React application development. This article will guide you on how to use @ant-design/x components in a Vite project and customize Vite's configuration to meet various engineering needs.

Installation and Initialization

Before you start, you might need to install yarn, pnpm, or bun.

The tool will automatically initialize a scaffold and install necessary dependencies for a React project. If you encounter network issues during the process, try configuring a proxy or using another npm registry.

Next, navigate to the project directory, install dependencies, and start the development server.

$ cd antdx-demo
$ npm install
$ npm run dev

Visit http://localhost:5173/ in your browser, and seeing the Vite + React interface means the setup is successful.

Importing @ant-design/x

Here is the default directory structure generated by Vite.

├── public
│   └── vite.svg
├── src
│   └── assets
│       └── react.svg
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── main.js
│   └── logo.svg
├── index.html
├── package.json
└── vite.config.js

Now, install and import @ant-design/x using yarn, npm, pnpm, or bun.

Modify src/App.js to import the Bubble component from @ant-design/x.

import React from 'react';
import { Bubble } from '@ant-design/x';

const App = () => (
  <div className="App">
    <Bubble content="Hello world!" />
  </div>
);

export default App;

You should now see the Bubble component from @ant-design/x on your page. You can proceed to use other components to develop your application. For other development processes, you can refer to the official Vite documentation.

You have successfully integrated @ant-design/x components, so start developing your application!