### Start Umi UI for Project Creation

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

Launches the Umi UI graphical interface, which aids in creating new projects. It automatically opens a browser window where you can select a project path, name, and template. This interface simplifies project setup and configuration.

```bash
$ umi ui

🚀 Starting Umi UI using umi@2.10.4...
🧨  Ready on http://localhost:3000/
```

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

### Basic Ant Design React Component Example

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

This example demonstrates how to use a basic Ant Design component (DatePicker) in a React application. It includes setting up the necessary imports, configuring the locale to Chinese, and handling date changes with messages. It requires React, ReactDOM, antd, and moment.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider, DatePicker, message } from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'antd/dist/antd.css';
import './index.css';

moment.locale('zh-cn');

class App extends React.Component {
  state = {
    date: null,
  };

  handleChange = date => {
    message.info(`您选择的日期是: ${date ? date.format('YYYY-MM-DD') : '未选择'}`);
    this.setState({ date });
  };
  render() {
    const { date } = this.state;
    return (
      <ConfigProvider locale={zhCN}>
        <div style={{ width: 400, margin: '100px auto' }}>
          <DatePicker onChange={this.handleChange} />
          <div style={{ marginTop: 20 }}>
            当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'}
          </div>
        </div>
      </ConfigProvider>
    );
  }
}

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

```

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

### Install Umi CLI Globally

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

Installs the UmiJS command-line interface globally using Yarn. This tool is essential for creating and managing UmiJS projects. Ensure your Umi version is 2.10.0 or higher.

```bash
$ yarn global add umi
$ umi -v
```

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

### Start Create React App Development Server

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

After creating the project, navigate into the project directory and start the development server. This command will launch the application and open it in your default browser.

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

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

### Development Commands for Ant Design

Source: https://3x.ant.design/docs/react/contributing-cn

This section lists essential commands for local development within the Ant Design project after installing dependencies. These include starting the development server, running tests, linting, compiling, and building.

```shell
npm start
npm run lint
npm test
npm run compile
npm run dist
```

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

### Install Ant Design with npm or yarn

Source: https://3x.ant.design/docs/react/introduce-cn

Instructions for installing the antd library using either npm or yarn package managers. This is the recommended method for development and production use.

```bash
$ npm install antd --save
```

```bash
$ yarn add antd
```

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

### Install Babel Plugin Import

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

This plugin enables on-demand loading of Ant Design components and their styles, which helps in reducing the final bundle size. Install it using yarn.

```bash
$ yarn add babel-plugin-import
```

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

### Example React Component Usage

Source: https://3x.ant.design/docs/react/introduce-cn

A basic example demonstrating how to import and use the DatePicker component from antd within a React application. It assumes ReactDOM is available for rendering.

```jsx
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
```

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

### Initialize Create React App Project

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

This command initializes a new React project using Create React App and installs necessary dependencies. It can be run using either yarn or npx.

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

# or

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

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

### Generate a New Page Route

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

Uses the Umi CLI to generate a new page component and its associated CSS file for a given route. This command simplifies the process of adding new pages to your UmiJS application. For example, `umi g page products` creates the `/products` route.

```bash
$ umi g page products

   create src/pages/products.js
   create src/pages/products.css
✔  success
```

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

### Install Antd Day.js Webpack Plugin

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

This plugin replaces moment.js with Day.js in Ant Design, significantly reducing the build size. Install it using yarn.

```bash
$ yarn add antd-dayjs-webpack-plugin
```

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

### Integrating Ant Design Alert Component

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

This snippet shows how to add an Ant Design Alert component to an existing React application that uses Ant Design. It involves updating the import statement to include the Alert component and adding the corresponding JSX to the render method. This builds upon the initial DatePicker example.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider, DatePicker, message, Alert } from 'antd'; // Added Alert import
import zhCN from 'antd/es/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'antd/dist/antd.css';
import './index.css';

moment.locale('zh-cn');

class App extends React.Component {
  state = {
    date: null,
  };

  handleChange = date => {
    message.info(`您选择的日期是: ${date ? date.format('YYYY-MM-DD') : '未选择'}`);
    this.setState({ date });
  };
  render() {
    const { date } = this.state;
    return (
      <ConfigProvider locale={zhCN}>
        <div style={{ width: 400, margin: '100px auto' }}>
          <DatePicker onChange={value => this.handleChange(value)} />
          <div style={{ marginTop: 20 }}>
            <Alert message={`当前日期：${date ? date.format('YYYY-MM-DD') : '未选择'}`} type="success" /> {/* Added Alert component */} 
          </div>
        </div>
      </ConfigProvider>
    );
  }
}

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

```

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

