Лучшие практики создания структуры папок и файлов для приложения React

Когда вы запускаете новое приложение, одно из первых решений, которое вам нужно принять, — это как организовать структуру папок.

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

Поскольку у каждого проекта есть своя область, цели и особенности, вам необходимо отразить эти особенности в вашем коде, структуре файлов и папок.

Вот почему так важно знать и понимать, что вы собираетесь создать, прежде чем приступить к его созданию, а также потому, что эта структура играет решающую роль в масштабируемости и ремонтопригодности проекта.

Если вы не используете самоуверенный фреймворк, такой как Next.js, вы, вероятно, будете использовать Vite или даже Create React App, так что есть вероятность, что вам потребуется создать собственную структуру папок и файлов.

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

Отказ от ответственности

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

С учетом сказанного, давайте перейдем к объяснению!

Структура папок верхнего уровня

В целом ваша структура папок верхнего уровня будет выглядеть так:

dist/
public/
src/
...

В этой статье я сосредоточусь в основном на папке src/, которая содержит файлы, с которыми вы будете работать большую часть времени.

Источник/ Папка

src/
|-- App.jsx
|-- index.css
|-- main.jsx

main.jsx является точкой входа приложения и в основном отображает App.jsx в DOM. Этот файл также импортирует index.css, который является файлом CSS верхнего уровня приложения, содержащим общие стили. Например, если вы используете TailwindCSS, это место, где будет расположен импорт @tailwind.

Файл App.jsx — это само приложение. Это место, где вы будете добавлять Router, Context Providers, настраивать сервисы и так далее. Все там предназначено для всего приложения.

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

src/
|-- adapters/
|-- assets/
|-- components/
|-- contexts/
|-- hooks/
|-- pages/
|-- services/
|-- utils/

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

`src/adapters`

Здесь у вас будут адаптеры для внешних источников, например API, функции браузера, такие как локальное хранилище и файловая система. Эта папка также может называться providers/, но это может сбивать с толку из-за поставщиков Context API. Или даже lib/, но я предпочитаю называть его adapters/.

Пример:

src/
|-- adapters/
|---- api.js
|---- localStorage.js
...
// src/adapters/api.js
export const api = {
  get: (url) => axios.get(url),
  // ...
};

// src/adapters/localStorage.js
export const localStorage = {
  get: (key) => {
    const value = localStorage.getItem(key);
    if (value) {
      return value;
    }

    throw new Error("KEY_NOT_FOUND");
  },
  // ...
};

`src/assets`

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

Пример:

src/
|-- assets/
|---- image/
|------ logo-transparent.png
|------ clients/
|-------- foo-logo.png
|-------- bar-profile-picture.png
|---- svg/
|------ loading-spinner.svg
...

`src/components`

Здесь будут жить все ваши компоненты, кроме главных страниц.

Есть несколько способов внутреннего разделения этой папки в зависимости от потребностей проекта. Мне нравится создавать папки для группировки связанных компонентов, а затем папки компонентов внутри них.

src/
|-- components/
|---- core/
|---- forms/
|---- layouts/
|---- pages/
|---- shared/
...

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

core/: изолированные компоненты, которые являются строительными блоками приложения;
forms/: компоненты, используемые для создания форм;
layouts/: макеты приложения, используемые на каждой странице;
pages/: компоненты, используемые внутри определенных страниц;
shared/: компоненты, которые могут быть общими для нескольких страниц.

Пример:

src/
|-- components/
|---- core/
|------ Card/
|-------- Card.jsx
|-------- Card.test.js
|-------- style.scss
|-------- index.js
|---- forms/
|------ TextInput/
|-------- TextInput.jsx
|-------- TextInput.test.js
|-------- style.scss
|-------- index.js
|---- layouts/
|------ PageLayout/
|-------- PageLayout.jsx
|-------- PageLayout.test.js
|-------- style.scss
|-------- index.js
|---- pages/
|------ HomePage/
|-------- HomeCarousel/
|---------- HomeCarousel.jsx
|---------- HomeCarousel.test.js
|---------- style.scss
|---------- index.js
|---- shared/
|------ ShoppingCart/
|-------- ShoppingCart.jsx
|-------- ShoppingCart.test.js
|-------- style.scss
|-------- index.js
...

`src/contexts`

Эта папка будет содержать все контексты управления состоянием, которые будет использовать ваше приложение. Это может измениться, если приложение использует другие решения, такие как Redux. В этом случае — если вы следуете шаблонам Redux Toolkit — вам нужно создать папку features или slices.

Общая идея здесь не в названии этой папки, а в ее назначении.

Поскольку эта папка сильно зависит от используемого решения для управления состоянием, вам необходимо адаптировать ее к потребностям выбранного инструмента.

`src/hooks`

Место, где будут располагаться все хуки приложения. Крюки также можно понимать как функции вашего приложения, которые вы можете подключать к любому количеству компонентов, которое вам нужно.

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

