Фронтендщик


Гео и язык канала: Россия, Русский
Категория: Технологии


Все для frontend developer, шуточки, тесты, статьи
Администрация/Реклама @vtopua


Гео и язык канала
Россия, Русский
Категория
Технологии
Статистика
Фильтр публикаций


Вставка и объектов в JSX

Можно выполнять вставку объектов. Смотрите пример:

function App() {
const obj = {a: 1,
b: 2, c: 3}; 

return
{obj.a}
{obj.b}
{obj.c}
;
}

📌 #instr || Фронтендщик


Вставка массивов в JSX

Можно выполнять вставку массивов. Смотрите пример:

function App() {
const arr = [1, 2, 3];

return
{arr[0]}
{arr[1]}
{arr[2]}
;
}

📌 #instr || Фронтендщик


Вставки констант также могут разделяться каким-либо текстом:

function App() {
const str1 = 'text1';
const str2 = 'text2';

return
{str1} eee {str2}
;
}

📌 #instr || Фронтендщик


В один тег можно вставлять сколько угодно констант:

function App() {
const str1 = 'text1';
const str2 = 'text2';
return
{str1} {str2}
;
}


📌 #instr || Фронтендщик


Нюансы при вставке значений переменных

Кроме вставки константы в теге может быть еще какой-нибудь текст:

function App() {
const str = 'text';
return
eee {str} bbb
;
}


📌 #instr || Фронтендщик


Давайте сделаем так, чтобы в текст дива вставилось значение константы str. Для этого нашу константу нужно написать в фигурных скобках внутри, вот так:

function App() {
const str = 'text';
return
{str}
;
}

📌 #instr || Фронтендщик


Вставка значений переменных и констант в JSX

Пусть у нас есть следующий код:

function App() {
const str = 'text';
return
text
;
}

📌 #instr || Фронтендщик


Возврат функцией пустого тега в JSX

Пусть мы хотим вернуть пустой тег:

function App() {
return ;
}


В этом случае код можно сократить вот так:

function App() {
return ;
}


📌 #instr || Фронтендщик


Возврат незакрытого тега JSX

В качестве результата можно возвращать тег, который не нужно закрывать, например, инпут. Как вы уже знаете, по правилам React в этом случае вместо тега нужно писать тег :

function App() {
return ;
}

📌 #instr || Фронтендщик


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

function App() {
return (


text1
text2


text3
text4


);
}

📌 #instr || Фронтендщик


Такой прием сработает, однако, он не без недостатков: в результате рендеринга мы получим дополнительный див, который мы в общем не хотели и ввели исключительно для корректности работы React. Этот див, к примеру, может сломать нам часть верстки.

📌 #instr || Фронтендщик


Чтобы желаемое заработало, нам придется взять наши теги в какой-нибудь общий тег, например, вот так:

function App() {
return (


text1
text2


text3
text4


);
}

📌 #instr || Фронтендщик


Особенности возврата нескольких тегов в JSX

Через return нельзя возвращать сразу несколько тегов. То есть следующий код работать не будет:

function App() {
return (

text1
text2


text3
text4

);
}

📌 #instr || Фронтендщик


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

function App() {
return (

text1
text2

);
}

📌 #instr || Фронтендщик


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

Открывающий тег обязательно должен быть написан на одной строке с командой return.

Например, следующий код работать не будет:

function App() {
return

text1
text2
;
}

📌 #instr || Фронтендщик


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

function App() {

return

text1

text2

;

}

📌 #instr || Фронтендщик


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

function App() {

const elem = text;

return elem;

}


📌 #instr || Фронтендщик


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

У тегов могут быть атрибуты:

function App() {
return
text
;
}


📌 #instr || Фронтендщик


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

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

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

function App() {
return
text
;
}


📌 #instr || Фронтендщик


Обратите внимание на то, что див мы пишем без кавычек - просто пишем тег в JavaScript коде! Это основная особенность React. На самом деле в React мы пишем не на языке JavaScript, а на языке JSX, который мы будем изучать в следующих уроках.

📌 #instr || Фронтендщик

Показано 20 последних публикаций.