Структура файлов

Chakra UI — это модульная библиотека компонентов для React, ориентированная на быструю разработку интерфейсов с минимальной настройкой CSS. Организация структуры файлов проекта играет ключевую роль в поддерживаемости и масштабируемости приложения. Ниже рассмотрены основные подходы к структурированию проекта с Chakra UI.

Основная директория проекта

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

my-app/
├── node_modules/
├── public/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── theme/
│   ├── pages/
│   ├── utils/
│   ├── App.js
│   └── index.js
├── package.json
└── README.md
  • node_modules/ — стандартная папка с зависимостями, включая Chakra UI и его peer dependencies.
  • public/ — статические ресурсы (favicon, index.html).
  • src/ — рабочая директория для исходного кода.

Директория components

Все переиспользуемые UI-компоненты следует помещать в папку components. Для каждого компонента рекомендуется создавать отдельную подпапку с файлами:

components/
├── Button/
│   ├── Button.js
│   └── Button.styles.js
├── Header/
│   ├── Header.js
│   └── Header.styles.js
  • Button.js — основной компонент, который импортирует стили и логику.
  • Button.styles.js — здесь хранится Chakra UI объект для кастомизации (например, extendTheme или useStyleConfig).

Такое разделение позволяет легко управлять стилизацией компонентов, избегая смешивания логики и UI.

Директория theme

Для централизованного управления цветовой палитрой, типографикой, размерами и кастомными компонентами используется папка theme:

theme/
├── index.js
├── foundations/
│   ├── colors.js
│   ├── typography.js
│   └── breakpoints.js
└── components/
    ├── Button.js
    └── Input.js
  • foundations/ — базовые значения (цвета, шрифты, брейкпоинты).
  • components/ — кастомные стили для стандартных Chakra UI компонентов.

Пример подключения темы:

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

const theme = extendTheme({
  ...foundations,
  components,
});

export default theme;

Директория pages

Если используется React Router или Next.js, каждая страница хранится в отдельной подпапке с компонентом страницы и опциональными вспомогательными файлами:

pages/
├── Home/
│   ├── Home.js
│   └── Home.styles.js
├── About/
│   ├── About.js
│   └── About.styles.js

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

Директория hooks

Для кастомных React-хуков, связанных с управлением состоянием, API-запросами или эффектами, выделяется отдельная папка:

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

Использование хуков упрощает переиспользование логики между компонентами.

Директория utils

Утилитарные функции, константы, обработчики форматов и вспомогательные методы удобно хранить в utils:

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

Это минимизирует дублирование кода и делает проект более поддерживаемым.

Основные файлы App.js и index.js

  • index.js — точка входа приложения, где подключается ChakraProvider с кастомной темой:
import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider } from "@chakra-ui/react";
import App from "./App";
import theme from "./theme";

ReactDOM.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>,
  document.getElementById("root")
);
  • App.js — основной контейнер приложения, маршруты и глобальные состояния.
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home/Home";
import About from "./pages/About/About";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Рекомендации по организации файлов

  1. Компоненты должны быть атомарными — один компонент на папку, отдельные файлы для стилей и логики.
  2. Цвета и шрифты централизованы — используйте theme/foundations для единообразия.
  3. Страницы и маршруты изолированы — каждая страница со своей папкой и стилями.
  4. Повторяющуюся логику выносить в хуки — минимизация дублирования кода.
  5. Утилиты и константы в отдельной папке — упрощение доступа из любого компонента.

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

Оглавление