Правила возврата функцией тегов JSX

В предыдущем уроке у вас получился следующий код:

function App() {
return <div>
text
</div>;
}
Давайте посмотрим, какие особенности имеет возврат тегов из функции при работе с JSX.

Вложенность тегов
Внутри тега, который возвращается через return, может быть сколько угодно вложенных тегов:

function App() {
return <div>
<p>text1</p>
<p>text2</p>
</div>;
}
Снос тега вниз
Открывающий тег обязательно должен быть написан на одной строке с командой return. Например, следующий код работать не будет:

function App() {
return
<div>
<p>text1</p>
<p>text2</p>
</div>;
}
Для того, чтобы такой снос тега вниз заработал, наш тег необходимо взять в круглые скобки:

function App() {
return (
<div>
<p>text1</p>
<p>text2</p>
</div>
);
}
Возврат нескольких тегов
Через return нельзя возвращать сразу несколько тегов. То есть следующий код работать не будет:

function App() {
return (
<div>
<p>text1</p>
<p>text2</p>
</div>
<div>
<p>text3</p>
<p>text4</p>
</div>
);
}
Чтобы желаемое заработало, нам придется взять наши теги в какой-нибудь общий тег, например, вот так:

function App() {
return (
<div>
<div>
<p>text1</p>
<p>text2</p>
</div>
<div>
<p>text3</p>
<p>text4</p>
</div>
</div>
);
}
Такой прием сработает, однако, он не без недостатков: в результате рендеринга мы получим дополнительный див, который мы в общем не хотели и ввели исключительно для корректности работы React. Этот див, к примеру, может сломать нам часть верстки.

Для избежания таких проблем в React введен специальный пустой тег <></>, который группирует теги, но в готовую верстку не попадает. Давайте воспользуемся этим тегом:

function App() {
return (
<>
<div>
<p>text1</p>
<p>text2</p>
</div>
<div>
<p>text3</p>
<p>text4</p>
</div>
</>
);
}
Возврат незакрытого тега
В качестве результата можно возвращать тег, который не нужно закрывать, например, инпут. Как вы уже знаете, по правилам React в этом случае вместо тега <input> нужно писать тег <input />:

function App() {
return <input />;
}
Возврат пустого тега
Пусть мы хотим вернуть пустой тег:

function App() {
return <div></div>;
}
В этом случае код можно сократить вот так:

function App() {
return <div />;
}
При этом в получившемся HTML коде React автоматические преобразует сокращенную форму в нормальную.