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

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

function App() {
    return

text

;
}

Теги можно записывать в переменные или константы:

function App() {
    const  elem =

text

;
    return elem;
}

Давайте посмотрим, какие особенности имеет JSX.

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

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

function App() {
    return;
}

Закроем его с помощью обратного слеша:

function App() {
    return;
}

Верстка в JSX должна быть корректной. В частности, не все теги можно вкладывать друг в друга. Например, если в теге ul разместить абзац, это приведет к ошибке.

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

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

function App() {
    return

1	2
3	4

;
}

Такой код в React приведет к выводу предупреждения в консоли, так как tr должны быть вложены либо в тег tbody, либо в thead, либо в tfoot.

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

function App() {
    return

1	2
3	4

;
}

В теги можно добавлять атрибуты:

function App() {
    return

text

;
}

Некоторые атрибуты представляют собой исключения: вместо атрибута class следует писать атрибут className, а вместо атрибута for следует писать атрибут htmlFor:

function App() {
    return

text ; }

Функция в вашем основном компоненте сейчас должна выглядеть следующим образом:

function App() {
    return

text

;
}