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

JSX: Размещение разметки в JavaScript

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

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

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

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

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

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

<h1>Hedy Lamarr's Todos</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
>
<ul>
    <li>Invent new traffic lights
    <li>Rehearse a movie scene
    <li>Improve the spectrum technology
</ul>

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

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

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

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Hedy Lamarr's Todos</h1>
    <img 
      src="https://i.imgur.com/yXOvdOSs.jpg" 
      alt="Hedy Lamarr" 
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve the spectrum technology
    </ul>

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

Правила JSX

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

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

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

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

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

<>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

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

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

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

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

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />
  <ul>
    <li>Invent new traffic lights</li>
    <li>Rehearse a movie scene</li>
    <li>Improve the spectrum technology</li>
  </ul>
</>

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

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

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

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

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

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

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

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

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

export default function Bio() {
  return (
    <div class="intro">
      <h1>Welcome to my website!</h1>
    </div>
    <p class="summary">
      You can find my thoughts here.
      <br><br>
      <b>And <i>pictures</b></i> of scientists!
    </p>
  );
}