Организация структуры проекта

При работе с Chakra UI организация структуры проекта играет ключевую роль в поддерживаемости, масштабируемости и повторном использовании компонентов. Библиотека сама по себе не навязывает строгой архитектуры, однако оптимальная структура позволяет избежать хаоса в больших приложениях.

Папка src и её составные части

Базовая структура проекта на React с Chakra UI обычно выглядит следующим образом:

src/
├─ components/
├─ pages/
├─ theme/
├─ hooks/
├─ utils/
├─ assets/
├─ App.js
└─ index.js

Объяснение:

  • components/ – хранение переиспользуемых UI-компонентов. Каждый компонент оформляется отдельной папкой с файлами .jsx и .css или .ts/.tsx, если используется TypeScript.
  • pages/ – отдельные страницы приложения, чаще всего для роутинга. Например, HomePage.jsx, ProfilePage.jsx.
  • theme/ – кастомизация Chakra UI: цвета, шрифты, размеры и глобальные стили.
  • hooks/ – пользовательские хуки для работы с состоянием или бизнес-логикой.
  • utils/ – вспомогательные функции, форматтеры, константы.
  • assets/ – изображения, иконки и другие статические ресурсы.
  • App.js и index.js – точка входа, конфигурация ChakraProvider и роута приложения.

Компоненты и их организация

Chakra UI предоставляет компоненты низкого уровня (Box, Flex, Stack) и высокоуровневые (Button, Input, Modal). Рекомендуется разделять:

  • Атомы (Atoms) – самые базовые элементы UI, напрямую использующие компоненты Chakra UI, без сложной логики. Например, PrimaryButton.jsx, CustomInput.jsx.
  • Молекулы (Molecules) – комбинации атомов для выполнения конкретной задачи. Например, форма поиска с Input и Button.
  • Организмы (Organisms) – крупные блоки интерфейса, состоящие из молекул и атомов. Например, карточка товара с изображением, заголовком и кнопками.
  • Шаблоны (Templates) – страницы или разделы, которые собирают организмы вместе, создавая основу UI.

Такой подход соответствует методологии Atomic Design и повышает повторное использование компонентов.

Настройка темы Chakra UI

Chakra UI позволяет гибко настраивать тему через объект extendTheme:

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  colors: {
    brand: {
      50: "#f5f7ff",
      100: "#e0e7ff",
      500: "#4f46e5",
      900: "#1e1b4b"
    }
  },
  fonts: {
    heading: "Inter, sans-serif",
    body: "Inter, sans-serif"
  },
  components: {
    Button: {
      variants: {
        solid: {
          bg: "brand.500",
          color: "white",
          _hover: { bg: "brand.600" }
        }
      }
    }
  }
});

export default theme;

Тема подключается в index.js через ChakraProvider:

import React from "react";
import ReactDOM from "react-dom/client";
import { ChakraProvider } from "@chakra-ui/react";
import App from "./App";
import theme from "./theme";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>
);

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

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

Chakra UI использует props для стилей, что позволяет минимизировать количество отдельных CSS-файлов. Например:

import { Box, Text, Button } from "@chakra-ui/react";

function Card({ title, description }) {
  return (
    <Box borderWidth="1px" borderRadius="lg" p={4} boxShadow="md">
      <Text fontSize="xl" fontWeight="bold">{title}</Text>
      <Text mt={2}>{description}</Text>
      <Button mt={4} colorScheme="brand">Подробнее</Button>
    </Box>
  );
}

Для сложных и повторяющихся стилей можно использовать style props, chakra factory или систему sx.

Разделение логики и UI

Часто полезно разделять:

  • Контейнеры (Containers) – управляют состоянием, загрузкой данных и передачей пропсов.
  • Презентационные компоненты (Presentational Components) – отображают данные, не зависят от состояния приложения.

Пример структуры:

components/
├─ Card/
│  ├─ Card.jsx           // презентационный компонент
│  └─ CardContainer.jsx  // контейнер с логикой загрузки данных

Такое разделение повышает тестируемость и переиспользуемость компонентов.

Организация роутинга

Chakra UI можно интегрировать с любым роутером, чаще всего используется React Router:

src/
├─ pages/
│  ├─ HomePage.jsx
│  └─ ProfilePage.jsx
├─ App.js
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import ProfilePage from "./pages/ProfilePage";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/profile" element={<ProfilePage />} />
      </Routes>
    </Router>
  );
}

Каждая страница использует переиспользуемые компоненты из components и стилизуется через Chakra UI, обеспечивая консистентный интерфейс.

Организация хуков и утилит

Пользовательские хуки позволяют инкапсулировать логику работы с состоянием, API или формами:

hooks/
├─ useAuth.js
├─ useFetch.js

Утилиты включают вспомогательные функции и константы:

utils/
├─ formatDate.js
├─ constants.js

Такое разделение упрощает поддержку и повторное использование кода.

Оптимизация структуры при масштабировании

Для больших приложений рекомендуется:

  • Группировать компоненты по функциональным модулям, а не только по типу.
  • Использовать index.js внутри папок для реэкспорта компонентов.
  • Хранить глобальные стили, темы и иконки отдельно, избегая хаотичного смешивания с UI-компонентами.
  • Применять Atomic Design для последовательного роста проекта.

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

Оглавление