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

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

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

HTML

JavaScript

Но по мере того, как веб становился все более интерактивным, логика все сильнее определяла контент. JavaScript стал управлять HTML! Именно поэтому в React логика рендеринга и разметка сосуществуют в одном месте — в компонентах.

Компонент React Sidebar.js

Компонент React Form.js

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

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

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

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

<h1>Задачи Хеди Ламарр</h1>
<img
  src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
  alt="Hedy Lamarr"
  class="photo"
>
<ul>
    <li>Изобрести новые светофоры
    <li>Репетировать сцену из фильма
    <li>Усовершенствовать технологию спектра
</ul>

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

export default function TodoList() {
  return (
    // ???
  )
}

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

export default function TodoList() {
  return (
    // Это не совсем работает!
    <h1>Задачи Хеди Ламарр</h1>
    <img
      src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
      alt="Хеди Ламарр"
      class="photo"
    >
    <ul>
      <li>Изобрести новые светофоры
      <li>Репетировать сцену из фильма
      <li>Усовершенствовать технологию спектра
    </ul>
  );
}

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

Правила JSX

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

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

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

<div>
  <h1>Задачи Хеди Ламарр</h1>
  <img
    src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
    alt="Хеди Ламарр"
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

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

<>
  <h1>Задачи Хеди Ламарр</h1>
  <img
    src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
    alt="Хеди Ламарр"
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

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

Почему несколько тегов JSX нужно обернуть?

JSX выглядит как HTML, но под капотом он преобразуется в простые объекты JavaScript. Вы не можете вернуть два объекта из функции, не обернув их в массив. Это объясняет, почему вы также не можете вернуть два тега JSX, не обернув их в другой тег или фрагмент.

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

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

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

<>
  <img
    src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
    alt="Hedy Lamarr"
    class="photo"
   />
  <ul>
    <li>Изобрести новые светофоры</li>
    <li>Репетировать сцену из фильма</li>
    <li>Усовершенствовать технологию спектра</li>
  </ul>
</>

3. camelCase все большинство вещей!

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

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

<img
  src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
  alt="Hedy Lamarr"
  className="photo"
/>

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

По историческим причинам атрибуты aria-* и data-* пишутся так же, как в HTML, с дефисами.

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

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

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

export default function TodoList() {  return (    <>      <h1>Hedy Lamarr's Todos</h1>      <img        src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"        alt="Hedy Lamarr"        className="photo"      />      <ul>        <li>Invent new traffic lights</li>        <li>Rehearse a movie scene</li>        <li>Improve spectrum technology</li>      </ul>    </>  );}

Вывод

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

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