Пример:

src/
|-- hooks/
|---- useForm.js
|---- useWindowSize.js
|---- authentication/
|------ useLogin.js
|------ useSignUp.js
...

Здесь useForm и useWindowSize являются хуками глобального уровня. Те, что находятся в папке authentication/, строго связаны с функцией аутентификации приложения.

`src/pages`

Эта папка содержит все страницы вашего приложения. Идея каждой страницы заключается в использовании компонентов из папки компонентов для создания пользовательского интерфейса.

Страницы могут использовать компоненты из всех папок, но будут использоваться в основном из следующих:

src/components/layouts/: для построения базового макета страницы;
src/components/pages/PAGE_NAME: чтобы получить определенные компоненты для соответствующей страницы;
src/components/core/: использовать такие элементы, как Button и Typography, для построения страницы;
src/components/shared/: использовать элементы, которые являются общими для страниц;

Я не добавлял компонент forms, потому что в идеале каждая форма должна иметь собственный компонент внутри папки shared/ или pages/. Но не стесняйтесь получать компоненты формы напрямую, если это необходимо.

`src/services`

Все вызовы для каждой конечной точки API будут находиться в этой папке. Каждая служба, вероятно, будет использовать адаптер API для вызова API и будет вызываться внутри хука, который вызывается внутри компонентов. На эту тему я написал статью, объясняющую, как правильно организовать вызовы API.

Вы также можете создавать файлы верхнего уровня для каждой группы сервисов или по одному сервису на файл, или даже создавать папки для каждого типа сервиса, решать вам.

Примеры упомянутых подходов приведены ниже:

TOP-LEVEL FILE:
src/
|-- services/
|---- user.js (exports functions like getUser, createUser, etc.)

OR

ONE SERVICE PER FILE:
src/
|-- services/
|---- getUser.js
|---- createUser.js

OR

GROUP SERVICES BY TYPE:
src/
|-- services/
|---- user/
|------ getUser.js
|------ createUser.js
|------ index.js (exports all functions)

Опять же, лучший подход — это тот, который соответствует вашим потребностям и потребностям вашей команды.

`src/utils`

Utils — это чистые функции JavaScript, которые можно повторно использовать в приложении. Чистые функции — это в основном функции, которые при вводе всегда будут возвращать одно и то же значение.

Та же идея, что и выше для сервисов, может быть использована для утилит:

TOP-LEVEL FILE:
src/
|-- utils/
|---- user.js (exports functions like calculateUserGrades, isUserBirthday, etc.)

OR

ONE UTIL PER FILE:
src/
|-- utils/
|---- calculateUserGrades.js
|---- isUserBirthday.js

OR

GROUP UTILS BY TYPE:
src/
|-- utils/
|---- user/
|------ calculateUserGrades.js
|------ isUserBirthday.js
|------ index.js (exports all functions)

Соглашения об именах файлов

В примерах все имена файлов очень простые, по шаблону [filePurpose].[fileExtension], например [createUser].[js].

Хотя один очень распространенный способ - указать тип файла в имени перед расширением. Это вопрос выбора, и для некоторых людей это может улучшить читаемость проекта. Например:

services/createUser.js → services/createUser.service.js
utils/isUserBirthday.js → utils/isUserBirthday.util.js

Кроме того, для компонентов React я всегда использую Pascal Case (ComponentName) и предпочитаю использовать camel-case (fileName) вместо kebab-case (file-name) для имен файлов, которые не являются компонентами React, например сервисы и утилиты.

Но для папок я предпочитаю использовать регистр kebab, если в них несколько слов. Одним из примеров является служебная папка для ресурса, связанного с категориями продуктов. Я бы создал групповую папку, например:

src/
|-- services/
|---- product-categories/
|------ getProductCategories.js
|------ updateProductCategory.js

Заключение

Структура проекта — очень важная и личная тема. Использование таких фреймворков, как Next.js, упрощает задачу в этом смысле, потому что они очень самоуверенны.

Одна из идей состоит в том, чтобы создать проект с помощью Next.js, а затем клонировать его, например, с помощью Vite, чтобы вы могли сравнить и создать свой собственный шаблон.

Моя цель состояла в том, чтобы дать вам некоторое представление о структуре вашего собственного проекта. Вы можете использовать эту идею в качестве шаблона, но всегда помните о структуре, которая лучше всего соответствует вашим потребностям.

Если у вас есть какие-либо отзывы или предложения, отправьте мне письмо

Отличное кодирование!

Лучшие практики создания структуры папок и файлов для приложения React

Отказ от ответственности

Структура папок верхнего уровня

Источник/ Папка

src/adapters

src/assets

src/components

src/contexts

src/hooks

src/pages

src/services

src/utils

Соглашения об именах файлов

Заключение

Вопросы по теме

`src/adapters`

`src/assets`

`src/components`

`src/contexts`

`src/hooks`

`src/pages`

`src/services`

`src/utils`