JSX: розширення JavaScript та приклади використання

Що таке JSX?

JSX (JavaScript XML) — синтаксичне розширення для JavaScript, вперше представлене в React у 2013 році. Воно дозволяє розробникам описувати структуру користувацького інтерфейсу в декларативному стилі, поєднуючи розмітку та логіку в одному файлі.

До появи JSX розробники використовували рядкові шаблони (Mustache, Handlebars) або створювали DOM-елементи вручну через document.createElement. Обидва підходи мали недоліки: рядкові шаблони не перевірялися на типи, а ручне створення DOM було громіздким і схильним до помилок.

React обрав інший шлях — вбудовування розмітки прямо в код. Це рішення викликало суперечки в спільноті, але з часом стало стандартом. Сьогодні JSX використовується не лише в React, а й у SolidJS, Preact, Qwik і навіть у Vue через плагіни.

Базовий синтаксис JSX

JSX-елемент виглядає як HTML-тег, але вбудовується безпосередньо в JavaScript. Кожен елемент транслюється у виклик React.createElement з трьома аргументами: тип елемента, об'єкт пропсів і дочірні елементи. Один кореневий елемент — обов'язкове правило: JSX-вираз має повертати один батьківський елемент або фрагмент.

import React from 'react';

// Базовий JSX — один кореневий елемент
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Фрагменти для групування

Коли не потрібен зайвий DOM-вузол, використовуйте React.Fragment або короткий синтаксис <></>. Фрагменти не створюють справжнього DOM-елемента, а лише групують дочірні вузли. Це особливо корисно в таблицях і списках, де зайва обгортка порушила б HTML-структуру.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

Вирази та змінні в JSX

Будь-який JavaScript-вираз вбудовується в JSX через фігурні дужки { }. Усередині можна використовувати змінні, виклики функцій, тернарні оператори та методи масивів. Умовний рендеринг виконується через тернарний оператор або логічне І.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

Ключове обмеження — усередині фігурних дужок можна використовувати лише вирази, не інструкції. Не можна використовувати if/else, for, switch — лише тернарний оператор, логічні оператори та методи масивів. Виклики функцій дозволені, зокрема стрілкові.

Відмінності JSX від HTML

JSX візуально схожий на HTML, але має принципові відмінності. Атрибути пишуться в camelCase — className замість class, onClick замість onclick, tabIndex замість tabindex. Це пов'язано з тим, що JSX транслюється в JavaScript, де дефіс у назві властивості неприпустимий.

Ще одна важлива відмінність — самозакривні теги. В HTML деякі теги (br, hr, input) можуть бути незакритими. У JSX усі самозакривні теги зобов'язані мати закривний слеш: <br />, <input />. Імена SVG-атрибутів теж конвертуються в camelCase: strokeWidth, fillOpacity.

Як JSX транспілюється в JavaScript

Браузери не розуміють JSX напряму. Перед виконанням JSX-код проходить через транспілятор — Babel, TypeScript або esbuild. Кожен JSX-елемент перетворюється на виклик createElement або jsx/runtime.

Трансформація через Babel

// Оригінальний JSX
const element = <h1 className="title">Hello</h1>;

// Після транспіляції
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

З React 17 з'явилася нова JSX-трансформація, що не потребує імпорту React. Автоматичний імпорт jsx-runtime дозволяє писати компоненти без import React from 'react'. Babel і TypeScript підтримують цю трансформацію через налаштування {"runtime": "automatic"}.

JSX поза React: Solid, Preact, Vue

Хоча JSX асоціюється з React, інші фреймворки також його використовують. SolidJS використовує JSX з компіляцією в реальні DOM-вузли, без Virtual DOM. Preact — легка альтернатива React з повною підтримкою JSX. Vue підтримує JSX через @vue/babel-plugin-jsx, хоча його основний шаблон — template.

Ключова відмінність — семантика виразів. У React JSX-вирази виконуються під час кожного рендеру. У SolidJS JSX компілюється один раз, а оновлення відстежуються через сигнали. Це впливає на продуктивність: SolidJS не потребує Virtual DOM і reconciliation, тому JSX-рендеринг швидший.

У TypeScript JSX підтримується на рівні мови. Файли з розширенням .tsx автоматично обробляють JSX-синтаксис. Типізація пропсів — одна з головних переваг TypeScript + JSX: IDE підказує очікувані атрибути, типи колбеків та обов'язковість пропсів.

Найкращі практики роботи з JSX

Пишіть JSX-код, який легко читати та підтримувати. Виносьте складні вирази в окремі змінні або функції — це покращує читаність і дозволяє тестувати логіку окремо від розмітки. Використовуйте фрагменти замість зайвих div-обгорток.

Правило табуляції — дотримуйтеся відступів для вкладених елементів. Кожен рівень вкладеності — один рівень відступу. Закривний тег має бути на рівні відкривного. Для довгих атрибутів використовуйте перенесення рядка.

Уникайте inline-стрілкових функцій у пропсах, якщо вони створюються на кожен рендер. У таких випадках обгортайте колбек у useCallback або виносьте функцію за межі компонента. Розділяйте складні компоненти на дрібніші — кожен компонент має відповідати за одну логічну одиницю інтерфейсу.