Learn About Self-Closing JSX Tags

До сих пор вы видели, как JSX отличается от HTML ключевым способом с использованием класса className против class для определения классов HTML. Другим важным способом, с помощью которого JSX отличается от HTML, является идея самозакрывающегося тега. В HTML почти все теги имеют как открывающий, так и закрывающий тег: <div></div> ; закрывающий тег всегда имеет косую черту перед именем тега, которое вы закрываете. Тем не менее, в HTML есть специальные экземпляры, называемые «самозакрывающиеся теги», или теги, которые не требуют как открывающего, так и закрывающего тега перед тем, как запустить другой тег. Например, тэг разрыва строки может быть записан как <br> или как <br /> , но никогда не должен быть записан как <br></br> , так как он не содержит никакого содержимого. В JSX правила немного отличаются. Любой элемент JSX можно записать с помощью самозакрывающегося тега, и каждый элемент должен быть закрыт. Например, тег разрыва строки всегда должен быть записан как <br /> , чтобы быть действительным JSX, который может быть переписан. То же самое касается и тега <img />. А <div> , с другой стороны, может быть записано как <div /> или <div></div> . Разница в том, что в первой версии синтаксиса нет способа включить что-либо в <div /> . В последующих задачах вы увидите, что этот синтаксис полезен при рендеринге компонентов React.

Исправьте ошибки в редакторе кода, чтобы он был корректным JSX и успешно переводил. Убедитесь, что вы не меняете какой-либо контент - вам нужно только закрыть теги, где они нужны.

  • Компонент должен вернуть тег div
  • div должен содержать тег br
  • div должен содержать тег hr