JSX — это не HTML внутри JavaScript; это результат этапа компиляции.

Вопрос 1

При создании нового проекта на React и просмотре файла App.jsx часто возникает один и тот же сюрприз: файл написан на JavaScript, но в нем содержатся теги, идентичные HTML. При первом взгляде на компонент, возвращающий элемент <h1>, возникает вопрос о том, не научился ли движок языка каким-то образом парсить теги.

Прежде чем продолжать, определитесь, понимает ли обычный JavaScript следующее:

const heading = <h1>Hello World</h1>;

• A) Да
• B) Нет

Правильный ответ — B) Нет. Стандартный движок JavaScript не имеет грамматики для обработки тегов <h1>. Если поместить такую же строку в файл с расширением .js без предварительной обработки, парсер выдаст ошибку синтаксиса.

React никогда не отправляет JSX в браузер. На этапе сборки маркапп первоначально преобразуется в обычные функции. Концептуально процесс выглядит следующим образом:

You write JSX
      │
      ▼
Compiler (Babel / Vite)
      │
      ▼
JavaScript
      │
      ▼
Browser

В браузер попадает только JavaScript. Теги, которые вы ввели, никогда не появляются в сетевом ответе в формате JSX.

Представьте себе это как Google Translate

Представьте, что вы пишете письмо на французском языке для друга, который читает только по-английски. Друг вдруг не начнет понимать французский; между ними находится переводчик. JSX работает точно так же. Вы создаете синтаксис, похожий на HTML, компилятор (Babel, SWC или преобразователь внутри Vite) превращает его в JavaScript, и только затем браузер выполняет этот код.

Так что же такое JSX?

Новички часто сводят JSX к формулировке «HTML внутри JavaScript». Это упрощение неверно. JSX похож на HTML, но это не HTML. Более точное определение: JSX — это расширение синтаксиса JavaScript, которое позволяет описывать интерфейс пользователя с использованием структуры, похожей на HTML. Важным словом здесь является похожая на HTML, а не сам HTML. Названия атрибутов отличаются (className вместо class), и окружающие выражения находятся в системе значений JavaScript, а не в отдельном языке разметки.

Зачем был создан JSX?

Без JSX та же самая заголовочная строка:

<h1>Hello React</h1>

была бы выражена с помощью вложенных вызовов функций:

React.createElement(
  "h1",
  null,
  "Hello React"
);

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

Вопрос 2

Что будет отображаться?

const name = "Ananya";

function App() {
  return (
    <h1>Hello {name}</h1>
  );
}

• A) Привет {name}
• B) Привет, Ананья
• C) Ошибка синтаксиса

Ответ — B) Привет, Ананья. Круглые скобки указывают JSX на необходимость прервать режим разметки и вычислить выражение на JavaScript. Значение name вставляется в заголовок, поэтому интерфейс отображает строку, а не синтаксис скобок.

У круглых скобок есть только одна функция

Каждый раз, когда JSX встречает {…}, он вычисляет выражение внутри и вставляет результат. В этом заключается вся суть: выполняется JavaScript, затем вставляется полученное значение. Для операторов или блоков с побочными эффектами не существует другого режима.

Вопрос 3

Какое содержимое скобок допускается в JSX?

• A) Ссылка на переменную, например {name}
• B) Арифметическое выражение, например {10 + 20}

C) конструкция if в блочном стиле, написанная внутри скобок

D) тернарный оператор, выбирающий между "Adult" и "Minor" на основе значения age

A, B и D работают. C — нет. JSX принимает только выражения, возвращающие значение. Простое if является оператором и не возвращает ничего, что можно было бы поместить в структуру данных; тернарный оператор возвращает значение, поэтому проверка возраста в варианте D корректна, тогда как вариант C отклоняется.

Заключение

JSX с первого дня может показаться чем-то волшебным: кажется, будто HTML и JavaScript слились в один язык. Его механика проще. JSX — это своего рода упрощение для разработчиков. Прежде чем приложение запустится в браузере, компилятор преобразует его в обычный JavaScript. Как только эта процедура становится понятной, синтаксис маркировки в JS перестаёт вызывать путаницу и превращается в удобный способ описания структуры интерфейса.