create-react-app is one of the best tools for developing React applications. In this guide, we'll use create-react-app to create a TypeScript project and introduce @ant-design/x.

@ant-design/x is based on the latest stable version of TypeScript (>=5.0.0), so make sure your project uses a compatible version.

Installation and Initialization

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

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

Next, navigate into the project and start it.

$ cd antdx-demo
$ npm run start

Your browser will open at http://localhost:3000/, and you should see a "Welcome to React" message if everything was successful.

Importing @ant-design/x

Here's the default directory structure created by 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

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

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

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;

Now, you should see the Bubble component from @ant-design/x on the page. You can continue building your application using other components. For more development processes, refer to the official create-react-app documentation.

Custom Theme

Refer to Customize Theme and use XProvider for theme configuration:

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 is written in TypeScript and provides complete type definitions, allowing you to enjoy component property suggestions and definition checks.

Now that we've successfully run the @ant-design/x component, start building your application!