Выражения в JSX
Тема дорожной карты · React
JSX — это синтаксическое расширение JavaScript, позволяющее React-разработчикам писать HTML-подобную разметку прямо внутри JavaScript-кода; для встраивания любого допустимого JavaScript-выражения в JSX используются фигурные скобки {}. Внутри фигурных скобок можно ссылаться на переменные, вызывать функции, выполнять арифметические операции или использовать тернарные операторы — всё, что вычисляется в значение, способное отрендерить React. Выражения в JSX обеспечивают динамический вывод фронтенда: компонент может отображать актуальные значения состояния, форматировать даты, отображать массивы для создания списков дочерних элементов или динамически вычислять имена классов. Значения атрибутов тоже можно задавать с помощью выражений — например, className={isActive ? 'active' : ''}, — что тесно связывает логику компонента с его разметкой в удобочитаемом виде. Понимание работы выражений в JSX является основой для написания любого 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, чтобы дебажить рендер-баги.