<b>JSX — это не «синтаксис для красоты», а способ держать UI читаемым и предсказуемым</b>

<b>JSX — это не «синтаксис для красоты», а способ держать UI читаемым и предсказуемым</b>

JSX часто ругают за «магический HTML в JS», но в реальном проекте он решает более приземлённую задачу: делает дерево интерфейса частью обычного кода. Там, где template-язык начинает расползаться по файлам, JSX позволяет держать логику рядом с разметкой.

Полезно помнить три вещи:
— JSX не HTML: это выражения, props и условия, которые компилируются в вызовы React.
— Любая сложность в JSX должна быть оправдана. Если внутри строки слишком много тернарников, вынесите часть в переменные или компонент.
— Компонент должен описывать один фрагмент смысла. Если JSX читается как инструкция на сборку самолёта, архитектура уже просела.

Есть наблюдение которое стоит проверить: плохой JSX почти всегда сигнализирует не о «неправильной разметке», а о перегруженном компоненте. Обычно там смешаны получение данных, форматирование, бизнес-условия и UI-ветвления. Разделение этих слоёв резко упрощает поддержку.

Ещё один частый промах — пытаться использовать JSX как полноценный язык шаблонов. На практике он лучше работает, когда в нём остаются:
— простые условия,
— маппинг списков,
— вставка готовых компонентов,
— короткие inline-выражения.

Если JSX приходится «читать глазами» с заметным усилием, значит пора не переписывать стиль, а резать ответственность компонента.