Ось готовий урок, створений у стилі CS50, адаптований під тему структури React-проєкту.

🎓 Тема: Структура React-проєкту. Від хаосу до порядку

1. 🔥 Вступ: Чому порядок — це не просто «красиво»

Уявіть, що ви вирішили приготувати вечерю. Ви заходите на кухню, але замість того, щоб ложки лежали в шухляді для приборів, а молоко — в холодильнику, абсолютно все скидано у величезну купу посеред кімнати. Виделки перемішані з борошном, тарілки — з брудними шкарпетками (хто зна, звідки вони там), а щоб знайти сіль, треба розкопати гору каструль.

Чи зможете ви приготувати вечерю? Можливо. Чи отримаєте ви задоволення? Навряд чи. Чи захочете ви повернутися на цю кухню завтра? Точно ні.

У програмуванні те саме. Коли ми пишемо код "для себе" на 50 рядків — це одне. Але сучасні React-проєкти — це тисячі файлів.

• Питання до вас: Ви коли-небудь відкривали чужий проєкт і відчували паніку, бо не розуміли, де починається код?
• Ще одне: Як знайти кнопку "Купити", якщо у вас 500 файлів в одній папці?

Сьогодні ми навчимося не просто "розкладати файли по папках", а будувати архітектуру, яка дозволить вашому проєкту рости й не розвалитися під власною вагою. Ми перетворимо ту купу посеред кімнати на професійну кухню мішленівського ресторану.

2. 🧠 Теоретична база: Анатомія проєкту

Давайте заглянемо під капот стандартного React-проєкту (наприклад, створеного через Vite або Create React App). Це не магія, це просто файлова система.

📂 Головні директорії (що треба знати залізно)

1. node_modules/ — "Чорна діра". Тут живуть бібліотеки, які написали інші люди (React, іконки, інструменти).
   • Інтуїція: Це склад запчастин. Ви берете звідти деталі, але ніколи нічого там не змінюєте руками. Якщо видалите цю папку — нічого страшного, команда npm install поверне все назад.
2. public/ — "Фасад будинку". Тут лежать файли, які браузер може отримати напряму: favicon.ico, robots.txt, картинки, які не змінюються.
   • Як це працює: Webpack/Vite просто копіює це "як є" у фінальну збірку.
3. src/ (Source) — "Ваша майстерня". Це найголовніша папка. Тут живе 99% вашого коду. Саме тут відбувається магія перетворення JS на інтерфейс.
4. package.json — "Паспорт проєкту". Список усіх залежностей (які бібліотеки потрібні) та скриптів (як запускати проєкт).
5. index.html — "Вхідні двері". Єдиний HTML-файл у всьому додатку. У ньому є один <div> з id="root", куди React "вмонтує" весь ваш додаток.

🏗 Логіка всередині src/

React не змушує вас використовувати конкретну структуру (на відміну від Angular), і це пастка! Але індустрія виробила стандарт. Ось як ми зазвичай ділимо логіку:

• Components (Цеглинки): Кнопки, інпути, картки.
• Pages (Кімнати): Зібрані з цеглинок сторінки (Головна, Про нас, Контакти).
• Assets (Декор): Картинки, шрифти, глобальні стилі.
• Utils / Helpers (Інструменти): Функції, які форматують дату або рахують податки.

Запам’ятайте: Структура папок має відображати структуру вашого інтерфейсу. Якщо у вас є сторінка "Login", логічно мати папку або файл, який так і називається.

3. 🧪 Приклади: Еволюція порядку

Приклад 1: "Студентський гуртожиток" (Плоска структура)

Це те, з чого починають новачки. Все в купу.

src/
├── App.css
├── App.jsx
├── Header.jsx
├── Footer.jsx
├── Button.jsx
├── main.jsx
├── UserProfile.jsx
├── api.js
└── logo.png

Питання: Що станеться, якщо у вас буде 50 компонентів? Відповідь: Ви витратите пів життя на скролінг списку файлів.

Приклад 2: "Стандарт індустрії" (Групування за типом)

Це класика. Ми розкладаємо речі по "шухлядах".

src/
├── assets/          # Картинки, шрифти
│   └── logo.png
├── components/      # Перевикористовувані деталі
│   ├── Button.jsx
│   ├── Header.jsx
│   └── Footer.jsx
├── pages/           # Цілі сторінки
│   ├── Home.jsx
│   └── Profile.jsx
├── utils/           # Допоміжні функції
│   └── formatDate.js
├── App.jsx          # Головний компонент-маршрутизатор
└── main.jsx         # Точка входу

