Володимир Шайтан Senior Full Stack Developer у UKEESS Software House, Викладач Комп'ютерної школи Hillel.

JSX — це «чарівна призма», крізь яку JavaScript отримує HTML-подібний синтаксис. У світі React JSX став стандартом, що дає змогу писати розмітку так само легко, як і звичайний HTML, але із силою JavaScript під капотом.

ЩО ТАКЕ JSX І НАВІЩО ВІН ПОТРІБЕН?

JSX (JavaScript XML) дозволяє писати в одному файлі й логіку на JavaScript, і розмітку, яка зовні дуже нагадує HTML. Це і є ключ до того, щоб у React можна було зручно компонувати елементи інтерфейсу.

Короткий приклад

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

Під час компіляції JSX-трансформатор (наприклад, Babel) перетворює це у:

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

Тож ви отримуєте повний контроль над виводом інтерфейсу — лише у знайомому форматі.

ЧИМ ВІН ВІДРІЗНЯЄТЬСЯ ВІД HTML?

Синтаксис самозакриття

<img src="avatar.png" />

1. Усі теги мають бути закриті, навіть якщо в HTML це не завжди робиться.

class → className та for → htmlFor

<div className="container"></div>
<label htmlFor="email">Email:</label>

2. Це для сумісності з ключовими словами JavaScript.

camelCase для подій і стилів

<button onClick={handleClick} />

3. Так React відрізняє атрибути від решти JS.

4. Екранування за замовчуванням: якщо виводити userInput, який містить <script>, JSX автоматично екранує тег, щоб код не виконався. Потрібно вручну використати dangerouslySetInnerHTML, щоб вставити сирий HTML.

ЯК ЦЕ ВСЕ ПРАЦЮЄ «ПІД КАПОТОМ»?

Транспіляція

Власне браузери не розуміють JSX. Що ж відбувається?

Ви пишете <div>{someVar}</div> у своїй React-компоненті.
Babel чи інший інструмент бере це й перетворює в React.createElement(...).
React зіставляє отриманий об’єкт зі своїм внутрішнім деревом елементів (схоже на те, як у WebAssembly ми маємо «бінарний код», який зрештою виконується «на металевому рівн»).

Це дозволяє React (а також іншим бібліотекам) обробляти зміни ефективно і швидко, без постійних ручних маніпуляцій DOM.

ПРИКЛАДИ ВИКОРИСТАННЯ

1. Змішування розмітки з JavaScript

const userName = 'Alice';
const greeting = <h2>Привіт, {userName}!</h2>;

Зверніть увагу: {userName} — це просто JavaScript-вираз у фігурних дужках.

2. Рендеринг списків

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Кожен елемент списку має key, аби React швидко оновлював певні елементи замість перевідмальовувати весь список.

3. Стилі як об’єкт

const styles = { color: 'blue', backgroundColor: 'lightgray' };
return <div style={styles}>Стилі прямо у коді</div>;

Замість class="..." можна писати style={...}, іменуючи властивості через camelCase.

4. Умовний рендеринг

{isAdmin
  ? <AdminPanel />
  : <UserPanel />}

або:
{showMessage && <Message />}

Синтаксис досить лаконічний — не потрібно писати зайвих if-else у відмальовці.

5. Обробка подій

<button onClick={() => alert('Натиснули')}>
  Клікни
</button>

Скорочено: анонімна стрілкова функція викликається при кліку.

ЦІКАВІ НЮАНСИ

Fragments
Замість обгортати всі елементи додатковим <div>, можна повернути кілька тегів у

React.Fragment або <>...</>:

<>
  <h1>Заголовок</h1>
  <p>Текст</p>
</>

У результаті жодних додаткових елементів у DOM.
dangerouslySetInnerHTML дає змогу рендерити сирий HTML-рядок. Але дуже обережно — це може викликати XSS. React спеціально називає це «dangerously» як попередження.
Можливість оптимізації:
- під час рендерингу React порівнює «старе» та «нове» дерево елементів, щоб оновити лише необхідні частини UI;
- якщо зловживати складними JS-виразами всередині JSX, це може ускладнити відстеження змін (але зазвичай React усе це ретельно оптимізує).
Дебагінг і Source Maps: як і з WebAssembly, де є досконалі інструменти для відладки, у JSX теж можна скористатися Source Maps, щоб дебажити вихідний код (написаний у JSX), а не згенерований JavaScript.
Транспіляція для старих браузерів
Навіть якщо ваш код на останньому стандарті JS, Babel робить полівіли (polyfills), забезпечуючи сумісність для старих середовищ.

ПЕРЕВАГИ Й НЕДОЛІКИ

Переваги

Зрозумілість: HTML-подібний синтаксис в одному місці із JS-логікою.
Автоматичне екранування: захист від XSS, якщо не використовувати «небезпечні» функції.
Чітка інтеграція з React: писати компоненти стає значно легше.

Недоліки

Необхідність збірки: браузер напряму не розуміє JSX, тож потрібен Babel або інший транспілятор.
Крива навчання: для людей, які звикли до «чистого» HTML, JSX може бути несподіваним.
Залежність від екосистеми: потрібні інструменти (Webpack, Vite чи Parcel) для збирання проєкту.

ПІДСУМОК

JSX — це не просто ще один синтаксис для «красивого коду». Це серцевина React, що робить створення UI більш дружнім, динамічним і контрольованим. І хоча воно може здатися дивним на початку (особливо, коли поєднується HTML і JS), насправді JSX чудово вписується у концепцію компонентів, допомагаючи швидко й ефективно реалізовувати складні застосунки.

Якщо ви хочете:

будувати динамічні фронтенд-застосунки;
мати більше гнучкості у відображенні стану;
легко «змішувати» JavaScript-логіку з інтерфейсом.

Тоді JSX — ваш вибір. Тож варто дати йому шанс і звикнути до нового формату запису. Зробивши це, ви швидко зрозумієте, чому React і JSX йдуть рука об руку та завойовують серця тисяч розробників.

Удачі у світі JSX і нехай ваш фронтенд сяє так само яскраво, як WebAssembly під час високопродуктивних обчислень!