Что такое JSX, как работает его синтаксис, зачем он нужен в React и как начать писать JSX-код

• Что такое JSX
• Зачем нужен JSX в React
• Основные правила синтаксиса JSX
• Ошибки новичков при работе с JSX
• Как начать изучать JSX

JSX — это синтаксическое расширение JavaScript, с помощью которого можно создавать разметку, похожую на HTML, прямо в JavaScript-файлах. До появления JSX разработчики хранили содержимое страницы в HTML, стили — в CSS, а логику — в JavaScript, часто в разных файлах. Но с ростом интерактивности веб-приложений логика стала определять, что отображать на экране. Поэтому в React решили объединить разметку и логику в одном месте — внутри компонентов.

JSX и React — это разные сущности. JSX — это синтаксис, а React — библиотека, которая умеет работать с этим синтаксисом. JSX не превращается в HTML напрямую — сначала транспайлер преобразует его в вызовы React.createElement, и только потом React создаёт элементы на странице.

JSX изучают на курсе «Фронтенд-разработчик». На нём за 10 месяцев вы сможете освоить фронтенд-разработку с нуля. После обучения — получите диплом о профессиональной переподготовке.

В React компоненты — это функции, которые возвращают разметку. Если бы JSX не существовало, пришлось бы писать так:

JSX не обязателен в React, но большинство разработчиков применяют его в силу простоты и удобства. Благодаря ему код становится короче, чище и проще в поддержке. Когда разметка и логика находятся рядом, легче изменять компонент: всё, что к нему относится, собрано в одном файле.

JSX внешне похож на HTML. Но у них есть несколько важных отличий. Эти отличия нужно запомнить, чтобы код работал и не выдавал ошибок.

• Один корневой элемент. Компонент может возвращать только один элемент. Нельзя вернуть два соседних тега без обёртки. Решение: обернуть всё в <div> или пустой тег <>…</> (это называется Fragment). Fragment не добавляет лишних элементов в HTML-дерево и не ломает вёрстку.
• Все теги должны быть закрыты. В HTML некоторые теги (например, <img> или <input>) можно не закрывать. В JSX так делать нельзя — каждый тег должен быть явно закрыт: <img /> или <input />. Это же касается и парных тегов: <div> обязательно должен иметь закрывающий </div>.
• Атрибуты — в camelCase. Вместо class пишут className, вместо tabindex — tabIndex. Это связано с тем, что JSX превращается в JavaScript-объекты, а class — зарезервированное слово в JS. Исключения: атрибуты aria-* и data-* остаются с дефисами.
• Можно вставлять JavaScript через фигурные скобки. В JSX можно подставлять переменные и выполнять код, если заключить его в {…}: например, {user.name} или {formatDate (today)}.
• Стили через объект. Вместо строки для style передают объект со свойствами в camelCase: style={{backgroundColor: 'black'}}. Двойные фигурные скобки — это не специальный синтаксис, а просто объект внутри JSX-выражения.

Эти правила — основа работы с JSX. Если их запомнить, синтаксис перестанет быть проблемой. На начальном этапе можно использовать онлайн-конвертер HTML в JSX — он поможет быстрее привыкнуть к синтаксису.

Вот несколько частых ошибок, которые возникают у тех, кто только начинает изучать JSX. Знание об этих ошибках сэкономит часы на отладку.

• Незакрытые теги. Забыли поставить / в <img> или закрыть <li>. Браузер может простить, но React выдаст ошибку.
• Два соседних тега без обёртки. Попытка вернуть <h1> и <p> рядом друг с другом без <div> или Fragment.
• class вместо className. В HTML привыкли писать class, но в JSX это не работает.
• Фигурные скобки вместо кавычек. src="{avatar}» передаст строку {avatar}, а не значение переменной. Нужно src={avatar}.
• Забытые фигурные скобки. Пытаются вставить переменную без {}: просто пишут user.name, и React выводит это как текст, а не значение переменной.

Чтобы избежать этих ошибок, используйте линтер и читайте сообщения об ошибках React — они часто подсказывают, что именно пошло не так. Особое внимание уделяйте закрытию тегов и атрибуту className. Со временем эти правила войдут в привычку.

JSX изучают на курсе «Фронтенд-разработчик». На нём за 10 месяцев вы сможете освоить фронтенд-разработку с нуля. После обучения — получите диплом о профессиональной переподготовке.

Лучший способ освоить JSX — практика. Начните с малого: откройте онлайн-песочницу и попробуйте сверстать простой блок. Возьмите обычный HTML-код, скопируйте его и попробуйте превратить в JSX: замените class на className, добавьте закрывающие слеши, оберните всё в один родительский элемент.

Для преобразования готового HTML в JSX можно использовать онлайн-конвертеры — это ускорит процесс на старте. Но старайтесь разбираться, что именно изменилось и почему. Изучайте код в примерах: читайте чужие компоненты, разбирайте их структуру.

Постепенно добавляйте переменные и условную логику в JSX через фигурные скобки. Попробуйте вывести список через map (), затем — добавить условие с if или тернарным оператором. Это закрепит понимание того, как работает связка JavaScript и разметки.