0Pricing
React Academy · Урок

Структура папок и соглашения об именовании

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

«Структура папок и соглашения об именовании» — бесплатный урок React Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

В этом уроке вы изучите распространённые структуры папок для проектов React, узнаете соглашения об именовании файлов и компонентов и поймёте, как организовать код по мере роста проекта.

Структура по умолчанию

Минимальный проект Vite + React содержит `src/App.jsx` и `src/main.jsx`. Для небольших демонстраций этого достаточно, но такая структура плохо масштабируется. По мере добавления возможностей создавайте отдельные папки, чтобы хранить связанный код вместе.
src/
  main.jsx
  App.jsx
  index.css

Структура на основе возможностей

Группируйте файлы по возможностям, а не по типам. В каждой папке возможности находятся её компонент, стили, тесты и вспомогательные функции. Благодаря этому целую возможность легко добавить или удалить за один раз.
src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

Именование файлов компонентов

Называйте файлы компонентов в формате **PascalCase**, соответствующем имени компонента: `UserCard.jsx`, `NavigationBar.jsx`. Стандартная практика — один компонент в одном файле. Расширение `.jsx` (или `.tsx`) сообщает редакторам, что файл содержит JSX.

Именование файлов без компонентов

Для хуков, вспомогательных средств и констант используйте **camelCase**: `useAuth.js`, `formatDate.js`, `apiClient.js`. Имена файлов тестов должны соответствовать исходным файлам, а к имени следует добавлять `.test` или `.spec`: `useAuth.test.js`.

Индексные файлы для чистого импорта

Добавление `index.js` в папку позволяет импортировать из пути к папке, а не из полного пути к файлу. Используйте индексные файлы только для повторного экспорта — без логики.
// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

Абсолютный импорт с псевдонимами путей

Настройте псевдоним `@/`, указывающий на `src/`, в `vite.config.js` и `tsconfig.json`. Это избавляет от хрупких относительных путей вроде `../../../../components/Button`.
// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

Общие компоненты и компоненты возможностей

Размещайте компоненты, используемые только одной возможностью, в папке этой возможности. Переносите компонент в `src/components/` только тогда, когда он нужен двум или более возможностям. Не извлекайте компоненты преждевременно.

Файлы констант и конфигурации

Храните строки, заданные напрямую в коде, базовые URL API и обёртки для переменных окружения в `src/lib/constants.js` или `src/config.js`. Никогда не распределяйте строки `process.env.VITE_API_URL` по множеству файлов.
// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

Типы и интерфейсы (TypeScript)

В проектах TypeScript размещайте типы рядом с возможностью или компонентом, который их использует. Для общих типов, применяемых в разных возможностях, создайте `src/types/` и отдельный файл для каждой предметной области.

Быстрая проверка

В чём главное преимущество структуры папок на основе возможностей по сравнению со структурой на основе типов?

Итоги

Используйте папки на основе возможностей, формат PascalCase для файлов компонентов, camelCase для хуков и вспомогательных средств, повторный экспорт из index.js для чистого импорта и псевдоним пути вроде @/, чтобы избавиться от длинных относительных путей.

Курс завершён

Поздравляем! Вы завершили курс **React Strict Mode и лучшие практики**. Теперь Вы понимаете поведение StrictMode, умеете писать чистые функции отрисовки, правильно использовать ключи и ссылки, а также создавать масштабируемую структуру папок.

Часто задаваемые вопросы

Урок «Структура папок и соглашения об именовании» бесплатный?

Да — полный текст урока «Структура папок и соглашения об именовании» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Структура папок и соглашения об именовании»?

Организуйте проект React с папками по функциям и понятными именами файлов Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

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

Сколько времени занимает урок «Структура папок и соглашения об именовании»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Что делает StrictMode
  2. Чистые компоненты и отказ от побочных эффектов при отрисовке
  3. Лучшие практики для ключей и ссылок
  4. Структура папок и соглашения об именовании
← Назад к React Academy