Учебник Ant Design

Введение
- Что такое Ant Design
- История и философия библиотеки
- Преимущества и недостатки
- Сравнение с другими UI-библиотеками
- Требования к окружению разработки
Установка и настройка
- Установка через npm и yarn
- Подключение к проекту на чистом JavaScript
- Интеграция с React-приложением
- Настройка webpack для работы с Ant Design
- Подключение стилей и тем
- Использование CDN для быстрого старта
Система компонентов
- Принципы работы компонентов
- Общие свойства компонентов
- Управление состоянием компонентов
- Обработка событий
- Ref и доступ к DOM-элементам
Базовые компоненты
- Button
- Icon и иконки
- Typography
- Divider
- Space
- Grid (Row и Col)
Компоненты навигации
- Menu
- Breadcrumb
- Pagination
- Steps
- Dropdown
- Tabs
- Affix
Компоненты ввода данных
- Input
- InputNumber
- Select
- Checkbox и Checkbox Group
- Radio и Radio Group
- Switch
- Slider
- DatePicker и RangePicker
- TimePicker
- Upload
- Rate
- Cascader
- TreeSelect
- Transfer
- AutoComplete
- Mentions
Компоненты отображения данных
- Table
- Tag
- Badge
- Avatar
- Card
- Carousel
- Collapse
- Descriptions
- Empty
- Image
- List
- Popover
- Statistic
- Timeline
- Tooltip
- Tree
- Calendar
Компоненты обратной связи
- Alert
- Message
- Notification
- Modal
- Drawer
- Progress
- Popconfirm
- Result
- Skeleton
- Spin
Компоненты форм
- Form и Form.Item
- Валидация полей
- Динамические поля форм
- Вложенные структуры данных
- Связь нескольких форм
- Работа с async-валидацией
- Кастомные правила валидации
Компоненты Layout
- Layout, Header, Footer, Sider, Content
- Создание адаптивных макетов
- Фиксированные и прокручиваемые области
- Сворачиваемое боковое меню
Темизация и стилизация
- Система дизайн-токенов
- Настройка глобальной темы
- Изменение цветовой палитры
- Работа с CSS Variables
- Переопределение стилей компонентов
- Создание кастомной темы
- Less и его конфигурация
- Темная тема
Локализация
- Подключение языковых пакетов
- Настройка русской локализации
- Переключение языков в приложении
- Создание собственных переводов
- Форматирование дат и чисел
Иконки
- Библиотека @ant-design/icons
- Типы иконок
- Использование кастомных SVG
- Динамическая загрузка иконок
- Создание собственных наборов иконок
Продвинутая работа с Table
- Сортировка и фильтрация
- Пагинация больших данных
- Выделение строк
- Редактируемые ячейки
- Группировка столбцов
- Фиксированные столбцы и заголовки
- Виртуальный скроллинг
- Экспорт данных
Продвинутая работа с Form
- Связь формы с API
- Оптимизация рендеринга
- Работа с FormList
- Условная видимость полей
- Зависимые поля
- Сброс и предзаполнение форм
- Обработка файлов
Работа с Modal и Drawer
- Программное открытие и закрытие
- Передача данных в модальные окна
- Вложенные модальные окна
- Подтверждающие диалоги
- Async-операции в модальных окнах
- Управление z-index
Уведомления и сообщения
- Глобальная настройка Message
- Позиционирование Notification
- Программное управление уведомлениями
- Кастомный контент в уведомлениях
- Ограничение количества уведомлений
Работа с ConfigProvider
- Глобальные настройки компонентов
- Префиксы классов
- Направление текста (RTL)
- Настройка размеров компонентов
- Переопределение рендеров
Адаптивность и мобильные устройства
- Breakpoints в Grid
- Адаптивные компоненты
- Работа с тачскрином
- Мобильное меню
- Оптимизация для малых экранов
Производительность
- Ленивая загрузка компонентов
- Оптимизация bundle size
- Tree shaking
- Динамический импорт
- Мемоизация компонентов
- Виртуализация списков
Доступность
- ARIA-атрибуты в компонентах
- Навигация с клавиатуры
- Поддержка скринридеров
- Контрастность и читаемость
- Семантическая разметка
Интеграция с роутингом
- Работа с React Router
- Активные пункты меню
- Breadcrumbs и маршруты
- Tabs и роутинг
- Защищенные маршруты с Layout
Интеграция с состоянием
- Redux и Ant Design
- MobX и Ant Design
- Zustand и Ant Design
- Формы и глобальное состояние
- Синхронизация UI и store
Серверный рендеринг
- Next.js и Ant Design
- Настройка SSR
- Гидратация стилей
- Проблемы и их решения
Тестирование
- Unit-тестирование компонентов
- Тестирование форм
- Моки компонентов Ant Design
- Снэпшот-тестирование
- E2E тестирование с Ant Design
Миграция между версиями
- Обновление с v4 на v5
- Breaking changes
- Codemod для автоматической миграции
- Совместимость компонентов
Расширение функциональности
- Создание обёрток над компонентами
- Композиция компонентов
- HOC для Ant Design компонентов
- Кастомные хуки для работы с компонентами
Разработка собственных компонентов
- Следование дизайн-системе Ant Design
- Использование утилит библиотеки
- Интеграция в экосистему
- Публикация компонентов
Инструменты разработчика
- Ant Design Pro
- ProComponents
- Использование шаблонов
- CLI-инструменты
Оптимальные практики
- Структура проекта
- Переиспользование компонентов
- Управление зависимостями
- Code style и линтинг
- Документирование компонентов
Частые ошибки и их решение
- Проблемы со стилями
- Конфликты версий
- Проблемы производительности
- Ошибки валидации форм
- Баги в продакшене
Справочник API
- Описание props всех компонентов
- Методы и события
- TypeScript типы
- CSS-классы и переменные