Чому це краще? Якщо вам треба виправити кнопку — ви йдете в components. Якщо треба змінити верстку сторінки профілю — в pages. Мозок відпочиває.

Приклад 3: "Професійний підхід" (Модульність / Колокація)

А що, якщо кнопці потрібні свої стилі, а сторінці — свої допоміжні функції? Досвідчені розробники тримають пов'язані речі поруч.

src/
├── components/
│   ├── Button/           # Папка для компонента
│   │   ├── Button.jsx    # Логіка та розмітка
│   │   ├── Button.css    # Стилі саме для кнопки
│   │   └── Button.test.js # Тести для кнопки
│   └── ...
├── pages/
│   └── Profile/
│       ├── Profile.jsx
│       └── components/   # Компоненти, які потрібні ТІЛЬКИ на сторінці профілю
│           └── UserAvatar.jsx
└── ...

Питання: Чи бачите ви різницю? Ми перестали скидати всі стилі в один файл. Ми тримаємо CSS кнопки прямо біля кнопки. Навіщо: Якщо ви захочете видалити кнопку, ви видалите одну папку Button/ і не залишите сміття по всьому проєкту.

4. 🛠 Практична частина

Припустимо, ви працюєте над інтернет-магазином. У вас є папка src, де лежить усе підряд.

Завдання 1: Рефакторинг (Прибирання) У вас є такі файли в корені src/: * ProductCard.jsx * HomePage.jsx * formatCurrency.js (функція додавання знака $) * CheckoutPage.jsx * Navbar.jsx * banner.jpg

Створіть правильну структуру папок (components, pages, utils, assets) і розпишіть, який файл куди піде.

Завдання 2: Виправлення шляхів (Fix it) Ви перемістили ProductCard.jsx у папку src/components/. У файлі src/pages/HomePage.jsx був такий імпорт:

import ProductCard from './ProductCard';

Як треба змінити цей рядок, щоб код запрацював?

Завдання 3: Міні-кейс Вам треба створити компонент Modal (спливаюче вікно). У нього є: 1. JS код (Modal.jsx) 2. Стилі (Modal.css) 3. Іконка хрестика (close-icon.svg)

Як би ви організували це в структурі проєкту, щоб було максимально зручно? (Підказка: згадайте приклад №3).

Завдання 4: А що, якщо... Ви вирішили перейменувати файл main.jsx на start.js. Що ще в проєкті (поза папкою src) вам доведеться змінити, щоб сайт запустився? (Підказка: дивіться розділ "Теорія" про index.html).

5. 💡 Мислення як у розробника

Як відрізнити новачка від сеньйора, просто глянувши на дерево файлів?

1. Помилка новачка: Глибока вкладеність пекла.

   • src/components/users/profile/avatar/image/img.jsx
   • І потім імпорти виглядають так: import { x } from '../../../../../../utils'
   • Порада: Намагайтеся тримати структуру максимально пласкою, поки це можливо. Не створюйте папки заради папок.

2. Принцип "Колокація" (Colocation):

   • Сеньйор думає: "Зміни, які відбуваються разом, мають жити разом".
   • Якщо цей CSS файл використовується лише цим компонентом, не кладіть його в папку styles на іншому кінці проєкту. Покладіть його поруч.

3. Імпорт через index.js (Barrel exports):

   • Щоб не писати import Button from './components/Button/Button', професіонали створюють у папці Button файл index.js, який просто реекспортує компонент. Тоді можна писати красиво: import Button from './components/Button'.

6. 🧩 Підсумок

Сьогодні ми не написали складних алгоритмів, але ми зробили дещо важливіше — ми підготували ґрунт.

• Ми розібрали, що src — це ваш дім, а node_modules — це супермаркет.
• Ми навчилися розділяти компоненти, сторінки та утиліти.
• Ми зрозуміли, що структура — це про легкість змін у майбутньому.

Що ви тепер вмієте: Ви можете відкрити порожній проєкт і за 2 хвилини налаштувати професійну структуру папок, за яку вам подякують колеги (і ви самі через місяць).

🔜 Далі в курсі: Окей, у нас є красиві компоненти, розкладені по поличках. Але вони "мертві". Вони нічого не роблять. Як змусити кнопку реагувати на клік і змінювати дані на екрані? Наступна тема — Props та State (Дані, що живуть у компонентах). Готуйтеся, ми будемо оживляти нашого Франкенштейна!

📌 Як вам цей формат?

Якщо готові, виконуйте Завдання 1 прямо зараз у своєму редакторі коду або на листочку!