JSX синтаксис
Тема дорожной карты · React
JSX Syntax — это расширение JavaScript, разработанное командой React, позволяющее писать HTML-подобную разметку непосредственно в JavaScript или TypeScript, которая затем компилируется Babel или современным JSX-трансформом в вызовы React.createElement(). JSX Syntax сочетает выразительность HTML-шаблонов с полными возможностями JavaScript, позволяя React-разработчикам встраивать динамические выражения через {}, условно рендерить элементы с помощью тернарных операторов и &&, а также перебирать массивы для создания списков компонентов. Самозакрывающиеся теги обязательны в JSX для элементов без дочерних (например, <img />, <br />), и все теги должны быть корректно закрыты — это строже, чем стандартный разбор HTML. JSX Syntax не является допустимым JavaScript по умолчанию и требует шага компиляции, но повсеместно применяется в экосистеме React, поскольку производит читаемый декларативный код компонентов. Твёрдое понимание JSX Syntax — это первый шаг для любого фронтенд-разработчика, изучающего 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, чтобы дебажить рендер-баги.