### Install Dependencies

Source: https://4x.ant.design/docs/react/contributing

Run this command in the repository root to install all necessary dependencies before starting development or submitting a pull request.

```bash
npm install
```

--------------------------------

### Start React App

Source: https://4x.ant.design/docs/react/use-in-typescript

Navigate to the project directory and start the development server.

```bash
$ cd antd-demo-ts
$ yarn start
```

--------------------------------

### Start React Development Server

Source: https://4x.ant.design/docs/react/use-with-create-react-app

Navigate into the created project directory and start the development server to view the default React app.

```bash
$ cd antd-demo
$ yarn start
```

--------------------------------

### Install npx Globally

Source: https://4x.ant.design/docs/react/practical-projects

Install npx globally if it is not already available, which is required for generating pages.

```bash
$ yarn global add npx
```

--------------------------------

### Install Craco Less Plugin

Source: https://4x.ant.design/docs/react/use-in-typescript

Install the craco-less plugin to enable Less variable customization.

```bash
$ yarn add craco-less
```

--------------------------------

### Install Umi Application

Source: https://4x.ant.design/docs/react/practical-projects

Use yarn to create a new Umi application. If you prefer npm, use `npx @umijs/create-umi-app`.

```bash
$ mkdir myapp && cd myapp
$ yarn create @umijs/umi-app
$ yarn
```

--------------------------------

### Create and Initialize React App

Source: https://4x.ant.design/docs/react/use-with-create-react-app

Use yarn or npx to create a new React application. Ensure you have yarn installed or use npx.

```bash
$ yarn create react-app antd-demo

# or

$ npx create-react-app antd-demo
```

--------------------------------

### Basic Ant Design React Example

Source: https://4x.ant.design/docs/react/getting-started

This example demonstrates the basic usage of Ant Design's DatePicker component and how to handle date selection. It requires React, ReactDOM, and Ant Design to be installed.

```jsx
import React, { useState } from 'react';
import { render } from 'react-dom';
import { DatePicker, message } from 'antd';
import 'antd/dist/antd.css';
import './index.css';

const App = () => {
  const [date, setDate] = useState(null);
  const handleChange = value => {
    message.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`);
    setDate(value);
  };
  return (
    <div style={{ width: 400, margin: '100px auto' }}>
      <DatePicker onChange={handleChange} />
      <div style={{ marginTop: 16 }}>
        Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
      </div>
    </div>
  );
};

render(<App />, document.getElementById('root'));
```

--------------------------------

### Install Ant Design with npm

Source: https://4x.ant.design/docs/react/introduce

Use npm to install the antd package. This is the recommended method for easier development and access to the JavaScript package ecosystem.

```bash
$ npm install antd
```

--------------------------------

### Install Ant Design Colors Package

Source: https://4x.ant.design/docs/spec/colors

Install the @ant-design/colors package using npm to access Ant Design's color palettes in JavaScript.

```bash
npm install @ant-design/colors
```

--------------------------------

### Install Craco

Source: https://4x.ant.design/docs/react/use-in-typescript

Install Craco to allow customization of Create React App's webpack configuration.

```bash
$ yarn add @craco/craco
```

--------------------------------

### Start Ant Design Website Locally

Source: https://4x.ant.design/docs/react/contributing

Runs the Ant Design website locally, allowing you to preview changes and test components in a development environment.

```bash
npm start
```

--------------------------------

### Adding Alert Component to Example

Source: https://4x.ant.design/docs/react/getting-started

This snippet shows how to import and use the Alert component alongside the DatePicker. It modifies the previous example to display the selected date using an Alert component.

```jsx
- import { DatePicker, message } from 'antd';
+ import { DatePicker, message, Alert } from 'antd';
```

```jsx
  <DatePicker onChange={value => this.handleChange(value)} />
  <div style={{ marginTop: 20 }}>
-   Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
+   <Alert message="Selected Date" description={date ? date.format('YYYY-MM-DD') : 'None'} />
  </div>
