Правила JSX
Тема дорожной карты · React
JSX Rules — это синтаксические ограничения, определяющие правила написания JSX, — расширения JavaScript XML в React, — которые необходимо соблюдать для корректной компиляции с помощью Babel или JSX-трансформа TypeScript. Каждое JSX-выражение должно иметь один корневой элемент: возврат нескольких элементов требует либо оборачивающего контейнера <div>, либо React Fragment (<>...</>) для избежания ошибки компиляции. Атрибуты JSX следуют соглашению camelCase, а не именам HTML-атрибутов: className вместо class, htmlFor вместо for, onClick вместо onclick — потому что JSX является синтаксическим сахаром для вызовов JavaScript-функций, а не HTML. JavaScript-выражения, встроенные в JSX, должны быть обёрнуты в фигурные скобки {}, тогда как строковые литералы можно передавать как значения атрибутов в кавычках. Понимание JSX Rules — это отправная точка в разработке фронтенда на React, поскольку их нарушение порождает чёткие ошибки компиляции, которые обеспечивают правильную структуру компонентов.
Как это работает
Правила JSX — это JavaScript с XML-разметкой внутри выражений. Компилятор Babel/SWC превращает <div className="x">{value}</div> в React.createElement("div", {className: "x"}, value). Фигурные скобки {} переключают между JSX и JavaScript-выражениями. Атрибуты пишут camelCase (onClick, className) — JSX это JavaScript, не HTML. Условный рендер — тернарники или &&; списки — .map() со стабильным key для reconciliation.
Когда применять
JSX — для render-вывода каждого компонента: идиоматичный React. Альтернатива (React.createElement) работает, но читается хуже на нетривиальном UI. Используйте && для "рендерить X, если условие"; тернарники для "рендерить X или Y"; никогда || для conditional render (0 || <X/> рендерит 0, не <X/>). Используйте Fragment (<>...</>), когда возвращаете несколько siblings без лишнего wrapper div.
Типичные ошибки
Ловушки Правила JSX: for вместо htmlFor и class вместо className (HTML-привычки утекают); рендер массивов без стабильного key (React предупреждает; переупорядочивание ломает DOM); индекс массива как key при переупорядочивании (state приписывается не туда); тяжёлые вычисления прямо в JSX (пересчитываются каждый рендер — выносите в useMemo или helper). Мысленно «разворачивайте» JSX в createElement, чтобы дебажить рендер-баги.