С помощью чего React преобразуется в JS?

Как React (JSX) преобразуется в JavaScript

Преобразование кода React (в частности, синтаксиса JSX) в стандартный JavaScript выполняется с помощью инструментов транспиляции и компиляции, главным из которых является Babel. Этот процесс абсолютно необходим, поскольку современные браузеры не понимают JSX напрямую — они исполняют только чистый JavaScript.

Ключевой инструмент: Babel

Babel — это транспилятор (transpiler), который преобразует код, написанный на современных стандартах JavaScript (ES6+) и с использованием синтаксических расширений вроде JSX, в обратно совместимый код ES5, понятный всем браузерам.

Для работы с React в Babel необходимо подключить специальный пресет (набор плагинов) — @babel/preset-react. Именно он отвечает за трансформацию JSX.

Пример преобразования

Рассмотрим типичный React -компонент:

// Исходный код (JSX)
function Greeting({ name }) {
  return <h1 className="title">Hello, {name}!</h1>;
}

После обработки Babel этот код превращается в следующий JavaScript:

// Преобразованный код (JavaScript)
function Greeting({ name }) {
  return React.createElement(
    "h1",
    { className: "title" },
    "Hello, ",
    name,
    "!"
  );
}

Как видно, каждый JSX-элемент заменяется на вызов функции React.createElement(). Эта функция является фундаментальным строительным блоком React и принимает три основных аргумента (и последующие — для дочерних элементов):

1. Тип элемента (строковый тег, например "h1", или ссылка на другой компонент/функцию).
2. Объект пропсов (properties) или null, если атрибутов нет. Атрибуты JSX (вроде className) становятся ключами этого объекта.
3. Дочерние элементы (children). Это могут быть строки, другие элементы, созданные React.createElement, или выражения, обёрнутые в {}.

Альтернативные и вспомогательные инструменты

Хотя Babel — стандарт де-факто, экосистема предлагает и другие варианты:

• SWC (Speedy Web Compiler): Компилятор, написанный на Rust, который работает значительно быстрее Babel. Используется в современных инструментах, таких как Next.js (начиная с версии 12), для этапа транспиляции. Он также имеет плагин для преобразования JSX.
• esbuild: Ещё один чрезвычайно быстрый бандлер и транспилятор на Go, который также умеет обрабатывать JSX. Часто используется в инструментах разработки (dev servers) для скорости.
• TypeScript Compiler (tsc): Если проект использует TypeScript, его компилятор может напрямую трансформировать JSX (при условии, что в tsconfig.json установлена опция "jsx": "react-jsx"). Однако под капотом часто используется тот же Babel или аналогичная логика.
• Современные сборщики: Они не выполняют транспиляцию сами, но организуют процесс.

    *   **Webpack**: Использует `babel-loader` для обработки файлов через Babel.
    *   **Vite**: В режиме разработки использует esbuild для предварительной транспиляции, а для продакшн - сборки может использовать Rollup с плагинами.
    *   **Parcel**: Имеет встроенную поддержку JSX и Babel "из коробки" без конфигурации.

Зачем это нужно: цели транспиляции JSX

Преобразование JSX преследует несколько важных целей:

• Браузерная совместимость: JSX — это нестандартный синтаксис. Его превращение в вызовы React.createElement делает код исполняемым в любой среде.
• Оптимизация: Транспиляторы позволяют применять оптимизации на этапе сборки.
• Поддержка современных возможностей JS: Позволяет разработчикам писать код на ES6+ (стрелочные функции, деструктуризацию, модули), который будет работать в старых браузерах.
• Интеграция с экосистемой: Открывает дорогу для использования статического анализа, линтинга (ESLint) и других инструментов, работающих с абстрактным синтаксическим деревом (AST).

Эволюция формата: Runtime и Automatic Runtime

Важно отметить, что формат преобразования JSX эволюционировал:

• Классический Runtime (показан в примере выше): JSX превращается в React.createElement(...). Это требует, чтобы React был в глобальной области видимости при исполнении кода.
• Автоматический Runtime (введён в React 17): JSX трансформируется в специальные функции _jsx или _jsxs, которые импортируются автоматически из нового места — react/jsx-runtime. Это позволяет не импортировать React в каждом файле явно и открывает возможности для будущих оптимизаций. Babel preset настраивается флагом "runtime": "automatic".

Таким образом, магия превращения декларативного JSX в исполняемый JavaScript — это результат работы мощных инструментов сборки, главным из которых долгое время был и остаётся Babel, хотя высокопроизводительные альтернативы вроде SWC и esbuild набирают популярность в современных проектах.