```

--------------------------------

### Installing Ant Design v4 Compatible Package

Source: https://4x.ant.design/docs/react/migration-v4

Shows the npm command to install the '@ant-design/compatible' package with the 'v4-compatible-v3' tag, which is necessary for running older Ant Design v3 components within a v4 project.

```bash
npm install --save @ant-design/compatible@v4-compatible-v3
```

--------------------------------

### Install Ant Design with yarn

Source: https://4x.ant.design/docs/react/introduce

Use yarn to add the antd package to your project. This is an alternative to npm for package management.

```bash
$ yarn add antd
```

--------------------------------

### Using Compatibility Pack for Legacy Icons in v4

Source: https://4x.ant.design/docs/react/migration-v4

Illustrates how to continue using the legacy string-based icon API in Ant Design v4 by installing and using the '@ant-design/compatible' package.

```jsx
import { Button } from 'antd';
import { Icon } from '@ant-design/compatible';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);
```

--------------------------------

### ProLayout with PageContainer

Source: https://4x.ant.design/docs/react/practical-projects

Example of implementing a standard page layout using Ant Design Pro's `ProLayout` and `PageContainer`. Includes common elements like action buttons and footer actions.

```jsx
import { Button } from 'antd';
import ProLayout, { PageContainer } from '@ant-design/pro-layout';

export default (
  <ProLayout>
    <PageContainer
      extra={[
        <Button key="3">Operating</Button>,
        <Button key="2">Operating</Button>,
        <Button key="1" type="primary">
          Main Operating
        </Button>,
      ]}
      footer={[<Button>reset</Button>, <Button type="primary">submit</Button>]
      }
    >
      {children}
    </PageContainer>
  </ProLayout>
);
```

--------------------------------

### Update UI Snapshots

Source: https://4x.ant.design/docs/react/contributing

This command updates UI snapshots. Ensure Docker is set up correctly for UI testing, as it's the base for these tests. You may need to download specific installations based on your platform.

```bash
npm run test-image -- -u
```

--------------------------------

### Import Moment Locale for Date Components

Source: https://4x.ant.design/docs/react/faq

Ensure Moment.js locale is correctly imported and set for date-related components to function properly. Check for duplicate Moment.js installations.

```javascript
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
```

```bash
npm ls moment
```

--------------------------------

### Primary Color Palette Generation

Source: https://4x.ant.design/docs/spec/colors

Example of a generated primary color palette based on a chosen main color, showing shades from color-1 to color-10.

```css
color-1#e6f7ff
color-2#bae7ff
color-3#91d5ff
color-4#69c0ff
color-5#40a9ff
color-6#1890ff
color-7#096dd9
color-8#0050b3
color-9#003a8c
color-10#002766
```

--------------------------------

### Running Ant Design v4 Codemod CLI

Source: https://4x.ant.design/docs/react/migration-v4

Provides commands to run the '@ant-design/codemod-v4' tool, either directly via npx or after global installation, to automate the migration of Ant Design components to v4.

```bash
# Run directly through npx
npx -p @ant-design/codemod-v4 antd4-codemod src

# Or global installation
# Use npm
npm i -g @ant-design/codemod-v4
# Use yarn
yarn global add @ant-design/codemod-v4

# Execute
antd4-codemod src
```

--------------------------------

### Configure Prefix and Theme Statically

Source: https://4x.ant.design/docs/react/customize-theme-variable

When using a custom `prefixCls`, call `ConfigProvider.config` with the same prefix to ensure consistent theming.

```javascript
ConfigProvider.config({
  prefixCls: 'custom',
  theme: {
    primaryColor: '#25b864',
  },
});
```

--------------------------------

### Build React Application with Yarn

Source: https://4x.ant.design/docs/react/practical-projects

Execute this command to package all application assets for deployment. The output will be found in the 'dist/' directory.

```bash
$ yarn build
```

--------------------------------

### Create TypeScript React App

Source: https://4x.ant.design/docs/react/use-in-typescript

Initialize a new React project with TypeScript template using yarn or npx.

```bash
$ yarn create react-app antd-demo-ts --template typescript
```

```bash
$ npx create-react-app antd-demo-ts --template typescript
```

--------------------------------

### Generate Products Page

Source: https://4x.ant.design/docs/react/practical-projects

Use npx to generate a new page for products. This command creates the necessary TypeScript file and its associated CSS file.

```bash
$ npx umi g page products --typescript

