Ось твій урок у стилі David Malan. Висока енергія, чітка структура і фокус на розумінні "навіщо це нам".

🎓 CS50: React. Епізод 1. Твій перший компонент

Привіт, друзі! Це CS50... ну, або майже. Сьогодні ми зануримося у світ React.

Але перш ніж ми напишемо хоч рядок коду, давайте запитаємо себе: яку проблему ми намагаємось вирішити?

1. 🔥 Вступ: Проблема "Копіпасти"

Уявіть, що ви будуєте сайт на звичайному HTML. Вам потрібно зробити картку товару для інтернет-магазину: фото, назва, ціна, кнопка "Купити". Ви пишете 20 рядків HTML-коду. Чудово!

Але стривайте. У магазині 1000 товарів.

Що ви будете робити? 1. Копіювати ці 20 рядків 1000 разів? (Це 20,000 рядків коду!) 2. А що, якщо дизайнер прийде і скаже: "Знаєш, кнопку 'Купити' треба перемістити вгору"? Вам доведеться правити це в 1000 місцях вручну?

Це пекло. Це неефективно. І це точно не те, як працюють професіонали.

Аналогія: Уявіть, що ви архітектор. * HTML — це як будувати будинок, викладаючи кожну цеглинку вручну, знову і знову. * React-компонент — це як створити 3D-форму (шаблон) для стіни. Ви створили форму один раз, а потім просто "штампуєте" стіни стільки разів, скільки потрібно.

Сьогодні ми навчимося створювати такі "штампи". Ми створимо ваш перший React-компонент.

2. 🧠 Теоретична база: Що таке компонент?

Давайте заглянемо "під капот". Не лякайтеся термінів.

У світі React компонент — це просто JavaScript-функція. Так, звичайна функція, яку ви вже знаєте. Але з однією особливістю: вона повертає не число (як 2 + 2), а UI (користувацький інтерфейс).

Що потрібно запам'ятати залізно:

Компонент = Функція.
Ім'я функції має починатися з Великої Літери. (Наприклад: Button, а не button). Це закон.
Функція повертає розмітку. Це виглядає як HTML, але насправді це JSX (JavaScript XML).

Як це працює "під капотом"? (Інтуїтивно)

Коли ви пишете <MyButton />, React не вставляє це одразу в браузер. Він "викликає" вашу функцію MyButton(). Вона віддає йому опис кнопки. React бере цей опис, порівнює з тим, що є на екрані, і акуратно малює (рендерить) кнопку в браузері.

Головна ідея: Ми вчимо JavaScript малювати HTML.

3. 🧪 Приклади: Від простого до реального

Приклад 1: Мінімальний компонент

Давайте створимо найпростіший компонент у світі.

function Greeting() {
  return <h1>Привіт, світе!</h1>;
}

Питання до вас: Що станеться, якщо я напишу цей код, але спробую використати його як <greeting /> (з маленької літери)? Відповідь: React подумає, що це звичайний HTML-тег (як <div>), і нічого не спрацює. Тому завжди PascalCase!

Приклад 2: Типовий UI-елемент (Кнопка)

Уявіть кнопку, яку ми хочемо використовувати скрізь на сайті.

function PrimaryButton() {
  // Ми повертаємо кнопку з певними класами стилів
  return (
    <button className="btn-blue">
      Натисни мене
    </button>
  );
}

Зверніть увагу: У звичайному HTML ми пишемо class, а тут — className. Чому? Тому що це JavaScript, а слово class у JS вже зайняте!

Приклад 3: Вкладеність (Композиція)

А тепер — магія. Як нам побудувати цілу сторінку? Ми вкладаємо компоненти один в один, як LEGO.

function Header() {
  return <header>Логотип і Меню</header>;
}

function Footer() {
  return <footer>Контакти: +380...</footer>;
}

// Головний компонент
function App() {
  return (
    <div>
      <Header />
      <main>
        <h2>Ласкаво просимо!</h2>
        <PrimaryButton />
      </main>
      <Footer />
    </div>
  );
}

Що ви тут бачите? Компонент App не пише весь код сам. Він делегує роботу: "Гей, Header, намалюй шапку. Гей, PrimaryButton, намалюй кнопку". Це робить код чистим і зрозумілим.

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

Час бруднити руки кодом! Відкрийте редактор (або CodeSandbox) і спробуйте:

🔹 Завдання 1. Copy-Paste & Run Скопіюйте приклад Greeting і змусьте його з'явитися на екрані.

🔹 Завдання 2. Зміна умов Створіть компонент ProfileCard. Нехай він повертає div, всередині якого є h2 з вашим ім'ям і p з вашою професією.

🔹 Завдання 3. Виправ помилку (Debug) У вас є код, який не працює. Знайдіть 2 помилки:

function userAvatar() {
  return <img src="avatar.jpg" alt="User" class="circle-img" />;
}

(Підказка: згадайте про великі літери та HTML-атрибути в JS).

🔹 Завдання 4. Міні-кейс Створіть структуру для Поста в Instagram. Вам потрібен один головний компонент Post, який всередині себе використовує три інші (придумайте їх самі, наприклад: PostHeader, PostImage, PostActions).

🔹 Питання "А що, якщо..." Що буде, якщо функція-компонент нічого не поверне (return null)? Спробуйте. Це баг чи фіча?

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

Як відрізнити новачка від профі, дивлячись на їхні компоненти?

❌ Типова помилка новачка: "Божественний компонент"

Новачок створює один компонент App і пхає туди 500 рядків HTML: шапку, сайдбар, контент, футер, модальні вікна. Результат: Це неможливо читати і підтримувати.

✅ Як думає профі (The React Way):

Профі дивиться на дизайн сайту і подумки ріже його на прямокутники. * "Ага, ось ця кнопка повторюється 5 разів? Це окремий компонент". * "Ця картка користувача складна? Винесу її в окремий файл".

Золоте правило: Один компонент має робити одну річ, але робити її добре (Single Responsibility Principle).

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? 1. Зрозуміли, що React рятує нас від копіпасти. 2. Дізналися, що компонент — це просто функція, яка повертає UI. 3. Засвоїли правило Великої Літери. 4. Побачили, як збирати інтерфейс із "цеглинок".

Ми навчилися створювати "штамп". Але зачекайте... Зараз наш штамп Greeting завжди друкує "Привіт, світе!". А що, якщо ми хочемо привітати конкретно Олега чи Марію, не створюючи нові компоненти?

Нам потрібно навчитися передавати дані всередину функції. У наступному епізоді: Props (Пропси) — як зробити наші компоненти розумними та динамічними.

А поки що — це був CS50! 👋