JSX

JSX появился вместе с React в 2013 году и поначалу вызвал споры: многие считали, что смешивать разметку и логику в одном файле — плохая идея. Но в компонентном подходе это оказалось удобно: кнопка, её вид и её поведение лежат рядом, а не разбросаны по шаблонам и скриптам. Сегодня JSX — привычный способ писать интерфейсы на React, его также поддерживают Preact, Solid и другие библиотеки.

Браузер JSX не понимает. Перед выполнением код проходит через транспилятор — Babel, esbuild или встроенный в сборщик, — который превращает теги в обычные вызовы функций. В классической схеме это React.createElement, в новой, появившейся в React 17, — функции из модуля react/jsx-runtime.

Пример компонента

function CartItem({ name, qty, onRemove }) {
  return (
    <li className="cart__item">
      {name} — {qty} шт.
      {qty > 10 && <span>оптовая партия</span>}
      <button onClick={onRemove}>Удалить</button>
    </li>
  );
}

В фигурных скобках можно писать любое выражение JavaScript: подставить переменную, вызвать функцию, показать блок по условию. Обработчик события передаётся функцией, а не строкой.

Чем JSX отличается от HTML

• className вместо class и htmlFor вместо for: это слова, зарезервированные в JavaScript.
• Атрибуты событий пишутся в camelCase: onClick, onChange.
• Каждый тег должен быть закрыт, включая <img /> и <br />.
• Компонент возвращает один корневой элемент; несколько соседних оборачивают во фрагмент <>…</>.
• Стили передаются объектом: style={{ marginTop: 8 }}.
• Текст из переменных экранируется автоматически, что защищает от внедрения разметки.

JSX в WordPress

Редактор Gutenberg написан на React, и собственные блоки для него тоже обычно пишут на JSX. Официальный набор @wordpress/scripts уже содержит настроенную сборку: разработчик описывает интерфейс блока в редакторе и то, как он сохраняется в разметку записи, а команда сборки превращает JSX в готовый скрипт. Для PHP-разработчика это часто первое знакомство с React: интерфейс блока в редакторе живёт в JavaScript, а вывод на сайте может остаться на PHP.