Write: src/pages/products.tsx
Write: src/pages/products.css
```

--------------------------------

### Import Dark/Compact Theme via Less

Source: https://4x.ant.design/docs/react/customize-theme

Introduce the official dark or compact Less style entry files directly into your project's Less stylesheets.

```less
@import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file
@import '~antd/dist/antd.compact.less'; // Introduce the official compact less style entry file
```

--------------------------------

### Import Dark/Compact Theme via CSS

Source: https://4x.ant.design/docs/react/customize-theme

If your project does not use Less, import the official dark or compact CSS files directly into your project's CSS.

```css
@import '~antd/dist/antd.dark.css';
@import '~antd/dist/antd.compact.css';
```

--------------------------------

### Switch to App.less and Import Ant Design Less

Source: https://4x.ant.design/docs/react/use-with-create-react-app

Change the CSS import in App.js to use App.less and update App.less to import Ant Design's less file.

```javascript
/* src/App.js */
- import './App.css';
+ import './App.less';
```

--------------------------------

### Enable Dark and Compact Themes with Umi 3

Source: https://4x.ant.design/docs/react/customize-theme

Activate the official dark and compact themes by configuring the `antd` property in your Umi 3 configuration file.

```typescript
export default {
  antd: {
    dark: true, // active dark theme
    compact: true, // active compact theme
  },
},
```

--------------------------------

### Replace Modal.method() Icon String with @ant-design/icons

Source: https://4x.ant.design/docs/react/migration-v4

When using Modal.confirm or similar methods, replace the string-based icon prop with an '@ant-design/icons' component. For example, 'ant-design' icon should be replaced with <AntDesignOutlined />.

```javascript
  import { Modal } from 'antd';
+ import { AntDesignOutlined } from '@ant-design/icons';

  Modal.confirm({
-  icon: 'ant-design',
+  icon: <AntDesignOutlined />,
   title: 'Do you Want to delete these items?',
   content: 'Some descriptions',
   onOk() {
     console.log('OK');
   },
   onCancel() {
     console.log('Cancel');
   },
 });
```

--------------------------------

### Get Table Component Type Definition with TypeScript

Source: https://4x.ant.design/docs/react/faq

Use TypeScript's native utility types to infer and extract complex type definitions from exported components like `Table`.

```typescript
import { Table } from 'antd';

type Props<T extends (...args: any) => any> = Parameters<T>[0];

type TableProps = Props<typeof Table<{ key: string; name: string; age: number }>>;
type DataSource = TableProps['dataSource'];
```

--------------------------------

### Replace String Icon Prop with @ant-design/icons

Source: https://4x.ant.design/docs/react/migration-v4

Update string-based icon props in components like Button, Avatar, and Result to use the new '@ant-design/icons' components. For example, 'search' becomes SearchOutlined.

```javascript
  import { Avatar, Button, Result } from 'antd';
+ import { QuestionOutlined, UserOutlined } from '@ant-design/icons';

  ReactDOM.render(
    <div>
-     <Button type="primary" shape="circle" icon="search" />
+     <Button type="primary" shape="circle" icon={SearchOutlined} />
-     <Avatar shape="square" icon="user" />
+     <Avatar shape="square" icon={UserOutlined} />
      <Result
-       icon="question"
+       icon={<QuestionOutlined />}
        title="Great, we have done all the operations!"
        extra={<Button type="primary">Next</Button>}
      />
    </div>,
    mountNode,
  );
```

--------------------------------

### Static Theme Configuration

Source: https://4x.ant.design/docs/react/customize-theme-variable

Use `ConfigProvider.config` to set static theme properties like `primaryColor` before rendering your application.

```javascript
import { ConfigProvider } from 'antd';

