Что такое JSX в React и зачем он нужен

Что проверяют

Понимаете ли вы, что это синтаксический сахар над вызовами функций, и знаете ли следствия этого.

Как отвечать

JSX это расширение синтаксиса, позволяющее писать разметку прямо в JavaScript. Браузер его не понимает, он превращается сборщиком в вызовы функций.

<Button type="primary">Найти</Button>
// превращается в
jsx(Button, { type: "primary", children: "Найти" })

Раньше это был React.createElement, сейчас новая трансформация с jsx из react/jsx-runtime, поэтому импортировать React в каждый файл больше не нужно.

Зачем: разметка и логика одного компонента живут вместе, а не в трёх файлах, и при этом остаётся обычный JavaScript со всеми его возможностями. Условие это тернарник, список это map, переиспользование это функция.

Правила, которые следуют из природы JSX:

• это выражение: его можно вернуть, положить в переменную, передать пропсом;
• компонент пишется с большой буквы, иначе имя будет воспринято как строка тега;
• атрибуты по правилам JavaScript: className вместо class, htmlFor вместо for, стили объектом;
• один корневой узел, для чего есть фрагмент <>...</>;
• безопасность по умолчанию: вставляемые значения экранируются, поэтому внедрение разметки требует явного dangerouslySetInnerHTML;
• key в списках нужен алгоритму сравнения, а не JSX как таковому.

Где спотыкаются

Считают JSX шаблонизатором или отдельным языком.

Не могут объяснить, во что он компилируется.

Пишут компонент с маленькой буквы и получают неизвестный тег.

Ставят индекс массива в key и получают переезжающее состояние элементов при вставке.