Что такое JSX?

Главная мысль

JSX — синтаксическое расширение JavaScript, которое позволяет писать разметку, похожую на HTML, прямо в коде компонентов. Это не HTML и не строка шаблона: после транспиляции (Babel, SWC, esbuild) JSX превращается в вызовы создания элементов React (исторически React.createElement, сейчас часто автоматический JSX runtime).

const el = <h1 className="title">Hello</h1>;
// концептуально близко к:
const el2 = React.createElement('h1', { className: 'title' }, 'Hello');

Важные отличия от HTML, которые любят проверять:

• атрибуты в camelCase: className, htmlFor, onClick, tabIndex;
• JS-выражения только в фигурных скобках: {user.name}, {items.map(...)};
• нужен один корень (или фрагмент <>...</>);
• булевы пропсы и обработчики — обычные значения JS, не строки;
• style принимает объект, а не CSS-строку: style={{ marginTop: 8 }}.

JSX удобен, но формально не обязателен: компонент можно описать через createElement. На практике JSX почти всегда используют — читаемость и DX выше, меньше шума.

Безопасность: React экранирует текстовые дети по умолчанию, что снижает риск XSS при выводе пользовательских строк. Опасный обход — dangerouslySetInnerHTML, его стоит упоминать как исключение.

Итог

JSX — удобный синтаксис описания UI в JS; компилятор превращает его в обычные вызовы создания элементов.