ConfigProvider.config({
  theme: {
    primaryColor: '#25b864',
  },
});
```

--------------------------------

### Create Craco config file

Source: https://4x.ant.design/docs/react/use-in-typescript

Create a craco.config.js file at the project root for configuration.

```javascript
/* craco.config.js */
module.exports = {
  // ...
};
```

--------------------------------

### Create UMD Build

Source: https://4x.ant.design/docs/react/contributing

Generates a Universal Module Definition (UMD) build of Ant Design, suitable for inclusion in projects that do not use module bundlers.

```bash
npm run dist
```

--------------------------------

### Run Complete Test Suite

Source: https://4x.ant.design/docs/react/contributing

Executes the entire test suite for Ant Design. Ensure the NODE_ENV environment variable is unset to avoid potential issues.

```bash
npm test
```

--------------------------------

### Import Compatible Form and Mention Components

Source: https://4x.ant.design/docs/react/migration-v4

When migrating, import compatible versions of Form and Mention from '@ant-design/compatible'. Ensure to also import the compatible CSS. Other components like Input and Button remain imported from 'antd'.

```javascript
- import { Form, Input, Button, Mention } from 'antd';
+ import { Form, Mention } from '@ant-design/compatible';
+ import '@ant-design/compatible/assets/index.css';
+ import { Input, Button } from 'antd';

  ReactDOM.render( (
    <div>
      <Form>
        {getFieldDecorator('username')(<Input />)}
        <Button>Submit</Button>
      </Form>
      <Mention
        style={{ width: '100%' }}
        onChange={onChange}
        defaultValue={toContentState('@afc163')}
        defaultSuggestions={['afc163', 'benjycui']}
        onSelect={onSelect}
      />
    </div>
  );
```

--------------------------------

### Import Ant Design CSS

Source: https://4x.ant.design/docs/react/use-in-typescript

Import the Ant Design CSS file into your App.css for basic styling.

```css
@import '~antd/dist/antd.css';
```

--------------------------------

### Import Ant Design Less File

Source: https://4x.ant.design/docs/react/use-with-create-react-app

Update App.less to import the Ant Design less file, enabling less variable customization.

```less
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
```

--------------------------------

### Configure Global PrefixCls for Ant Design Components

Source: https://4x.ant.design/docs/react/faq

Use ConfigProvider.config to set a global prefix for Ant Design components when static methods like message, notification, or Modal.confirm lose styles due to independent DOM rendering.

```javascript
ConfigProvider.config({
  prefixCls: 'ant',
});
```

--------------------------------

### Run Tests with Watch Mode

Source: https://4x.ant.design/docs/react/contributing

Use this command to run the test suite in watch mode, which is helpful for development. You can specify a test name to focus on specific tests.

```bash
npm test -- --watch TestName
```

--------------------------------

### Replace CSS Import for Dynamic Theme

Source: https://4x.ant.design/docs/react/customize-theme-variable

Switch to `antd.variable.min.css` to enable CSS Variable-based theming. Ensure `babel-plugin-import` is removed if used.

```diff
-- import 'antd/dist/antd.min.css';
++ import 'antd/dist/antd.variable.min.css';
```

--------------------------------

### Create Custom TimePicker with Day.js

Source: https://4x.ant.design/docs/react/replace-moment

Create a custom TimePicker component by wrapping the custom DatePicker and setting the `picker` prop to 'time'.

```typescript
import { Dayjs } from 'dayjs';
import * as React from 'react';
import DatePicker from './DatePicker';
import { PickerTimeProps } from 'antd/es/date-picker/generatePicker';

export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'> {}

const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => {
  return <DatePicker {...props} picker="time" mode={undefined} ref={ref} />;
});

TimePicker.displayName = 'TimePicker';

export default TimePicker;
```

--------------------------------

### Clone Ant Design Repository

Source: https://4x.ant.design/docs/react/i18n

To add a new language, first fork and clone the Ant Design repository. Ensure your local copy is up-to-date and create a new branch for your changes.

```bash
git clone git@github.com:<your organization>/ant-design.git
cd ant-design/
git remote add upstream origin git@github.com:ant-design/ant-design.git
git checkout -b <your new branch name>
```

--------------------------------

### Mock Product List Service

Source: https://4x.ant.design/docs/react/practical-projects

A mock service function to simulate fetching a product list with a delay. Use this for testing or development when the actual API is not available.

```typescript
/*
export function queryProductList() {
  return fetch('/api/products').then(res => res.json());
}
*/
// mock request service by setTimeout
export function queryProductList() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        data: [
          { id: 1, name: 'dva' },
          { id: 2, name: 'antd' },
        ],
      });
    }, 2000);
  });
}
```

--------------------------------

### Create Custom Calendar with Day.js

Source: https://4x.ant.design/docs/react/replace-moment

Use `generateCalendar` with `dayjsGenerateConfig` to create a custom Calendar component that uses Day.js.

```typescript
import { Dayjs } from 'dayjs';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generateCalendar from 'antd/es/calendar/generateCalendar';

const Calendar = generateCalendar<Dayjs>(dayjsGenerateConfig);

export default Calendar;
```

--------------------------------

### Customize Theme in Umi (File Path)

Source: https://4x.ant.design/docs/react/customize-theme

Specify a JavaScript file path in the `theme` field of Umi's configuration to manage theme customizations.

```json
"theme": "./theme.js"
```

--------------------------------

### Update App.less to import Ant Design Less

Source: https://4x.ant.design/docs/react/use-in-typescript

Modify App.less to import Ant Design's less file instead of CSS.

```less
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
```

--------------------------------

### Create Custom DatePicker with Day.js

Source: https://4x.ant.design/docs/react/replace-moment

Use `generatePicker` with `dayjsGenerateConfig` to create a custom DatePicker component that uses Day.js.

```typescript
import { Dayjs } from 'dayjs';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generatePicker from 'antd/es/date-picker/generatePicker';

const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);