### Pull Request Checklist for Ant Design

Source: https://3x.ant.design/docs/react/contributing-cn

This checklist outlines the necessary steps to follow before submitting a pull request to Ant Design. It emphasizes basing changes on the correct branch, installing dependencies, writing tests, and ensuring code quality.

```text
1. Based on the correct branch.
2. Run `npm install`.
3. Write corresponding tests for bug fixes or new features.
4. Ensure all tests pass (`npm run test`).
5. Update Jest snapshots if necessary (`npm test -u`).
6. Ensure code passes lint checks (`npm run lint`).
```

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

### Install React App Rewired and Customize Cra

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

These packages allow you to customize Create React App's Webpack configuration without ejecting. Install them to enable advanced configurations like custom Babel plugins or Less loaders.

```bash
$ yarn add react-app-rewired customize-cra
```

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

### On-demand loading Ant Design components (ES Module)

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

This demonstrates how to perform on-demand loading of Ant Design components using ES modules, which helps reduce application bundle size. Instead of importing the entire library, specific components and their styles are imported directly from their respective paths. This is a recommended practice for performance.

```javascript
import Button from 'antd/es/button';
import 'antd/es/button/style'; // Or antd/es/button/style/css to load CSS files

```

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

### Install Less and Less Loader

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

To customize Ant Design's theme using Less variables, you need to install Less and `less-loader`. These dependencies allow Webpack to process Less files.

```bash
$ yarn add less less-loader
```

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

### Testing and Linting Commands in Ant Design

Source: https://3x.ant.design/docs/react/contributing-cn

This snippet details the commands for running tests and linting checks within the Ant Design project. It includes options for watching specific tests and updating snapshots.

```shell
npm run test
npm test -- --watch TestName
npm test -- -u
npm run lint
```

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

### Install Ant Design (Antd)

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

Add the Ant Design library to your project's dependencies using your package manager. This makes antd components available for import and use in your React application.

```bash
$ yarn add antd
```

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

### On-demand loading with babel-plugin-import

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

This shows how to configure `babel-plugin-import` to enable on-demand loading of Ant Design components. After adding this plugin to your Babel configuration, you can continue to import components as usual (`import { Button } from 'antd';`), and the plugin will automatically transform the imports to the optimized `antd/es/xxx` format. The `style` option can also handle automatic style imports.

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

```

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

### Replacing Moment.js with Day.js for smaller bundle size (Webpack)

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

This configuration snippet illustrates how to use `antd-dayjs-webpack-plugin` to replace Moment.js with Day.js in your Webpack build. This significantly reduces the overall package size of your application. It requires adding the plugin to your Webpack configuration's `plugins` array.

```javascript
// webpack-config.js
import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';

module.exports = {
  // ...
  plugins: [new AntdDayjsWebpackPlugin()],
};

```

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

### Configure DvaJS Initial State in UmiJS

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

Configures the initial state for the DvaJS store within a UmiJS application. This configuration is typically placed in `src/app.js` and allows setting up error handling and providing initial data for models, such as the `products` model.

```javascript
export const dva = {
  config: {
    onError(err) {
      err.preventDefault();
      console.error(err.message);
    },
    initialState: {
      products: [{ name: 'dva', id: 1 }, { name: 'antd', id: 2 }],
    },
  },
};
```

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

### Update package.json Scripts for React App Rewired

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

Modify the `scripts` section in your `package.json` file to use `react-app-rewired` instead of `react-scripts` for starting, building, and testing the application.

```json
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}
```

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

### Tree Shaking Ant Design Components (JavaScript)

Source: https://3x.ant.design/docs/react/faq-cn

Shows how to import multiple Ant Design components using ES6 import syntax, enabling tree shaking for more efficient bundle optimization. This method assumes your build setup supports tree shaking.

```javascript
import { Menu, Breadcrumb, Icon } from 'antd';
```

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

### Configure Ant Design Theme in Umi

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

How to configure Ant Design themes within a Umi project using the `theme` field in `config/config.js`. The `theme` can be set as an object with variable key-value pairs or as a path to a custom Less/JS theme file.

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

```javascript
"theme": "./theme.js",
```

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

### Connect React Component with DvaJS

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

Connects a React component to the DvaJS store using the `connect` higher-order component. This allows the component to access and dispatch actions to the DvaJS model. It receives the `products` state and a `dispatch` function as props.

```javascript
import { connect } from 'dva';
import ProductList from '../components/ProductList';

