Владимир Шайтан 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 во время высокопроизводительных вычислений!