export default DatePicker;
```

--------------------------------

### Create Reusable Product List Component

Source: https://4x.ant.design/docs/react/practical-projects

Define a reusable `ProductList` component using Ant Design's `Table` and `Popconfirm` for displaying products and handling deletions.

```typescript
import { Table, Popconfirm, Button } from 'antd';

const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: string) => void }> = ({
  onDelete,
  products,
}) => {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Actions',
      render: (text, record) => {
        return (
          <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
            <Button>Delete</Button>
          </Popconfirm>
        );
      },
    },
  ];
  return <Table dataSource={products} columns={columns} />;
};

export default ProductList;
```

--------------------------------

### Update App.tsx to use App.less

Source: https://4x.ant.design/docs/react/use-in-typescript

Change the import in App.tsx from App.css to App.less to enable Less processing.

```tsx
/* src/App.ts */
- import './App.css';
+ import './App.less';
```

--------------------------------

### Use Custom Components in App

Source: https://4x.ant.design/docs/react/replace-moment

Replace Ant Design's default DatePicker and Calendar imports with your custom components and import 'dayjs' instead of 'moment'.

```typescript
- import { DatePicker, Calendar } from 'antd';
- import format from 'moment';

+ import { DatePicker, TimePicker, Calendar } from './components';
+ import format from 'dayjs';
```

--------------------------------

### Configure Routing and Internationalization

Source: https://4x.ant.design/docs/react/practical-projects

Configure the Umi application's routing and enable Ant Design internationalization by setting the `locale` option in `.umirc.ts`.

```typescript
import { defineConfig } from 'umi';

export default defineConfig({
+ locale: { antd: true },
  routes: [
    { path: '/', component: '@/pages/index' },
+   { path: '/products', component: '@/pages/products' },
  ],
});
```

--------------------------------

### Compile Less with Custom Prefix

Source: https://4x.ant.design/docs/react/customize-theme-variable

Use `lessc` with the `--modify-var` option to compile Ant Design's Less files when a custom prefix is required.

```bash
lessc --js --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css
```

--------------------------------

### Import Ant Design Stylesheets

Source: https://4x.ant.design/docs/react/introduce

Manually import the Ant Design stylesheets. Choose between 'antd.css' for the default styles or 'antd.less' if you are using a Less preprocessor.

```css
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```

--------------------------------

### Export Custom Components

Source: https://4x.ant.design/docs/react/replace-moment

Export all custom components from a single index file for easier import.

```typescript
export { default as DatePicker } from './DatePicker';
export { default as Calendar } from './Calendar';
export { default as TimePicker } from './TimePicker';
```

--------------------------------

### Legacy Icon Usage in Ant Design v3

Source: https://4x.ant.design/docs/react/migration-v4

Demonstrates the previous method of using string-based icon types in Ant Design v3, which did not support on-demand loading and increased package size.

```jsx
import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);
```

--------------------------------

### Replace v3 LocaleProvider with v4 ConfigProvider

Source: https://4x.ant.design/docs/react/migration-v4

The LocaleProvider component from v3 has been replaced by ConfigProvider in v4. Update your import statements and component usage accordingly.

```javascript
- import { LocaleProvider } from 'antd';
+ import { ConfigProvider } from 'antd';

  ReactDOM.render(
-   <LocaleProvider {...yourConfig}>
+   <ConfigProvider {...yourConfig}>
      <Main />
-   </LocaleProvider>
+   </ConfigProvider>
    mountNode,
  );
```

--------------------------------

### Customize Theme in Umi (Object)

Source: https://4x.ant.design/docs/react/customize-theme

Set theme customization directly within the `theme` field in Umi's configuration file (`.umirc.ts` or `config/config.ts`).

```json
"theme": {
  "primary-color": "#1DA57A",
}
```

--------------------------------

### Check Code Style

Source: https://4x.ant.design/docs/react/contributing

Runs a linting process to check for code style violations. This command helps maintain code consistency across the project.

```bash
npm run lint
```

--------------------------------

### Set Custom Prefix for ConfigProvider

Source: https://4x.ant.design/docs/react/customize-theme-variable

Modify the `prefixCls` in `ConfigProvider` to customize the CSS prefix, useful when multiple Ant Design styles are present.

```javascript
import { ConfigProvider } from 'antd';

export default () => (
  <ConfigProvider prefixCls="custom">
    <MyApp />
  </ConfigProvider>
);
```

--------------------------------

### Switch Development Theme

Source: https://4x.ant.design/docs/react/contributing

Use the `DEV_THEME` environment variable to change the theme of the Ant Design website during local development. This allows you to preview components with different themes.

```bash
DEV_THEME=dark npm start
```