Що таке JSX? Розуміння технології

JSX (JavaScript XML) – це розширення синтаксису для JavaScript, яке використовується в бібліотеці React. Воно дозволяє писати HTML-подібний код у JavaScript і робить опис UI більш зрозумілим та зручним.

---

🔹 Основні особливості JSX

1. Схожість із HTML
   JSX виглядає як HTML, але працює всередині JavaScript-коду.

   const element = <h1>Привіт, світ!</h1>;
   

2. Трансформація у JavaScript
   Під час компіляції JSX перетворюється у звичайні виклики React.createElement():

   const element = React.createElement("h1", null, "Привіт, світ!");
   

3. Динамічний вміст через {}
   Всередині JSX можна вставляти змінні, виклики функцій або вирази.

   const name = "Андрій";
   const element = <h1>Привіт, {name}!</h1>;
   

4. Атрибути схожі на HTML, але з особливостями
   • Використовуються camelCase-атрибути (наприклад, className замість class).
   • Значення можуть бути JavaScript-виразами.

   const element = <button className="primary" disabled={false}>Натисни</button>;
   

5. Обов’язковий єдиний кореневий елемент
   Всі JSX-фрагменти мають бути загорнуті в один кореневий елемент:

   return (
     <div>
       <h1>Привіт</h1>
       <p>Ласкаво просимо до JSX!</p>
     </div>
   );
   

   Альтернативний варіант – використання React.Fragment (<>...</>):

   return (
     <>
       <h1>Привіт</h1>
       <p>Це без обгортки div!</p>
     </>
   );
   

---

🔹 JSX vs. HTML: Головні відмінності

JSX	HTML
className="my-class"	class="my-class"
htmlFor="label"	for="label"
{true ? "так" : "ні"}	Не підтримує логіку
style={{ color: "red", fontSize: "20px" }}	style="color: red; font-size: 20px;"
Закриття тегів у <img />, <br />, <input />	Може бути відкритий <img>

---

🔹 Чому варто використовувати JSX?

✅ Зручність – код легший для читання, ніж чистий JavaScript.
✅ Гнучкість – можливість використовувати JavaScript у шаблонах.
✅ Краща перевірка помилок – JSX-код компілюється, що дозволяє знаходити помилки раніше.
✅ Продуктивність – React оптимізує JSX під час компіляції.

---

🔹 JSX у функціональних компонентах

Ось приклад React-компонента, що використовує JSX:

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting name="Світ" />);

---

🔹 Висновок

JSX – це синтаксичне розширення JavaScript, що дозволяє писати HTML-подібний код у React-компонентах. Він зручний, ефективний та читається легше, ніж стандартні виклики React.createElement(). JSX – це не HTML, але він допомагає структурувати UI у знайомому форматі.

Якщо ти працюєш з Vue 3, то JSX теж можна використовувати через @vue/babel-plugin-jsx, але там його застосування менш популярне, оскільки Vue має шаблонний синтаксис.

Якщо потрібно більше деталей або прикладів використання, питай! 🚀