const Products = ({ dispatch, products }) => {
  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
};

export default connect(({ products }) => ({
  products,
}))(Products);
```

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

### Branch Management for Contributions

Source: https://3x.ant.design/docs/react/contributing-cn

This section explains the branching strategy for Ant Design contributions. Pull requests for bug fixes should target the 'master' branch, while new feature requests should be based on the 'feature' branch.

```text
Bug fixes: Send pull request to `master`.
New features: Base pull request on `feature` branch.
```

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

### Configure Ant Design Theme with a Less File

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

An alternative method to customize Ant Design's theme by creating a separate Less file. This file imports the official Ant Design Less entry point and then overrides specific variables, ensuring all component styles are loaded.

```less
@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
```

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

### DvaJS Products Model Definition

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

Defines a DvaJS model for managing product data. This model includes a namespace, initial state (an empty array), and a reducer function for deleting products. Models in DvaJS encapsulate data and logic for a specific domain.

```javascript
export default {
  namespace: 'products',
  state: [],
  reducers: {
    delete(state, { payload: id }) {
      return state.filter(item => item.id !== id);
    },
  },
};
```

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

### Ant Design Product List Component

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

A React component that displays a list of products using Ant Design's Table and Button components. It includes functionality for deleting products via a Popconfirm dialog. This component is designed to be reusable across different parts of the application.

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

const ProductList = ({ 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;
```

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

### Initialize TypeScript React App with create-react-app

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

使用 create-react-app 和 --template typescript 选项来初始化一个新的 React 项目，该项目已配置好 TypeScript。这是开始使用 React 和 TypeScript 开发的基础。

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

# or

npx create-react-app my-app --template typescript

# or with npm

npx create-react-app antd-demo-ts --typescript
```

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

### Configuring Nonce for CSP with ConfigProvider (JavaScript)

Source: https://3x.ant.design/docs/react/faq-cn

Shows how to configure a nonce for Content Security Policy (CSP) compliance using the ConfigProvider component. This is essential for applications with strict security policies that need to allow dynamic styles.

```javascript
<ConfigProvider nonce="SOME_NONCE_VALUE" />
```

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

### Configuring Global Popup Container with ConfigProvider (JavaScript)

Source: https://3x.ant.design/docs/react/faq-cn

Illustrates how to globally configure the popup container for all Ant Design components using the ConfigProvider. This is useful for consistent behavior across your application, especially within scrollable areas.

```javascript
<ConfigProvider getPopupContainer={trigger => trigger.parentNode} />
```

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

### Import Ant Design Styles

Source: https://3x.ant.design/docs/react/introduce-cn

Demonstrates how to import the necessary CSS or LESS files for Ant Design components. Importing styles is crucial for the components to render correctly.

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

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

### Customize Ant Design Theme in Webpack

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

Configuration for `less-loader` in `webpack.config.js` to override Ant Design's theme variables. This allows developers to specify custom values for variables like `primary-color` and `border-radius-base`, or even import a custom Less file.

```javascript
// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
      options: {
        modifyVars: {
          'primary-color': '#1DA57A',
          'link-color': '#1DA57A',
          'border-radius-base': '2px',
          // or
          'hack': "true; @import \"your-less-file-path.less\";", // Override with less file
        },
        javascriptEnabled: true,
      },
    }],
    // ...other rules
  }],
  // ...other config
}
```

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

### Lazy Loading Ant Design Components (JavaScript)

Source: https://3x.ant.design/docs/react/faq-cn

Demonstrates how to import individual Ant Design components and their styles for on-demand loading, reducing bundle size. This approach uses specific paths to components and their CSS files.

```javascript
import Menu from 'antd/es/menu';
import 'antd/es/menu/style/css';
```

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

### Ant Design Less Variables

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

A list of commonly used Less variables in Ant Design for global styling customization, including primary color, link color, font sizes, and border radius. All variables are defined in Less and can be adjusted to match project-specific visual requirements.

```less
@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45); // 次文本色
@disabled-color : rgba(0, 0, 0, .25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
```

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

### Configure Ant Design Locale with ConfigProvider (React)

Source: https://3x.ant.design/docs/react/i18n-cn

This snippet demonstrates how to use the ConfigProvider component from Ant Design to set the locale for your React application. It imports a specific locale file (e.g., zh_CN for Simplified Chinese) and passes it to the `locale` prop of ConfigProvider. Ensure you have the `antd` package installed.

```jsx
import React from 'react';
import zhCN from 'antd/es/locale/zh_CN';
import { ConfigProvider } from 'antd';

function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <YourAppContent />
    </ConfigProvider>
  );
}

