JSX: что это и зачем

Понимаем, что JSX — это не HTML внутри JS, а удобная запись вызовов функции, которую преобразует сборщик.

JSX — расширение синтаксиса JavaScript, позволяющее описывать UI разметкой; перед запуском оно компилируется в обычные вызовы React.createElement.

Зачем смешивать разметку и логику

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

const name = "Аня";
const element = <h1>Привет, {name}!</h1>;

Это не строка и не HTML

JSX не является строкой (кавычек нет) и не является HTML, который браузер понимает напрямую. Сборщик (Vite) превращает каждый тег в вызов функции. Эти две записи эквивалентны:

// JSX, который пишете вы:
const el = <h1 className="title">Привет</h1>;

// то, во что он превращается:
const el = React.createElement("h1", { className: "title" }, "Привет");

Понимание этого снимает много вопросов. Раз JSX — это вызов функции, то он возвращает обычный JavaScript-объект (его называют «React-элемент»), который можно положить в переменную, вернуть из функции, передать дальше.

Фигурные скобки: окно в JavaScript

Внутри JSX в фигурных скобках { } можно вставить любое JavaScript-выражение: переменную, вызов функции, арифметику, тернарный оператор:

const user = { name: "Иван", age: 30 };
const el = (
  <div>
    <p>{user.name}</p>
    <p>Через год будет {user.age + 1}</p>
    <p>{user.age >= 18 ? "Взрослый" : "Ребёнок"}</p>
  </div>
);

Важное слово — выражение. Можно вставить то, что возвращает значение. Нельзя вставить if или for (это инструкции, а не выражения) — вместо них используют тернарник и map, к которым мы вернёмся позже.

Почему скобки — это выражение

Чтобы прочувствовать разницу между выражением и инструкцией, посмотрите на чистом JavaScript, что именно подставится:

const user = { name: "Иван", age: 30 };
const label = user.age >= 18 ? "Взрослый" : "Ребёнок";
console.log("Имя: " + user.name);
console.log("Через год: " + (user.age + 1));
console.log("Статус: " + label);

Вывод:

Имя: Иван
Через год: 31
Статус: Взрослый

Ровно эти же выражения вы и пишете внутри { } в JSX — React подставит их результат в разметку.

Итог

JSX — это синтаксис, который сборщик превращает в вызовы React.createElement, возвращающие объект-элемент.
В фигурных скобках { } работает любое JS-выражение, но не инструкции if/for.
JSX — это не строка и не HTML, а удобная запись на JavaScript.