Интеграция с React-приложением

Для интеграции Ant Design с React-приложением используется официальный пакет antd. Установка выполняется через npm или yarn:

npm install antd
# или
yarn add antd

После установки необходимо подключить глобальные стили. Это можно сделать в файле index.js или App.js:

import 'antd/dist/reset.css'; // сброс стилей и подключение темы по умолчанию

Использование компонентов Ant Design предполагает импорт их напрямую в нужных файлах:

import { Button, Input, Table } from 'antd';

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

Ant Design поддерживает динамическую настройку темы через Less. Для React-проектов с Create React App рекомендуется использовать craco или react-app-rewired для изменения конфигурации Webpack и подключения поддержки Less:

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

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

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

Основные компоненты и их интеграция

Button – базовый компонент для кнопок. Поддерживает разные типы и размеры:

<Button type="primary" size="large">Основная кнопка</Button>
<Button type="dashed">Дефолтная кнопка</Button>
<Button type="link">Ссылка</Button>

Input – компонент ввода текста с возможностью добавления иконок и управления состоянием:

<Input placeholder="Введите текст" prefix={<UserOutlined />} />

Form – мощный инструмент для построения форм с валидацией. Интеграция с React выглядит так:

<Form
  name="basic"
  labelCol={{ span: 8 }}
  wrapperCol={{ span: 16 }}
  initialValues={{ remember: true }}
  onFin ish={onFinish}
  onFinishFai led={onFinishFailed}
>
  <Form.Item
    label="Имя пользователя"
    name="username"
    rules={[{ required: true, message: 'Введите имя пользователя!' }]}
  >
    <Input />
  </Form.Item>

  <Form.Item
    label="Пароль"
    name="password"
    rules={[{ required: true, message: 'Введите пароль!' }]}
  >
    <Input.Password />
  </Form.Item>

  <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
    <Button type="primary" htmlType="submit">Войти</Button>
  </Form.Item>
</Form>

Table – компонент для отображения табличных данных с поддержкой сортировки, фильтрации и пагинации:

const columns = [
  { title: 'Имя', dataIndex: 'name', key: 'name' },
  { title: 'Возраст', dataIndex: 'age', key: 'age', sorter: (a, b) => a.age - b.age },
  { title: 'Адрес', dataIndex: 'address', key: 'address' },
];

const data = [
  { key: '1', name: 'Иван', age: 32, address: 'Москва' },
  { key: '2', name: 'Мария', age: 28, address: 'Санкт-Петербург' },
];

<Table columns={columns} dataSource={data} pagination={{ pageSize: 5 }} />

Управление состоянием компонентов

Ant Design тесно интегрирован с React-хуками. Для управления состоянием форм или модальных окон часто используют useState и useEffect:

const [isModalVisible, setIsModalVisible] = useState(false);

const showModal = () => setIsModalVisible(true);
const handleOk = () => setIsModalVisible(false);
const handleCancel = () => setIsModalVisible(false);

<Modal title="Пример модального окна" visible={isModalVisible} onOk={handleOk} onCan cel={handleCancel}>
  <p>Содержимое модального окна</p>
</Modal>
<Button onCl ick={showModal}>Открыть окно</Button>

Формы также можно контролировать через Form.useForm:

const [form] = Form.useForm();

form.setFieldsValue({ username: 'Иван' });

Расширенные возможности

Списки и карусели: компоненты List и Carousel позволяют создавать визуально привлекательные элементы интерфейса с поддержкой прокрутки и адаптивного дизайна.

Грид-система: Ant Design использует 24-колоночную сетку для построения адаптивных макетов. Основные компоненты:

<Row gutter={16}>
  <Col span={12}><div>Левая колонка</div></Col>
  <Col span={12}><div>Правая колонка</div></Col>
</Row>

Меню и навигация: компоненты Menu, Breadcrumb и Tabs позволяют организовать удобную навигацию внутри приложения.

<Menu mode="horizontal" defaultSelectedKeys={['1']}>
  <Menu.Item key="1">Главная</Menu.Item>
  <Menu.Item key="2">Профиль</Menu.Item>
  <Menu.Item key="3">Настройки</Menu.Item>
</Menu>

Оптимизация и ленивый импорт

Для снижения размера бандла рекомендуется использовать tree-shaking и импорт отдельных компонентов:

import Button from 'antd/es/button';
import 'antd/es/button/style/css';

Это позволяет подключать только необходимые модули, сокращая время загрузки приложения.

Интеграция с TypeScript

Ant Design полностью поддерживает TypeScript. Для компонентов существуют готовые типы:

import { Button, ButtonProps } from 'antd';

const MyButton: React.FC<ButtonProps> = (props) => <Button {...props} />;

Использование строгих типов для Form и Table позволяет обеспечить корректность данных и автокомплит в редакторе.

Работа с модальными и уведомляющими компонентами

Modal, Drawer, Notification, Message — компоненты для диалогов и уведомлений. Пример уведомления:

import { notification } from 'antd';

const openNotification = () => {
  notification.open({
    message: 'Успех',
    description: 'Операция выполнена успешно',
    duration: 3,
  });
};

<Button onCl ick={openNotification}>Показать уведомление</Button>

Message подходит для кратких всплывающих уведомлений:

import { message } from 'antd';

const success = () => message.success('Данные сохранены!');
<Button onCl ick={success}>Сохранить</Button>

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

Ant Design легко комбинируется с fetch, axios и React Query. Пример загрузки данных для таблицы:

const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  fetch('https://api.example.com/users')
    .then(res => res.json())
    .then(result => {
      setData(result);
      setLoading(false);
    });
}, []);

<Table columns={columns} dataSource={data} loading={loading} />

Использование компонента Spin позволяет отображать индикатор загрузки:

<Spin spinning={loading}>
  <Table columns={columns} dataSource={data} />
</Spin>

Адаптивность и мобильная оптимизация

Ant Design имеет встроенную поддержку адаптивного дизайна через Grid и пропсы responsive для компонентов, таких как Table, Col и Menu. Это позволяет строить интерфейсы, корректно отображающиеся на любых устройствах.

<Col xs={24} sm={12} md={8} lg={6}>
  <div>Адаптивная колонка</div>
</Col>

Эта структура позволяет использовать Ant Design в React-приложениях максимально эффективно, обеспечивая единообразный интерфейс, гибкую кастомизацию и высокую производительность при построении сложных веб-приложений.

Оглавление