Как JSX-разметка попадает в JavaScript?

JSX попадает в JavaScript на этапе сборки: браузер JSX не понимает, поэтому компилятор (Babel или TypeScript, вызываемые сборщиком) заранее превращает разметку в обычные вызовы функций.

Конвейер

Исходник .jsx/.tsx
  → сборщик (Vite/webpack) прогоняет файл через компилятор (Babel/esbuild/tsc/SWC)
  → JSX-синтаксис заменяется вызовами функций
  → в бандл попадает чистый JavaScript

Что во что превращается

Современный трансформ (React 17+, automatic):

const card = (
  <div className="card">
    <h2>{title}</h2>
    <Button onClick={save}>Ок</Button>
  </div>
);

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

import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';

const card = _jsxs('div', {
  className: 'card',
  children: [
    _jsx('h2', { children: title }),
    _jsx(Button, { onClick: save, children: 'Ок' }),
  ],
});

Старый трансформ (до React 17) генерировал React.createElement(...) — поэтому раньше был обязателен import React.

Детали трансформации

• DOM-теги (с маленькой буквы) становятся строками ('div'), компоненты (с большой) — ссылками на функции/классы (Button) — отсюда правило заглавной буквы.
• Атрибуты собираются в объект props; вложенность — в children.
• {выражения} остаются обычными JS-выражениями — JSX и есть JavaScript с сахаром.
• Результат вызовов — React-элементы (объекты { type, props }), ещё не DOM.

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

JSX превращается в JS на сборке: Babel/TS-компилятор заменяет разметку вызовами _jsx из react/jsx-runtime (раньше — React.createElement). Теги становятся строками, компоненты — ссылками, атрибуты — объектом props; результат — React-элементы, из которых React дальше строит DOM.