Введение в язык JSX в React

Язык JSX - это обычный JavaScript, но с некоторыми дополнениями, позволяющими писать теги прямо в коде, без кавычек.

Теги можно возвращать через return:

function App() {
return <div>
text
</div>;
}
Теги можно записывать в переменные или константы:

function App() {
const elem = <div>text</div>;
return elem;
}
Давайте посмотрим, какие особенности имеет JSX.

Закрытость тегов
Все теги в JSX должны быть закрыты, в том числе теги, которые не требуют пары, например, input или br.

Следующий пример кода выдаст ошибку, так как инпут не закрыт:

function App() {
return <div>
<input>
</div>;
}
Закроем его с помощью обратного слеша:

function App() {
return <div>
<input />
</div>;
}
Корректность верстки
Верстка в JSX должна быть корректной. В частности, не все теги можно вкладывать друг в друга. Например, если в теге ul разместить абзац, это приведет к ошибке.

Помимо более-менее очевидных недопустимых вложенностей, есть также и неожиданные: таблицы.

В таблицах мы привыкли сразу в тег table вкладывать теги tr, вот так:

function App() {
return <table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>;
}
Такой код в React приведет к выводу предупреждения в консоли, так как tr должны быть вложены либо в тег tbody, либо в thead, либо в tfoot.

Давайте исправим проблему, сделав нашу таблицу корректной:

function App() {
return <table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>;
}
Атрибуты
В теги можно добавлять атрибуты:

function App() {
return <div id="elem">
text
</div>;
}
Некоторые атрибуты представляют собой исключения: вместо атрибута class следует писать атрибут className, а вместо атрибута for следует писать атрибут htmlFor:

function App() {
return <div className="block">
<label htmlFor="elem">text</label>
<input id="elem" />
</div>;
}
Практические задачи
Функция в вашем основном компоненте сейчас должна выглядеть следующим образом:

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