Что такое JSX?

JSX (JavaScript XML) — расширение синтаксиса JavaScript, позволяющее описывать UI в декларативном, похожем на HTML виде прямо в коде.

Во что компилируется JSX

JSX — синтаксический сахар. Babel/TS-компилятор превращает его в обычные вызовы функций:

const element = <h1 className="title">Привет, {user.name}</h1>;

компилируется в:

import { jsxs } from 'react/jsx-runtime';
const element = jsxs('h1', { className: 'title', children: ['Привет, ', user.name] });

Результат — обычный JS-объект (React-элемент), из которого React строит Virtual DOM.

Правила

• Выражения вставляются в фигурных скобках: {user.name}, {items.map(...)}.
• Атрибуты в camelCase: className, onClick, htmlFor (это свойства JS-объекта, а не HTML-атрибуты).
• Компонент должен возвращать один корневой элемент (или <>...</> — Fragment).
• Пользовательские компоненты — с большой буквы: <UserCard />; с маленькой — DOM-теги.
• Значения экранируются автоматически — защита от XSS по умолчанию.

Зачем JSX, если можно без него

Можно писать createElement вручную, но JSX читается как разметка, показывает структуру дерева и даёт статическую проверку (опечатка в компоненте — ошибка компиляции, а не тихий баг).

Коротко для собеседования

JSX — синтаксическое расширение JS для декларативного описания UI. Компилируется в вызовы jsx()/createElement(), которые возвращают объекты (React-элементы). Не HTML: атрибуты в camelCase, выражения в {}, автоэкранирование значений защищает от XSS.