Как правильно организовать структуру компонентов в React?

Принципы организации компонентов в React

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

Основные подходы

• Группировка по фичам (Feature-based): Каждая функциональность приложения (например, авторизация, список товаров) имеет свою папку, внутри которой лежат все связанные компоненты, стили, тесты и хуки.
• Разделение на презентационные и контейнерные компоненты: Презентационные компоненты отвечают только за отображение UI, получая данные через props. Контейнерные компоненты управляют состоянием и бизнес-логикой, передавая данные презентационным.
• Атомарный дизайн (Atomic Design): Компоненты делятся на атомы (кнопки, инпуты), молекулы (формы), организмы (шапка сайта), шаблоны и страницы. Это помогает создавать единую дизайн-систему.

Пример структуры папок

src/
  components/          # Общие переиспользуемые компоненты
    Button/
      index.js
      Button.jsx
      Button.module.css
      Button.test.js
  features/            # Фичи приложения
    auth/
      components/
        LoginForm/
          index.js
          LoginForm.jsx
          LoginForm.module.css
      hooks/
        useAuth.js
      api/
        authApi.js
  pages/               # Страницы (композиция фич)
    HomePage.jsx
    ProfilePage.jsx
  App.jsx
  index.js

Практические рекомендации

• Используйте index.js для реэкспорта компонента из папки — это упрощает импорты.
• Избегайте глубокой вложенности (более 3-4 уровней).
• Выносите общую логику в кастомные хуки (например, useFetch).
• Для стилей используйте CSS Modules или styled-components, чтобы избежать конфликтов имен.

Вывод

Применяйте модульную структуру на основе фич для средних и крупных проектов. Для небольших приложений достаточно простой группировки по типам (components, containers, pages). Главное — соблюдать единообразие и принцип единственной ответственности.