Модуль 1

Що таке React і навіщо потрібні SPA

Ось твій урок у стилі CS50. Вмикай уяву, ми починаємо! 🚀

🎓 CS50: React та ера Single Page Applications (SPA)

Привіт, друзі! Мене звати [Твоє Ім'я], і це... вступ до сучасної фронтенд-розробки.

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

1. 🔥 Вступ: Чому інтернет був "повільним"?

Уявіть собі ситуацію. Ви заходите в класичну бібліотеку, щоб взяти книгу. Ви підходите до бібліотекаря і кажете: "Дайте мені 'Гаррі Поттера', будь ласка".

Бібліотекар каже: "Секунду", виганяє всіх з кімнати, робить ремонт, перефарбовує стіни, заносить нові меблі і тільки потім кладе перед вами книгу.

Звучить абсурдно, правда? Але саме так працював (і іноді працює) класичний веб!

🤔 Питання до вас: Згадайте старі сайти державних установ або форуми 2000-х. Ви натискаєте маленьку кнопку "Далі", екран стає білим, сторінка перезавантажується 2 секунди, і ви знову бачите майже те саме, тільки текст змінився. Дратує? Ще й як.

А тепер згадайте Instagram або Facebook. Ви ставите лайк ❤️. Чи перезавантажується вся сторінка? Ні. Сердечко просто стає червоним. Миттєво.

У чому різниця? * Старий підхід — це MPA (Multi-Page Application). Кожна дія = новий запит на сервер = нова HTML-сторінка. * Новий підхід — це SPA (Single Page Application). Ми завантажуємо сторінку один раз, а далі просто міняємо дані "на льоту".

І щоб робити це ефективно, нам потрібен інструмент. Цей інструмент — React.

2. 🧠 Теоретична база: Як це працює "під капотом"

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

Що таке SPA (Single Page Application)?

Це веб-сайт, який завантажує лише один HTML-файл. Коли ви переходите по вкладках, браузер не просить у сервера нову сторінку. Він просто каже: "Гей, JavaScript, зітри контент 'Головної' і намалюй мені контент 'Про нас'". Це створює ілюзію миттєвості.

Що таке React?

Це бібліотека (не фреймворк, це важливо!), створена Facebook, щоб будувати інтерфейси.

🛠 Як працював старий JavaScript (Imperative):

Ви самі шукали елементи і міняли їх вручну.

"Знайди div з id='app', створи заголовок, додай текст, встав заголовок у div..." Це як будувати будинок, кладучи кожну цеглину руками.

🚀 Як працює React (Declarative):

Ви просто описуєте кінцевий результат.

"Я хочу заголовок із текстом 'Привіт'. Якщо користувач залогінений — покажи кнопку, якщо ні — не показуй." React сам розбереться, як це додати в DOM (структуру сторінки).

🔑 Ключове поняття: Virtual DOM

Запам'ятайте цю аналогію: Уявіть, що у вас є креслення будинку (Virtual DOM) і справжній будинок (Real DOM). Коли ви хочете поміняти вікно: 1. React спочатку вносить зміни у креслення. 2. Порівнює нове креслення зі старим. 3. Бачить: "Ага, змінилося тільки вікно". 4. Йде до справжнього будинку і міняє тільки це вікно. Стіни, дах і фундамент він не чіпає.

Саме тому React такий швидкий.

3. 🧪 Приклади: Від болю до магії

Давайте подивимось на код.

👴 Стара школа (Vanilla JS)

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

// HTML: <button id="btn">Натисни мене</button>

const button = document.getElementById('btn');
button.addEventListener('click', function() {
  if (button.innerText === 'Натисни мене') {
    button.innerText = 'Натиснуто!';
    button.style.backgroundColor = 'green';
  } else {
    button.innerText = 'Натисни мене';
    button.style.backgroundColor = 'gray';
  }
});

Що тут не так? Ми постійно звертаємось до браузера, шукаємо елементи, перевіряємо текст... А якщо кнопок буде 100? Код перетвориться на спагеті. 🍝

⚛️ Стиль React

А тепер подивіться сюди.

function MagicButton() {
  // Ми використовуємо "стан" (state) - пам'ять компонента
  const [clicked, setClicked] = React.useState(false);

  return (
    <button
      onClick={() => setClicked(!clicked)}
      style={{ backgroundColor: clicked ? 'green' : 'gray' }}
    >
      {clicked ? 'Натиснуто!' : 'Натисни мене'}
    </button>
  );
}

Питання до вас: Ви помітили, що ми тут не пишемо "знайди елемент" або "зміни текст"? Ми просто сказали: "Кнопка має бути зеленою, ЯКЩО вона натиснута". Ми описуємо логіку, а React малює результат.

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

Час забруднити руки кодом! (Мисленнєво або в редакторі).

Завдання 1: "Hello React"

Уявіть, що у вас є компонент Welcome. Він має виводити <h1>Привіт, світе!</h1>. Напишіть цей код.

Завдання 2: Персоналізація

Змініть код так, щоб він приймав ім'я name і виводив: <h1>Привіт, [Ім'я]!</h1>.

