Посібник зі структурування папок вашого проєкту

Створення ефективної структури папок може бути складним завданням, але добре організована структура робить ваш код легшим для підтримки, масштабування та приємнішою для роботи. Цей посібник натхненний детальним поясненням з відео про оптимізацію структур папок для різних додатків, таких як веб-розробка, розробка ігор чи десктопних додатків. Ось як можна організувати ваш проект для максимальної ефективності та підтримуваності.

Загальні принципи

1. Розподіл за функціональними частинами (Features): Організуйте свою кодову базу так, щоб кожна функціональна частина вашого додатка була ізольована в окремій папці.
2. Глобальні та спільні ресурси: Окремо зберігайте спільні або глобальні ресурси в окремих папках, щоб уникнути взаємозалежностей між функціональними частинами.
3. Жорсткий потік даних (Data Flow): Забезпечте односпрямований потік даних, обмеживши спосіб взаємодії функціональних частин і спільних компонентів.
   4.
   Конфігурація ESLint: Використовуйте інструменти на кшталт ESLint для забезпечення структури і запобігання випадковим перехресним посиланням.

Рекомендована структура папок

Ось приклад структури, яка поєднує простоту з масштабованістю:

/src  
 |-- /app # Основна логіка додатка (наприклад, маршрути, точки входу)  
 |-- /features # Логіка та компоненти, специфічні для функцій  
 |-- /featureName # Папка для кожної функції (наприклад, продукти, користувачі)  
 |-- /components # Компоненти, специфічні для функції  
 |-- /hooks # Кастомні хуки, специфічні для функції  
 |-- /utils # Утилітні функції, специфічні для функції  
 |-- /components # Глобальні компоненти (наприклад, NavBar, Footer)  
 |-- /api # Спільні API-сервіси  
 |-- /utils # Загальні утилітні функції  
 |-- /hooks # Спільні кастомні хуки  
 |-- /assets # Спільні статичні ресурси (наприклад, зображення, іконки, стилі)

Детальний розбір

1.

`
/src/app

• Містить основну логіку вашого додатка.
• Папка app повинна головним чином з’єднувати компоненти та функціональність, без розміщення специфічної логіки для окремих функцій.

2. /src/features

• Кожна функція вашого додатка має свою окрему папку.
• Приклад: Функція products має таку структуру:

/features/products  
 |-- /components  
 | |-- ProductGrid.js  
 | |-- AddProductForm.js  
 |-- /hooks  
 | |-- useProductData.js  
 |-- /utils  
 |-- formatProductPrice.js

• Компоненти, хуки та утилітарні функції, що відносяться до цієї функції, зберігаються в цій папці.
• Це забезпечує незалежність функцій та модульність.

3. /src/components

• Містить усі глобальні компоненти, що використовуються в різних частинах додатка.
• Приклад: Компоненти, такі як NavBar, Footer або PageWithBackButton, які використовуються в кількох функціях.

4. /src/api

• Містить спільні API-сервіси.
• Приклад: Обробники API, посередники або сервіси, які використовуються в різних функціях.

5.

`
/src/utils

• Загальні утилітарні функції, що використовуються в додатку.
• Приклад: Форматери рядків, парсери або допоміжні функції.

6. /src/hooks

• Спільні кастомні хуки.
• Приклад: Хуки, такі як useAuth, useWindowDimensions або useDebounce, які використовуються в кількох функціях.

7. /src/assets

• Спільні статичні ресурси.
• Приклад: Зображення, іконки, шрифти та глобальні стилі.

Переваги цієї структури

1. Ізоляція: Кожна функція є самодостатньою, що мінімізує залежності та спрощує налагодження.
2. Масштабованість: Додавання нових функцій потребує лише створення нової папки в /features.
3. Чіткість коду: Розробники можуть швидко знаходити та розуміти відповідний код для будь-якої функції.
4. Легкість підтримки: Спільні ресурси централізовані, що зменшує дублювання коду.
   5.
   `
   Забезпечення відповідності: Інструменти, як-от ESLint, можуть гарантувати, що структура коду залишається послідовною, коли кодова база зростає.

Забезпечення структури за допомогою ESLint

Щоб забезпечити цю структуру папок, використовуйте плагін eslint-plugin-boundaries:

Приклад конфігурації

{  
 "plugins": ["boundaries"],  
 "settings": {  
 "boundaries/include": ["src/\*\*/\*"],  
 "boundaries/elements": [  
 { "mode": "full", "type": "shared", "pattern": "src/(components|api|utils|hooks|assets)/\*\*" },  
 { "mode": "full", "type": "feature", "pattern": "src/features/\*/\*\*" },  
 { "mode": "full", "type": "app", "pattern": "src/app/\*\*" }  
 ]  
 },  
 "rules": {  
 "boundaries/element-types": ["error", {  
 "default": "disallow",  
 "rules": [  
 { "from": "shared", "allow": ["shared"] },  
 { "from": "feature", "allow": ["shared", "feature"] },  
 { "from": "app", "allow": ["shared", "feature"] }  
 ]  
 }]  
 }  
}

Ця настройка гарантує:

• Спільний код може посилатися тільки на інший спільний код.
• Функції можуть посилатися на спільний код, але не на інші функції.

Ресурси

`

Перекладено з: Guide to Structuring Your Project Folders