Язык JSX в React

Язык JSX является расширением синтаксиса JavaScript. Приведём пример такого JSX синтаксиса. Такой код будет обработан, в нём нет ошибки:

let text = <div>Тише, мыши, кот на крыше!</div>;

Помимо этого можно записывать JSX в несколько строк и внутри функций:

function App() {
   return <div>
      Тише, мыши, кот на крыше!
   </div>;
}

Ошибки в HTML коде

Единственным препятствием при использовании JSX является невалидный HTML код. Поэтому обязательно нужно следить, чтобы все теги были закрыты. Даже те теги, которые не требуют закрывающей пары должны содержать пробел и слеш "/" (к примеру, "br" и "input"):

function App() {
   return <div>
      <input />
      <br />
   </div>;
}

- такая запись является верной. Но если не поставить слеш в <input> или <br>, то возникнет ошибка.

Если же нужно вернуть пустой парный тег div, то вместо такой записи:

return <div> </div>;

Можно написать сокращённо так (React сам преобразует тег в парный с пустым содержанием):

return <div />;

Помимо соблюдения корректности закрытия HTML тегов необходимо наблюдать за типами вложенных тегов. Нельзя ставить блочные теги внутрь строчных. К примеру, нельзя ставить тег параграфа <p> внутрь элемента списка <li>.

В React надо с осторожностью записывать HTML код для создания таблиц. Если простые сайты прощают запись <tr> сразу после <table>, то в React все <tr> должны быть обёрнуты в <tbody>, <thead> или <tfoot>.

Ошибки в атрибутах

Большинство названий атрибутов HTML тегов можно использовать в React. Но в исключение входит атрибут "class" и "html". Их необходимо заменять на "className" и "htmlFor" соответственно:

function App() {
   return <div className="mousedc">
      <label htmlFor="elem">Тише, мыши, кот на крыше!</label>
      <br />
   </div>;
}

Ошибки в функциях

В первом примере из этой статьи записана функций. Обратите внимание, что открывающий тег <div> записан на той же строке, что и "return":

function App() {
   return <div>
      Тише, мыши, кот на крыше!
   </div>;
}

Если перенести открытие тега на следующую строку после "return", то возникнет ошибка. Чтобы избежать её, понадобится заключить выражение в круглые скобки. Вот так:

function App() {
   return (
      <div>
         Тише, мыши, кот на крыше!
      </div>
   );
}

Помимо этого стоит помнить, что возвращать функция будет только выражение, состоящее из одного тега. В нём могут быть вложенные теги, но нельзя делать параллельно сразу несколько. От такой ошибки не спасут даже круглые скобки. Поэтому такой код выдаст ошибку:

function App() {
   return (
      <div>
         Тише, мыши, кот на крыше!
      </div>
      <div>
         А котята ещё выше.
      </div>
   );
}

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

function App() {
   return (
      <div>
         <div>
            Тише, мыши, кот на крыше!
         </div>
         <div>
            А котята ещё выше.
         </div>
      </div>
   );
}

Порой дополнительный div контейнер может менять вёрстку приложения. Поэтому для такой ситуации в React предусмотрен пустой парный тег <> </>. Он группирует теги, но не попадает в итоговую вёрстку. Если воспользоваться им и переписать предыдущий пример, то получится так:

function App() {
   return (
      <>
         <div>
            Тише, мыши, кот на крыше!
         </div>
         <div>
            А котята ещё выше.
         </div>
      </>
   );
}