Фронтендщик


Kanal geosi va tili: Rossiya, Ruscha


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

Связанные каналы

Kanal geosi va tili
Rossiya, Ruscha
Statistika
Postlar filtri


Первая программа на JavaScript

Давайте напишем нашу первую программу на JavaScript. Вот она:





Моя первая
программа 

alert('Привет, мир!');



моя первая программа



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


Запуск JavaScript

JavaScript код пишется прямо на HTML странице внутри тега script. Этот тег можно размещать в любом месте страницы. Смотрите пример:





Это заголовок
тайтл 

здесь пишем JavaScript код



Это основное содержимое
страницы. 



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


Введение в язык JavaScript для новичков

Язык JavaScript предназначен для выполнения в браузере наряду с HTML и CSS. Но, если эти языки предназначены для верстки структуры сайта, то JavaScript позволяет "оживлять" web-страницы - делать их реагирующими на действия пользователя или демонстрировать некоторую динамичность (к примеру, смена картинок в блоке или красивые плавно выпадающие менюшки).

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


Передача id в компонент в React

В данном случае в пропсы попадут атрибуты name и cost, а key - не попадет. Нам, однако, может понадобится передать id в пропсы компонента. В этом случае нам нужно будет ввести еще один атрибут:

const items = prods.map(prod
=> { 
return ;
});

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


Передача id в компонент в React

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

const items = prods.map(prod
=> { 
return ;
});


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


Как вы видите, теперь код цикла упростился и стал более понятым для понимания. Кроме того, теперь за отображение продукта отвечает отдельный компонент, в котором мы можем делать, а потом редактировать верстку продуктов.

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

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


Давайте теперь внутри компонента Products в цикле map будем использовать дочерние компоненты Product:

function Products() {
const [prods, setProds]
= useState(initProds); 

const items = prods.map(prod
=> { 
return ;
});

return
{items}
;
}

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


Как вы видите, содержимое нашего цикла map достаточно сложное, особенное если верстка продукта разрастется в дальнейшем. Такая сложность затрудняет чтение, понимание и поддержку кода.

Будет лучше вынести код, отвечающий за отображение продукта в отдельный компонент.

Назовем его Product. Вот код нашего компонента:

function Product({ name,
cost }) { 
return
name: {name},
cost: {cost}
;
}

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


Теперь давайте переберем продукты циклом и выведем их в какой-нибудь верстке:

function Products() {
const [prods, setProds]
= useState(initProds); 

const items = prods.map(prod
=> { 
return
name: {prod.name},
cost: {prod.cost}
;
});

return
{items}
;
}

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


Пусть этот массив располагается в компоненте Products.

Запишем эти продукты в состояние компонента:

function Products() {

const [prods, setProds]
= useState(initProds); 

}

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


Передача стейтов в дочерние компоненты в React

Пусть у нас дан массив с продуктами:

const initProds = [
{id: id(), name: 'product1',
cost: 100}, 
{id: id(), name: 'product2',
cost: 200}, 
{id: id(), name: 'product3',
cost: 300}, 
];

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


Дочерние компоненты в цикле React

Давайте теперь выведем наши компоненты в цикле. Используем для этого метод map:

function App() {
const result = prods.map(prod
=> { 
return ; 
});

return
{result}
;
}

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


Давайте выведем на экран три компонента Product, передав им в пропсы данные из нашего массива. Пока не будем использовать цикл, а просто будем обращаться к элементам массива и объекта:

function App() {
return
 
 
 
;
}

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


Массив для создания дочерних компонентов в React

Пусть у нас есть массив с продуктами:

const prods = [
{id: id(), name: 'product1',
cost: 100}, 
{id: id(), name: 'product2',
cost: 200}, 
{id: id(), name: 'product3',
cost: 300}, 
];

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


Давайте сделаем сразу несколько продуктов:

function App() {
const name1 = 'product1';
const cost1 = '100';

const name2 = 'product2';
const cost2 = '100';

const name3 = 'product3';
const cost3 = '100';

return
 
 
 
;
}

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


Создание дочерних компонентов в React

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

function App() {
const name = 'product';
const cost = '100';

return
 
;
}

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


Более удобно и более принято не пользоваться объектом props, а сразу выполнять дестуктуризацию пропсов прямо в параметрах функции:

function Product({ name,
cost }) { 
return
name: {name},
cost: {cost}
;
}

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


Давайте сделаем это:

function Product(props) {
return
name: {props.name},
cost: {props.cost}
;
}

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


Имя параметра может быть каким угодно, но в React принято называть его props. Фактически это не просто имя параметра, а важная концепция React.

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

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


Имена и значения этих атрибутов будут попадать в виде объекта в первый параметр функции-конструктора нашего компонента Product:

function Product(props) {
console.log(props);
// объект с ключами
name и cost 

return
product
;
}

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

20 ta oxirgi post ko‘rsatilgan.