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

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

 Статьи   Время чтения: 5 минуты   Просмотров: 13

Введение в язык 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
; }



Практические задачи


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

function App() {
    return
text
;
}





Автор: Google
Источник: blanet.ru

Последние страницы

Copyright © 2022 Blanet.Ru. Все права защищены.