Модуль 6

JSX: як JavaScript і HTML працюють разом

Ось готовий урок, створений за твоїм майстер-промптом.

🎓 Урок: JSX — Як JavaScript і HTML стали одним цілим

Привіт, друзі! Радий вас бачити. 👋

Сьогодні ми не просто вивчимо новий синтаксис. Ми змінимо те, як ви уявляєте собі створення вебсторінок. Ми збираємось зруйнувати стіну між логікою (JavaScript) та візуалом (HTML).

Готові? Тоді поїхали! 🚀

1. 🔥 Вступ: Проблема та мотивація

Уявіть, що ви хочете побудувати будинок 🏠. У старі добрі часи веб-розробки (чистий JS) це виглядало так: ви телефонували на склад і казали: "Алло, дайте мені одну цеглину. Тепер покладіть її сюди. Тепер дайте вікно. Вставте його в стіну. А тепер пофарбуйте стіну."

У коді це виглядало приблизно так:

const div = document.createElement('div');
div.className = 'card';
const h1 = document.createElement('h1');
h1.textContent = 'Привіт!';
div.appendChild(h1);
document.body.appendChild(div);

Втомлює, правда? 😓 А тепер уявіть, що у вас складний інтерфейс, як Facebook чи Instagram. Скільки таких createElement і appendChild вам доведеться написати? Тисячі? Мільйони?

Риторичне питання:

Чи не було б круто, якби ми могли прямо всередині JavaScript сказати: "Ось мій HTML, просто покажи його", не граючись у конструктор LEGO по одній детальці?

Саме для цього і з'явився JSX. Це як магія, яка дозволяє писати розмітку прямо всередині коду логіки. Це не просто зручно — це революція у швидкості розробки.

2. 🧠 Теоретична база (Що під капотом?)

Що таке JSX? Офіційно: це розширення синтаксису для JavaScript (JavaScript XML). Простою мовою: це HTML, який живе всередині JavaScript.

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

Браузер не розуміє JSX. Якщо ви згодуєте йому <div /> всередині JS-файлу, він видасть помилку.

Тож як це працює? Тут в гру вступає транспайлер (наприклад, Babel). Уявіть його як перекладача. Ви пишете красивий JSX:

const element = <h1>Hello, World!</h1>;

Babel тихо перетворює це на той самий "нудний" JS, який розуміє браузер:

const element = React.createElement('h1', null, 'Hello, World!');

🔑 Що треба запам’ятати залізним правилом:

  1. Це JavaScript, а не рядок. Ми не ставимо лапки навколо HTML тегів.
  2. Один батьківський елемент. Функція не може повернути два окремих елементи, вона повертає одне "дерево". Потрібно все обгорнути в <div> або <>...</> (Фрагмент).
  3. CamelCase. Оскільки ми в JS, ми не пишемо class (бо це зарезервоване слово), ми пишемо className. Не onclick, а onClick.
  4. Магія фігурних дужок {}. Все, що всередині {...}, сприймається як чистий JavaScript. Це портал з HTML назад у логіку.

3. 🧪 Приклади (від простого до реального)

Приклад №1: Найпростіший

Спробуймо вивести заголовок.

const element = <h1>Це JSX, дитинко!</h1>;

Очікування: У змінній element лежить об'єкт, який React потім перетворить на DOM-вузол. Все просто.

Приклад №2: Динамічні дані (Включаємо магію {})

А що, як ми хочемо привітати конкретного користувача?

Питання до вас: Як нам вставити змінну name всередину тегу <h1>?

const name = "Олекса";
const element = <h1>Привіт, {name}!</h1>;

Результат: На екрані буде "Привіт, Олекса!". Чому: Фігурні дужки {} кажуть JSX-у: "Зупинись на секунду, тут буде JavaScript-код, обчисли його і встав результат".

Приклад №3: Умови та логіка

Давайте ускладнимо. У нас є користувач, і ми хочемо показати йому кнопку "Вхід" або "Вихід" залежно від статусу.

const isLoggedIn = true;

const button = (
  <button>
    {isLoggedIn ? "Вийти" : "Увійти"}
  </button>
);

Що ви очікуєте побачити? Оскільки isLoggedIn це true, тернарний оператор поверне "Вийти". Кнопка матиме текст "Вийти".

Увага: Всередині {} можна писати тільки вирази (те, що повертає значення: змінні, функції, математику, тернарні оператори). Там не можна писати if, while, for — бо це інструкції, а не вирази.

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

Час забруднити руки кодом! Виконайте ці завдання подумки або у редакторі (CodeSandbox/VS Code).

🔹 Завдання 1: Hello User

Створіть константу userName зі своїм ім'ям та змінну element, яка містить <h2>, що каже "Ласкаво просимо, [Ім'я]".

🔹 Завдання 2: Математика в UI

Створіть JSX, який виводить параграф <p>, всередині якого пораховано суму 2 + 2. Підказка: використовуйте {}.

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

Новачок написав цей код і він не працює. Чому? Виправте його.

const content = (
  <h1>Заголовок</h1>
  <p>Текст під заголовком</p>
);

Підказка: скільки тут кореневих елементів?

🔹 Завдання 4: Стилізація

В HTML ми пишемо style="color: red;". В JSX стиль — це об'єкт. Спробуйте створити <div> з червоним текстом.

// Допишіть код
const styleObj = { color: 'red', fontSize: '20px' };
const box = <div style={???}>Увага!</div>;

🔹 Міні-кейс: Картка товару

У вас є об'єкт:

const product = {
  title: "iPhone 15",
  price: 999,
  isDiscount: true
};

Напишіть JSX-структуру, яка: 1. Виводить назву в <h3>. 2. Виводить ціну. 3. Якщо isDiscount дорівнює true, додає поруч з ціною текст "(Акція!)" червоного кольору.

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

Як думає досвідчений React-розробник, дивлячись на JSX?

  1. "UI — це функція від даних". Я не думаю, як змінити текст кнопки. Я думаю: "Яка змінна відповідає за цей текст?". Я змінюю змінну — JSX оновлюється сам.
  2. Помилка [object Object]. Якщо ви бачите це на екрані, значить, ви спробували вивести цілий об'єкт всередині {}, а React не знає, як його показати. Виводьте конкретні властивості (user.name, а не user).
  3. Чистота коду. Якщо ваш JSX виглядає як суцільна математика та логіка — це поганий знак.
    • Погано: {x > 10 ? (y < 5 ? 'A' : 'B') : 'C'} (складно читати).
    • Добре: Винести логіку в окрему змінну перед return і вставити в JSX чисту змінну.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? Ми взяли сухий JavaScript і "одягли" його в костюм HTML.

Тепер ви вмієте: ✅ Писати HTML-розмітку прямо в JS файлах. ✅ Вставляти динамічні дані через {}. ✅ Розуміти, що браузер насправді бачить React.createElement, а не HTML.

Що далі? Зараз ми просто створювали змінні з JSX. Але що, якби ми могли створити свій власний тег? Наприклад, <MySuperButton />? На наступному уроці ми розберемо Компоненти — цегляні блоки всього сучасного вебу.

Гарного кодингу, і побачимось на наступній лекції! 👋

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