Написание разметки с помощью JSX

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

JSX: Встраивание разметки в JavaScript

Веб был построен на HTML, CSS и JavaScript. Многие годы веб-разработчики хранили контент в HTML, дизайн в CSS, а логику в JavaScript — часто в отдельных файлах! Контент размещался внутри HTML, в то время как логика страницы существовала отдельно в JavaScript:

HTML

JavaScript

Но по мере того, как веб становился более интерактивным, логика всё больше определяла контент. JavaScript отвечал за HTML! Вот почемув React логика рендеринга и разметка находятся вместе в одном месте — компонентах.

Sidebar.jsReact-компонент

Form.jsReact-компонент

Совместное хранение логики рендеринга кнопки и её разметки гарантирует, что они остаются синхронизированными при каждом изменении. Напротив, несвязанные детали, такие как разметка кнопки и разметка боковой панели, изолированы друг от друга, что делает безопасным изменение каждой из них по отдельности.

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

Преобразование HTML в JSX

Предположим, у вас есть некоторый (совершенно корректный) HTML:

И вы хотите поместить его в свой компонент:

Если вы скопируете и вставите его как есть, это не сработает:

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

Правила JSX

1. Возвращайте один корневой элемент

Чтобы вернуть несколько элементов из компонента,оберните их одним родительским тегом.

Например, вы можете использовать<div>:

Если вы не хотите добавлять лишний<div>в разметку, вы можете написать<> и </>вместо этого:

Этот пустой тег называетсяФрагментом.Фрагменты позволяют группировать элементы, не оставляя следов в HTML-дереве браузера.

2. Закрывайте все теги

JSX требует явного закрытия тегов: самозакрывающиеся теги, такие как<img>, должны стать<img />, а оборачивающие теги, такие как<li>oranges, должны быть записаны как<li>oranges</li>.

Вот как выглядят закрытые изображение и элементы списка Хеди Ламарр:

3. Используйте camelCase дляпочти всего!

JSX преобразуется в JavaScript, а атрибуты, записанные в JSX, становятся ключами JavaScript-объектов. В своих компонентах вы часто будете хотеть читать эти атрибуты в переменные. Но в JavaScript есть ограничения на имена переменных. Например, их имена не могут содержать дефисы или быть зарезервированными словами, такими какclass.

Вот почему в React многие HTML- и SVG-атрибуты записываются в camelCase. Например, вместоstroke-widthвы используетеstrokeWidth. Посколькуclass— зарезервированное слово, в React вы пишетеclassNameвместо него, названное в честьсоответствующего DOM-свойства:

Вы можетенайти все эти атрибуты в списке пропсов DOM-компонентов.Если вы ошибётесь, не беспокойтесь — React выведет сообщение с возможным исправлением вконсоль браузера.

Совет: используйте конвертер JSX

Преобразование всех этих атрибутов в существующей разметке может быть утомительным! Мы рекомендуем использоватьконвертердля перевода вашего существующего HTML и SVG в JSX. Конвертеры очень полезны на практике, но всё равно стоит понимать, что происходит, чтобы вы могли комфортно писать JSX самостоятельно.

Вот ваш окончательный результат:

Итоги

Теперь вы знаете, почему существует JSX и как использовать его в компонентах:

• Компоненты React объединяют логику отрисовки с разметкой, потому что они связаны.
• JSX похож на HTML, но имеет несколько отличий. При необходимости вы можете использоватьконвертер.
• Сообщения об ошибках часто указывают правильное направление для исправления вашей разметки.