export default App;
```

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

### On-demand Loading with babel-plugin-import

Source: https://3x.ant.design/docs/react/introduce-cn

Configuration for babel-plugin-import to enable on-demand loading of antd components. This method automatically imports JavaScript and CSS for only the components used, optimizing bundle size.

```json
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 会加载 less 文件
    }]
  ]
}
```

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

### Setting Locale for Ant Design Components (JavaScript)

Source: https://3x.ant.design/docs/react/faq-cn

Demonstrates how to set the locale for Ant Design components, specifically for date-related components. This involves configuring Moment.js to use a specific locale and ensuring version consistency between Moment.js and Ant Design.

```javascript
import moment from 'moment';

moment.locale('zh-cn');
```

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

### Enable Ant Design On-Demand Loading with babel-plugin-import

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

安装 `babel-plugin-import` 并配置 `config-overrides.js` 以实现 Ant Design 组件的按需加载。这通过 Babel 插件在构建时仅引入实际使用的组件代码和样式，提高应用性能。

```javascript
$ yarn add babel-plugin-import
```

```javascript
const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
);
```

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

### Manual On-demand Loading of Components

Source: https://3x.ant.design/docs/react/introduce-cn

An alternative method for on-demand loading where JavaScript and CSS for specific components are imported manually. This provides more granular control over which parts of antd are included in the build.

```jsx
import DatePicker from 'antd/es/date-picker'; // 加载 JS
import 'antd/es/date-picker/style/css'; // 加载 CSS
// import 'antd/es/date-picker/style';         // 加载 LESS
```

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

### Update App.js for On-Demand Loading

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

After configuring `babel-plugin-import`, remove the global CSS import and change how you import Ant Design components. Components will now be imported individually, enabling tree shaking.

```javascript
// src/App.js
import React, { Component } from 'react';
import { Button } from 'antd';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;
```

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

### Update App.tsx for On-Demand Loading

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

修改 `src/App.tsx` 文件，将组件的引入方式从按路径引入改为直接从 'antd' 引入，以配合 `babel-plugin-import` 实现按需加载。同时移除全局样式导入。

```tsx
// src/App.tsx
import React, { Component } from 'react';
- import Button from 'antd/es/button';
+ import { Button } from 'antd';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;
```

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

### Configure Babel Plugin Import with Customize Cra

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

Update your `config-overrides.js` to use `customize-cra`'s `fixBabelImports` function. This configures `babel-plugin-import` to load Ant Design components and styles efficiently.

```javascript
const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
);
```

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

### Configure Ant Design Custom Theme with Less Loader

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

通过 `customize-cra` 的 `addLessLoader` 函数配置 `config-overrides.js` 文件，以支持 Ant Design 的 Less 变量覆盖，实现自定义主题。此处将主色调设置为绿色。

```javascript
const {
  override,
  fixBabelImports,
  addLessLoader,
} = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);
```

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

### Configuring Popup Container for Ant Design Components (JavaScript)

Source: https://3x.ant.design/docs/react/faq-cn

Provides a JavaScript code snippet to configure the container for popup elements within Ant Design components like Select, Dropdown, DatePicker, etc. This helps resolve issues where popups disappear unexpectedly in nested contexts.

```javascript
<Select getPopupContainer={trigger => trigger.parentNode} />
```

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

### Integrate Ant Design Button Component

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

在 `src/App.tsx` 文件中引入并使用 Ant Design 的 Button 组件。此代码展示了如何在 React 组件中渲染一个基本的 antd 按钮。

```tsx
import React, { Component } from 'react';
import Button from 'antd/es/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;
```

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

### Configure Antd Day.js Webpack Plugin

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

Update your `config-overrides.js` to add the `AntdDayjsWebpackPlugin` using `customize-cra`'s `addWebpackPlugin` function. This ensures that Day.js is used instead of moment.js for date operations within Ant Design.

```javascript
const { override, addWebpackPlugin } = require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');

module.exports = override(addWebpackPlugin(new AntdDayjsWebpackPlugin()));
```

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

### Create config-overrides.js for Webpack Customization

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

This file is used by `react-app-rewired` to override the default Webpack configuration. You can add custom loaders, plugins, and modify existing configurations here.

```javascript
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};
```