Что такое JSX в React?
Определение
JSX (JavaScript XML) — это синтаксическое расширение JavaScript, разработанное командой React, которое позволяет описывать структуру UI в декларативном, похожем на HTML виде прямо внутри JS/TS-файлов. Браузеры не понимают JSX напрямую — перед запуском он преобразуется (транспилируется) инструментами вроде Babel или SWC в обычный JavaScript.
Как это работает под капотом
Код на JSX:
const element = <h1 className="title">Привет, мир!</h1>;
после компиляции превращается примерно в:
const element = React.createElement(
'h1',
{ className: 'title' },
'Привет, мир!'
);
В современных версиях React (начиная с 17) применяется новый JSX-рантайм — babel автоматически подставляет функцию jsx из react/jsx-runtime, поэтому явный import React больше не обязателен. В обоих случаях результат — обычный JS-объект (React-элемент), описывающий, какой узел DOM и с какими свойствами нужно отрисовать. Сам JSX не создаёт DOM-узлы напрямую — этим занимается React (через ReactDOM или другой рендерер).
Ключевые особенности синтаксиса
Выражения в фигурных скобках
Любое JS-выражение можно вставить внутрь разметки через {}:
const name = 'Аня';
const el = <p>Привет, {name}!</p>;
Один корневой элемент
JSX-выражение должно возвращать один корневой узел. Если нужно вернуть несколько элементов без лишнего обёрточного div, используют фрагмент <>...</> или React.Fragment.
Атрибуты в camelCase
Поскольку JSX компилируется в JS, зарезервированные слова заменены: class → className, for → htmlFor, обработчики событий пишутся как onClick, onChange и т.д.
Самозакрывающиеся теги
Элементы без children обязаны закрываться сами: <img />, <input />.
Условный рендеринг и списки
Поскольку внутри {} доступен обычный JS, условия обычно выражают через тернарный оператор или &&, а списки — через .map() с обязательным key.
Зачем это нужно
JSX не обязателен — тот же UI можно описать через прямые вызовы React.createElement, но это громоздко и плохо читается. JSX делает компонентный код нагляднее: структура разметки видна сразу, а не собирается из вложенных вызовов функций. При этом JSX остаётся просто «сахаром» над JS — можно свободно комбинировать разметку с переменными, циклами и функциями.
Итог
JSX — это удобный декларативный синтаксис для описания UI, компилируемый в вызовы функций, создающих React-элементы. Он не выполняется браузером напрямую и требует шага транспиляции (Babel/SWC/TypeScript).
Что хочет услышать интервьюер
Понимание, что JSX — это синтаксический сахар, а не отдельный язык или часть спецификации JavaScript
Знание, что JSX компилируется в React.createElement или вызовы jsx-рантайма
Понимание, что JSX создаёт не DOM-узлы, а объекты-описания (React-элементы)
Знание отличий синтаксиса от HTML: className, camelCase-атрибуты, самозакрывающиеся теги, фигурные скобки для выражений
Понимание, что JSX-выражение должно иметь один корневой элемент (или фрагмент)
Пример: JSX и его компиляция
// Исходный JSX-код
function Greeting({ name }) {
return (
<div className="greeting">
<h1>Привет, {name}!</h1>
{name === 'Админ' && <span>У вас есть доступ</span>}
</div>
);
}
// После компиляции Babel (новый JSX-рантайм)
import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
function Greeting({ name }) {
return _jsxs('div', {
className: 'greeting',
children: [
_jsxs('h1', { children: ['Привет, ', name, '!'] }),
name === 'Админ' && _jsx('span', { children: 'У вас есть доступ' })
]
});
}
Пример: Список с key и фрагмент
function UserList({ users }) {
// Возвращаем фрагмент, чтобы не добавлять лишний div в DOM
return (
<>
<h2>Пользователи</h2>
<ul>
{users.map((user) => (
// key нужен React для эффективного обновления списка
<li key={user.id}>{user.name}</li>
))}
</ul>
</>
);
}
Типичные ошибки
Утверждение, что JSX выполняется браузером напрямую без компиляции
Путаница между JSX и HTML — использование class вместо className, for вместо htmlFor
Возврат нескольких соседних элементов без обёртки или фрагмента
Убеждение, что JSX обязателен для написания React-кода
Незнание, что за JSX стоит обычный вызов функции, возвращающий JS-объект
AI-тренажеры
Практика в студии
4.8
