Когда вы пишете React, вы часто встречаете JSX — синтаксис, похожий на HTML, в вашем коде JavaScript. Но задумывались ли вы когда-нибудь, как этот код работает в браузере?

Вот волшебство: JSX не является допустимым JavaScript! Браузеры не могут понять это напрямую. За кулисами появляется такой инструмент, как Babel, который конвертирует (или «транспилирует») JSX в обычный JavaScript.

Процесс:

1.Вы пишете JSX — он выглядит как HTML, но живет внутри ваших компонентов React. Например:

const element = 
Hello, World!
;

2.Babel преобразует его — в процессе сборки Babel преобразует JSX в чистый JavaScript с помощью React.createElement:

const element = React.createElement('h1', null, 'Hello, World!');

3.JavaScript в браузере — Наконец, этот стандартный JavaScript — это то, что выполняет браузер, динамически создавая DOM.

Как работает Бабель?

Babel — это мощный компилятор JavaScript, который позволяет использовать новейшие функции JavaScript (включая JSX в React), обеспечивая при этом совместимость с различными браузерами и средами. Вот как работает Babel:
1.Разбор
Babel начинает с анализа вашего современного кода JavaScript или JSX в Абстрактное синтаксическое дерево (AST). AST — это подробная древовидная структура, которая представляет код в удобном для Babel (и других инструментов) виде. анализировать и манипулировать. На этом этапе Babel читает код, но еще не меняет его.
Например, Babel использует этот JSX-код:

const element = 
Hello, World!
;

И генерирует AST, который представляет структуру этого кода.
2.Трансформация
Затем Babel применяет серию плагинов к AST. Каждый плагин отвечает за преобразование определенных частей AST в соответствии с правилами, которые он определяет. Эти преобразования могут включать преобразование современного синтаксиса JavaScript (например, стрелочных функций или async/await) в более старые, совместимые с браузером версии.
Для JSX Babel преобразует:

const element = 
Hello, World!
;

const element = React.createElement('h1', null, 'Hello, World!');

3. Генерация кода
После завершения всех преобразований Babel генерирует код JavaScript из преобразованного AST. Это последний шаг, на котором создается удобочитаемый вывод, который может выполнить браузер или Node.js.

Давайте подведем итоги...

Почему это важно:

JSX позволяет писать более интуитивный, основанный на компонентах код пользовательского интерфейса, но именно Babel и среда выполнения JavaScript воплощают его в жизнь. Понимание этого преобразования поможет вам лучше устранять неполадки и писать более оптимизированные приложения React.