Структура проекта

При организации проекта с Ant Design ключевое значение имеет четкое разделение компонентов, страниц и утилит, что позволяет поддерживать масштабируемость и удобство сопровождения. Стандартная структура проекта на React с интеграцией Ant Design может выглядеть следующим образом:

my-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   │   ├── images/
│   │   └── styles/
│   ├── components/
│   │   ├── common/
│   │   └── layout/
│   ├── pages/
│   │   ├── Dashboard/
│   │   └── UserProfile/
│   ├── services/
│   ├── utils/
│   ├── hooks/
│   ├── App.js
│   ├── index.js
│   └── routes.js
├── package.json
└── README.md

assets/

Каталог для хранения статических ресурсов: изображений, шрифтов и глобальных стилей. Рекомендуется использовать SCSS или LESS для организации переменных и темизации, особенно в сочетании с Ant Design, так как библиотека позволяет кастомизировать тему через переменные LESS.

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

Эти переменные затем подключаются через конфигурацию webpack или craco для create-react-app.

components/

Компоненты делятся на две категории:

  • common/ — переиспользуемые элементы интерфейса, такие как кнопки, формы, модальные окна, таблицы и карточки. Пример компонента кнопки с Ant Design:
import { Button } from 'antd';

const PrimaryButton = ({ children, ...props }) => (
  <Button type="primary" {...props}>
    {children}
  </Button>
);

export default PrimaryButton;
  • layout/ — компоненты, отвечающие за общую структуру приложения: шапка (Header), боковая навигация (Sider) и футер (Footer). Стандартная компоновка с использованием Layout из Ant Design:
import { Layout, Menu } from 'antd';
const { Header, Sider, Content, Footer } = Layout;

const AppLayout = ({ children }) => (
  <Layout style={{ minHeight: '100vh' }}>
    <Sider>
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
        <Menu.Item key="1">Dashboard</Menu.Item>
        <Menu.Item key="2">Profile</Menu.Item>
      </Menu>
    </Sider>
    <Layout>
      <Header style={{ background: '#fff', padding: 0 }} />
      <Content style={{ margin: '16px' }}>{children}</Content>
      <Footer style={{ textAlign: 'center' }}>©2026 Company</Footer>
    </Layout>
  </Layout>
);
export default AppLayout;

pages/

Каждая страница хранится в отдельной папке, включающей основной компонент страницы и связанные локальные компоненты, стили и тесты. Пример структуры страницы Dashboard:

Dashboard/
├── Dashboard.js
├── DashboardHeader.js
├── DashboardTable.js
└── Dashboard.less

Это обеспечивает модульность и удобство масштабирования проекта при добавлении новых страниц.

services/

Файлы для работы с API, запросами к серверу и бизнес-логикой, отделяя их от UI-компонентов. Пример запроса с использованием axios:

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

export const fetchUsers = () => apiClient.get('/users');

utils/

Утилитарные функции общего назначения: форматирование дат, генерация идентификаторов, обработка ошибок и др. Использование этих функций позволяет избегать дублирования кода.

hooks/

Кастомные React-хуки для инкапсуляции логики, которая может повторно использоваться в нескольких компонентах. Пример хука для управления состоянием формы с Ant Design:

import { useState } from 'react';

const useFormState = (initialValues) => {
  const [values, setValues] = useState(initialValues);

  const handleChange = (field, value) => {
    setValues({ ...values, [field]: value });
  };

  return [values, handleChange];
};

export default useFormState;

routes.js

Файл для хранения всех маршрутов приложения с использованием React Router. Ант-дизайн совместим с React Router и позволяет использовать Menu для навигации:

import Dashboard from './pages/Dashboard/Dashboard';
import UserProfile from './pages/UserProfile/UserProfile';

const routes = [
  { path: '/', component: Dashboard, exact: true },
  { path: '/profile', component: UserProfile },
];

export default routes;

Рекомендации по масштабированию

  • Разделение компонентов по уровню переиспользуемости (common, layout, pages) обеспечивает ясную иерархию.
  • Использование кастомных хуков и утилит централизует логику и уменьшает дублирование кода.
  • Тема Ant Design должна быть централизованной через LESS-переменные для единообразного внешнего вида.
  • Каждая страница должна быть максимально независимой, с локальными компонентами и стилями.

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

Оглавление