Завдання 3: Виправ помилку 🐛

Студент написав такий код для лічильника лайків, але він не працює. Чому?

function LikeCounter() {
  let likes = 0; // Звичайна змінна

  function addLike() {
    likes = likes + 1;
    console.log(likes); // В консолі росте, а на екрані ні!
  }

  return <button onClick={addLike}>Likes: {likes}</button>;
}

Підказка: React не слідкує за звичайними змінними. Йому треба повідомити про зміни. Яку спеціальну функцію (хук) ми забули?

Завдання 4: Міні-кейс "Світлофор" 🚦

У вас є "стан", який може бути 'red', 'yellow' або 'green'. Напишіть логіку: якщо color === 'red', показуємо напис "СТОЇМО". Якщо 'green' — "ЙДЕМО".

Завдання 5: А що, якщо...

Уявіть, що вам треба вивести список із 1000 товарів. * Варіант А: Написати 1000 разів <div class="item">...</div> в HTML. * Варіант Б: Створити один компонент ProductItem і використати цикл (map) у React. Чому Варіант Б кращий не тільки для ліні, а й для підтримки коду?

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

Як відрізнити новачка від профі в React?

🚫 Новачок думає: "Мені треба змінити колір кнопки. Я знайду її через querySelector і поміняю клас". Помилка: У React ми ніколи не чіпаємо DOM напряму! Це ламає всю магію оптимізації.

✅ Профі думає: "У мене змінилися дані (стан). Кнопка зараз активна чи ні? Ага, дані змінилися — React сам оновить інтерфейс".

Порада з практики: Думайте про UI (інтерфейс) як про функцію від даних. UI = f(State) Якщо у вас правильні дані (state), інтерфейс намалюється правильно автоматично. Не думайте, як малювати. Думайте, які дані зараз актуальні.

6. 🧩 Підсумок

Отже, що ми сьогодні винесли:

  1. SPA — це сайти, які працюють як мобільні додатки: швидко, плавно, без перезавантажень.
  2. React — це бібліотека, яка дозволяє будувати інтерфейс із "цеглинок" (компонентів).
  3. Virtual DOM — це секрет швидкості React (порівнює креслення, міняє мінімум).
  4. Декларативність — ми кажемо що хочемо бачити, а не як це робити покроково.

Тепер ви вмієте: Розуміти різницю між кодом старого зразка і сучасним підходом. Ви більше не будете дивитися на сайти як на прості HTML-сторінки. Ви бачитимете там компоненти і стани.

🔍 В наступній серії: Ми згадували "цеглинки". Але як з однієї деталі Lego побудувати Зірку Смерті? На наступному уроці ми розберемо Компоненти та Пропси (Props) — як передавати дані між батьками та дітьми (без сімейних драм).

Це був CS50. Побачимось! 👋

← До списку уроків Наступний урок →