Канал бизнес-коуча Татьяны Истоминой

Все секреты психологии денег в одном видео!

Розыгрыш путевки в Сочи

Авторский блог про плюсы и минусы жизни у моря

Качественный фон.

Подбери свой фон.

Статистика Избранное

Фронтендщик

Гео и язык канала: Россия, Русский

Категория: Технологии

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

Гео и язык канала

Россия, Русский

Категория

Технологии

Статистика

Избранное

Фильтр публикаций

Скрывать удаленные

Скрывать репосты

Фронтендщик

10 Dec, 10:00

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

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

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

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

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

30 0 0

Фронтендщик

9 Dec, 18:00

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

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

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

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

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

56 0 0

Фронтендщик

9 Dec, 10:00

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

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

return
{str1} eee {str2}
;
}

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

50 0 0

Фронтендщик

8 Dec, 17:00

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

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

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

57 0 0

Фронтендщик

8 Dec, 10:00

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

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

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

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

67 0 0

Фронтендщик

7 Dec, 18:00

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

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

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

72 0 0

Фронтендщик

7 Dec, 10:00

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

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

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

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

72 0 0

Фронтендщик

6 Dec, 18:00

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

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

function App() {
return ;
}

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

function App() {
return ;
}

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

75 0 0

Фронтендщик

6 Dec, 10:00

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

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

function App() {
return ;
}

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

77 0 0

Фронтендщик

5 Dec, 18:00

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

function App() {
return (

text1
text2

text3
text4

);
}

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

82 0 0

Фронтендщик

5 Dec, 10:00

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

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

93 0 0

Фронтендщик

4 Dec, 18:00

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

function App() {
return (

text1
text2

text3
text4

);
}

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

103 0 0

Фронтендщик

4 Dec, 10:00

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

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

function App() {
return (

text1
text2

text3
text4

);
}

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

90 0 0

Фронтендщик

3 Dec, 18:00

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

function App() {
return (

text1
text2

);
}

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

99 0 0

Фронтендщик

3 Dec, 10:25

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

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

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

function App() {
return

text1
text2
;
}

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

97 0 0

Фронтендщик

2 Dec, 18:00

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

function App() {

return

text1

text2

;

}

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

105 0 0 1

Фронтендщик

2 Dec, 10:00

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

function App() {

const elem = text;

return elem;

}

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

101 0 0 1

Фронтендщик

1 Dec, 18:00

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

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

function App() {
return
text
;
}

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

111 0 0

Фронтендщик

1 Dec, 14:00

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

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

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

function App() {
return
text
;
}

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

97 0 0

Фронтендщик

30 Nov, 18:00

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

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

107 0 0

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

1 733

подписчиков

Статистика канала

Популярное в канале

:parent Выбирает непустые элементы, которые имеют вложенные (дочерние) элементы, а также содержа...

:first Выбирает только один элемент, первый из подходящих, например, $("p:first"). 📌 #instr || ...

:gt(n) Выбирает все элементы, индекс которых больше n, индексы отсчитываются от нуля. 📌 #instr ...

:even Выбирает элементы по четным значениям индекса 0, 2, 4…, т.е. выбирает 1, 3, 5… элементы, н...

:odd Выбирает элементы по нечетным значениям индекса, т.е. выбирает 0, 2, 4… элементы. 📌 #instr...