Интеграция в экосистему

Для начала работы с Ant Design необходимо установить пакет через npm или yarn:

npm install antd

или

yarn add antd

После установки импортируются глобальные стили и компоненты. В React-проекте это делается следующим образом:

import 'antd/dist/reset.css';
import { Button, DatePicker } from 'antd';

Использование компонентов максимально простое:

const App = () => (
  <div>
    <Button type="primary">Нажми меня</Button>
    <DatePicker />
  </div>
);

Работа с темизацией и кастомизацией

Ant Design предоставляет возможность интеграции с Less для изменения переменных темы. Например:

@primary-color: #1DA57A;
@link-color: #1890ff;
@border-radius-base: 4px;

Для React-проектов с Create React App применяется craco или customize-cra для поддержки Less:

// craco.config.js
const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

После этого все компоненты автоматически будут использовать новую цветовую палитру.

Использование Ant Design с Redux

Компоненты Ant Design легко интегрируются с Redux для управления состоянием приложения. Например, привязка к Form и обработка сабмита через Redux action:

import { useDispatch } from 'react-redux';
import { Form, Input, Button } from 'antd';
import { submitForm } from './actions';

const MyForm = () => {
  const dispatch = useDispatch();

  const onFin ish = (values) => {
    dispatch(submitForm(values));
  };

  return (
    <Form onFin ish={onFinish}>
      <Form.Item name="username" rules={[{ required: true, message: 'Введите имя' }]}>
        <Input placeholder="Имя" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">Отправить</Button>
      </Form.Item>
    </Form>
  );
};

Интеграция с React Router

Ant Design поддерживает работу с маршрутизацией. Для навигационных компонентов, таких как Menu или Breadcrumb, удобно использовать react-router-dom:

import { Link, useLocation } from 'react-router-dom';
import { Menu } from 'antd';

const Navigation = () => {
  const location = useLocation();
  
  return (
    <Menu selectedKeys={[location.pathname]} mode="horizontal">
      <Menu.Item key="/">
        <Link to="/">Главная</Link>
      </Menu.Item>
      <Menu.Item key="/about">
        <Link to="/about">О нас</Link>
      </Menu.Item>
    </Menu>
  );
};

Компоненты Menu и Breadcrumb автоматически реагируют на изменение маршрутов, позволяя синхронизировать UI и состояние приложения.

Подключение к UI-библиотекам и компонентам сторонних производителей

Ant Design можно использовать совместно с другими UI-библиотеками и кастомными компонентами. Важно следить за:

  • Совместимостью CSS (использование less или CSS Modules)
  • Конфликтами тем (например, Material-UI и Ant Design могут иметь разные базовые шрифты и отступы)
  • Единым стилевым подходом, чтобы не нарушать визуальную консистентность

Пример интеграции Ant Design с styled-components:

import styled from 'styled-components';
import { Button } from 'antd';

const StyledButton = styled(Button)`
  border-radius: 12px;
  background-color: #ff4d4f;
  &:hover {
    background-color: #ff7875;
  }
`;

Использование Ant Design в TypeScript

Ant Design полностью поддерживает TypeScript. Каждый компонент имеет собственные типы props, что обеспечивает строгую проверку:

import { Button } from 'antd';

const MyButton: React.FC<{ label: string }> = ({ label }) => (
  <Button type="primary">{label}</Button>
);

Для Form используется типизация через FormInstance:

import { FormInstance } from 'antd/es/form';

const formRef = React.createRef<FormInstance>();

Это позволяет безопасно работать с методами формы (getFieldsValue, validateFields) и получать автодополнение в редакторе.

Интеграция с API и асинхронными операциями

Ant Design предоставляет компоненты для отображения состояния загрузки и ошибок (Spin, Alert, Result). Их удобно сочетать с fetch или axios:

import { useEffect, useState } from 'react';
import { Spin, Alert, List } from 'antd';
import axios from 'axios';

const UsersList = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('/api/users')
      .then(response => setData(response.data))
      .catch(err => setError(err))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <Spin tip="Загрузка..." />;
  if (error) return <Alert message="Ошибка загрузки данных" type="error" />;

  return (
    <List
      dataSource={data}
      renderItem={item => <List.Item>{item.name}</List.Item>}
    />
  );
};

Работа с международной локализацией

Ant Design имеет встроенную поддержку i18n через ConfigProvider. Можно подключать локали для разных языков:

import { ConfigProvider, DatePicker } from 'antd';
import ruRU from 'antd/locale/ru_RU';

const App = () => (
  <ConfigProvider locale={ruRU}>
    <DatePicker />
  </ConfigProvider>
);

Это автоматически изменяет все компоненты, включая календарь, сообщения ошибок и placeholders, под выбранный язык.

Интеграция с тестированием

Ant Design совместим с Jest и React Testing Library. Для тестирования компонентов часто используют:

import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from 'antd';

test('кнопка отображается и реагирует на клик', () => {
  render(<Button onCl ick={() => console.log('Clicked')}>Тест</Button>);
  const btn = screen.getByText('Тест');
  fireEvent.click(btn);
  expect(btn).toBeInTheDocument();
});

Взаимодействие с DOM компонентов Ant Design полностью поддерживается тестовыми утилитами, что обеспечивает надежное покрытие UI.

Подключение к системам сборки и SSR

Для Next.js или других SSR-платформ необходимо использовать серверную интеграцию:

  • Импорт CSS через next.config.js или _app.js
  • Настройка babel-plugin-import для подгрузки только используемых компонентов
  • Предварительная генерация стилей на сервере для устранения FOUC (Flash of Unstyled Content)

Пример конфигурации для Next.js:

// next.config.js
const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
  lessVarsFilePath: './src/styles/variables.less',
  webpack(config) {
    return config;
  },
});

Это позволяет использовать Ant Design в приложениях с серверным рендерингом без потери производительности и корректного отображения стилей.

Оглавление