Хранение тегов в переменных и константах JSX

В переменных и константах можно хранить теги, выполняя затем их вставку в нужное место.

Смотрите пример:

function App() {
const str = <p>text</p>;

return <div>
{str}
</div>;
}
В результате рендеринга получится следующий код:

<div>
<p>text</p>
</div>
Несколько тегов в константах
Учтите, что несколько тегов, хранящихся в константе, обязательно нужно обернуть в какой-то общий тег. То есть вот так не будет работать:

function App() {
const str = <p>text1</p><p>text2</p>;

return <main>
{str}
</main>;
}
А вот так будет, так как абзацы обернуты в один тег div:

function App() {
const str = <div><p>text1</p><p>text2</p></div>;

return <main>
{str}
</main>;
}
Можно также использовать пустые теги:

function App() {
const str = <><p>text1</p><p>text2</p></>;

return <main>
{str}
</main>;
}
Теги не в одну строку
Теги, записываемые в константы, не обязательно писать на одной строке. Можно сделать и так:

function App() {
const str = <p>
text
</p>;

return <div>
{str}
</div>;
}
А можно и вот так:

function App() {
const str = (
<p>
text
</p>
);

return <div>
{str}
</div>;
}
Возврат через return
Константы с тегами можно возвращать через return:

function App() {
const str = <main>
text
</main>;

return str;
}