Скачать "#5: React Pizza — разработка интернет-магазина (for junior)"

|

Похожие ролики из нашего каталога

1:06:22

99 - ReactJS - try-catch, router switch, classnames

Канал: IT-KAMASUTRA

41:35

80 - React JS - инициализация приложения

Канал: IT-KAMASUTRA

29:25

Полный курс Laravel 04 Структура проекта (Project Structure)

Канал: One Code

1:26:11

Владислав Масунов — В морально серых компаниях больше платят — Мы обречены

Канал: Мы обречены

19:35

50 - React JS практика - REST API (краткая теория)

Канал: IT-KAMASUTRA

22:53

🚀 Деплой Fullstack Приложения [Golang+JS]. СI/CD, DigitalOcean, Github Actions

Канал: Maksim Zhashkevych

22:23

81 - React JS - селекторы (reselect part 1)

Канал: IT-KAMASUTRA

40:58

07 - Что такое Rest API, RESTful API / Back-end - Путь Самурая / Уроки по Back-end

Канал: IT-KAMASUTRA

35:24

Полный курс Laravel 15 Модели 1 Основы (Model Basics)

Канал: One Code

|

Теги видео

Выделить всеКопировать

стрим

it

программисты

программирование

арчаков

арчаков блог

фронтенд

бэкенд

бекенд

фронтэнд

разработчик

разработчики

собеседования

разработка

react

reactjs

nodejs

javascript

js

реакт

spa

redux

axios

react router

|

Субтитры

• Английский

Скачать

00:00:05

проверим качество звука на сколько меня

00:00:09

слышно вообще

00:00:10

проверим качество звука звук вроде бы

00:00:15

нормально слышно дождемся где-то минут

00:00:22

пять

00:00:24

может быть 10 сейчас все остальные

00:00:27

подключиться кто захотел он момента

00:00:32

смотреть я честно греты спонтанно решил

00:00:35

начать запись потому что я не планировал

00:00:39

скажу честно сегодня записывать но я

00:00:44

подумал что будет быстрее если я буду

00:00:47

пытаться по крайней мере хотя бы каждый

00:00:51

день записывать этот курс чтобы быстрее

00:00:53

вода делать а не откладывайте там

00:00:55

следующие дни чтобы вот когда мне будет

00:00:59

не лень чтобы взяла записал так что

00:01:03

такие дела как я сказал вся информация

00:01:12

которая будет доступна она будет в

00:01:15

телеграме ли вконтакте и с одной стороны

00:01:19

с одной стороны казалось бы что нужно

00:01:22

предупреждать как бы заранее что вот

00:01:24

сейчас будет трансляции

00:01:26

типа есть хотите подключаетесь но походу

00:01:29

моем случае это не очень работает

00:01:36

мирослав малый привет да ладно тебе за

00:01:39

из-за этого

00:01:41

отменять общее какую-либо встречу и

00:01:43

что-либо это

00:01:45

это точно не стоит того поверь так что

00:01:49

либо сочи спасибо всем привет кстати кто

00:01:52

только подключился александр алина вский

00:01:58

ведущий инженер

00:02:00

tie me тема в ниппи а ты кто я а ты

00:02:09

я-я ну не знаю и наверное не знаю любом

00:02:21

случае если хотя бы кому-то заходит то

00:02:24

что я записываю это принципе нормально

00:02:28

не то достаточно значит сейчас мы

00:02:33

возьмем а некоторые вкладки закрою и

00:02:36

постепенно перейду но не ты один зачтут

00:02:43

значит так что мы делаем я сейчас возьму

00:02:50

ладно я закрою все вкладки ничего не

00:02:52

поделать как бы сильно не хотел эти

00:02:55

вкладки оставить нет аниме я оставлю это

00:03:01

ни в коем случае нельзя закрывать а вот

00:03:04

панель перенесу сюда и постепенно мы

00:03:09

начнем сейчас я подготовлю окружения 1

00:03:17

эту дыру ничего не поделать черт

00:03:22

перекинул вовсю да вот иначе татьяна и

00:03:29

тебе тоже спасибо что оставляешь

00:03:32

комментарии по телеграмму не было

00:03:38

объявления потому что круче что я сделал

00:03:40

я решил потестировать бота не себе тут

00:03:43

или короче что я делаю я сейчас давайте

00:03:46

вам покажу экрана что я буду говорить

00:03:47

это я сейчас разрабатываю для себя чисто

00:03:52

для себя один проект

00:03:56

когда я хочу оповестить вас и каком-то

00:03:59

там события не знаю там видео или просто

00:04:02

что-то написать мне приходится брать

00:04:05

текст писать его сначала там вконтакте

00:04:08

публиковать а потом приходит приходится

00:04:10

брать и тот же текст форматировать его

00:04:13

под telegram что честно говоря не очень

00:04:16

удобно бывает и я в итоге подумал блин

00:04:20

что если я возьму и сделаю скажем так

00:04:26

что-то вроде приложения для себя которое

00:04:29

будет публиковать мне вконтакте и в

00:04:32

telegram одну запись то есть формат

00:04:34

будет разный но то есть в итоге он

00:04:37

опубликует так как мне нужно в

00:04:39

социальной сети и вот и это приложение

00:04:43

сейчас pellet pack

00:04:44

она работает она работает тут как бы

00:04:47

есть там типа просмотру этого все есть

00:04:49

но суть в том что его еще нужно

00:04:51

дорабатывать

00:04:52

короче я понял что когда я начинаю

00:04:54

что-то делать это настолько долго

00:04:57

затягивается что мне пропадает желание

00:04:59

это делать сейчас я на некоторое время

00:05:02

это отложил ну мне это очень сильно

00:05:05

помогает когда вот нужно ли формат

00:05:07

сказки ровать так что тут такой момент

00:05:13

до из этого хотел сказать что оповещение

00:05:16

не приходят потому что я вот тестировал

00:05:20

это все и забыл выключить

00:05:22

отключение уведомлений то есть я первый

00:05:24

пост который связан с оповещением этого

00:05:27

видео сделал без оповещения то есть ну

00:05:32

то есть вы не знали о том что сейчас он

00:05:35

будет касаться потому что просто

00:05:36

отключил оповещение именно этот пост

00:05:39

нечайно

00:05:42

так давай продолжал плотнее мне я читать

00:05:48

разучился сейчас подожди давай продолжаю

00:05:51

поплотнее не нас обед скоро нужно еще

00:05:54

инет-магазин но сейчас мы будем делать

00:05:58

редакция хотел сегодня сделать но я не

00:06:01

хочу короче я не хочу ридак с объяснять

00:06:03

быстро то есть я не хочу взять и просто

00:06:06

высказать вот есть ли до кости по вот

00:06:08

смотрите ещё мне хочется прям разжевать

00:06:12

его так чтобы было понятно

00:06:14

начинающему потому что эти уроки для

00:06:16

начинающих напомню ещё раз для тех кто

00:06:20

только подключился и пишут комментарии

00:06:22

что я слишком подробно объясняю не вот

00:06:28

его объясню там давайте так тут я вижу

00:06:42

вопрос пошли валика mason на вопросы я

00:06:46

отвечу

00:06:47

чуть позже потому что мы не будем сейчас

00:06:50

на это тратить время как бы мне не

00:06:51

хотелось ответить ну я знаю что мы на

00:06:55

это будем тратить время в общем еще раз

00:06:58

всем привет кто только подключился к

00:07:01

трансляции сегодня мы будем продолжать

00:07:03

делать наш интернет-магазин

00:07:05

и что мы будем делать мы сегодня сделаем

00:07:10

следующее сегодня сделаем следующее я

00:07:14

отключу telegram что по мне не мешал

00:07:19

сегодня мы будем получать асинхронно

00:07:22

пиццы то есть у нас теперь пиццы

00:07:25

давайте мы откроем проект у нас теперь

00:07:28

пиццы который мы будем

00:07:30

подгружается например хранить они будут

00:07:33

хранится в отдельном файле

00:07:36

вот этот откроем вроде бы вроде этом вот

00:07:43

так вот и я и органы ставка

00:07:52

[музыка]

00:07:55

если вы вот так вот есть

00:08:00

мою пиццы будем погружать асинхронно то

00:08:05

есть они у нас будет х лениться якобы на

00:08:07

сервере то есть прикол в чем у нас не

00:08:09

будет

00:08:10

бэг-энда но у нас будет фэйковый bk

00:08:13

что значит в твой к в бэг-энд это значит

00:08:15

что у нас будет что-то вроде базы данных

00:08:20

и что-то вроде сервера с возможностью

00:08:23

сортировки этого всего получения там 1

00:08:25

пиццы или нескольких pets но при этом мы

00:08:28

не будем писать backend стрим пропал

00:08:32

блины это классика это классика это

00:08:38

классика это классика вроде бы нормально

00:08:49

слышно

00:08:57

это

00:08:58

с нормально работает растет цели опять

00:09:03

проблемы насчет индекс практика мой

00:09:07

ничего сказать не могу тут тебе решать

00:09:11

хорошо короче давайте мы перейдем к

00:09:16

нашему проекту не будем затягивать это

00:09:18

все сегодня что мы будем делать как я

00:09:20

сказал сегодня мы будем получать

00:09:21

асинхронно все наши пиццы потом

00:09:25

разберемся с тем что такое проб types

00:09:28

для тех кто не знает шутка про тайп я

00:09:30

сегодня объясню создадим компонент пиццы

00:09:33

то есть вот это вот компонент вот это

00:09:34

вот обычная верстка у нас будет

00:09:37

компонентом у кого-то может зависать

00:09:40

трансляции потому что

00:09:43

битрейт но иногда подводит сейчас

00:09:46

хорошим но такой средненький битрейт то

00:09:49

6104 то 3 тысяч если у вас подвисает

00:09:53

трансляция я ничего поделать с этим не

00:09:57

могу далее у нас идет создание

00:09:59

компонента вот этот компонент как я

00:10:01

сказал мы создадим сделаем так чтобы

00:10:03

можно было выбирать вот эти вот все

00:10:04

варианты прямо сейчас мы это будем

00:10:06

делать чтобы не затягивать сделаем

00:10:09

отображение пиццы из джейсон и который

00:10:11

будет подгружать давайте знаете как мы

00:10:13

сделаем давайте мы сначала наоборот zeon

00:10:18

мы сначала будем получать

00:10:19

асинхронно наши пиццы будем их

00:10:22

отображать

00:10:23

но имеется да просто блоки будут такие

00:10:26

статичные

00:10:27

потом мы уже возьмем и начнем под

00:10:31

создавать компонент и так что мы делаем

00:10:34

в первую очередь давайте опять повторю

00:10:36

мы сейчас возьмем и сделаем фейковую

00:10:40

фейковый базу данных то есть фейковый

00:10:43

сервер у нас будет фейковый значит что

00:10:45

мы не будем писать сам backend но при

00:10:48

этом backend у нас будет и так как

00:10:52

сделать так чтобы мы могли там

00:10:53

сортировать пиццы там

00:10:56

делать что угодно не за что там например

00:11:00

кроме сортировки можно там взять и

00:11:02

получить какую-то пиццу удалить эту

00:11:04

пиццу ну тут конечно то функционала нету

00:11:06

но суть в том что на этом пайком

00:11:08

бэг-энде можно будет это делать и так

00:11:11

как его вообще подключите к нашей базе

00:11:13

данных ой к нашему приложению то такой

00:11:16

ключевой момент что если же это

00:11:19

приложение пытаться выложить куда-то на

00:11:21

сервак то окажутся так что не все так

00:11:26

просто будет я пока думаю над тем как

00:11:29

именно сделать так чтобы вы могли свое

00:11:32

портфолио публиковать эту работу при том

00:11:34

что у вас будет работать там сортировка

00:11:37

что у вас будет работать выбор категории

00:11:39

прочее на гитхабе

00:11:42

статичной странице это сделать не

00:11:44

получится потому что там нужно будет

00:11:45

подключать еще но уже с sca приложение в

00:11:50

гитхабе чисто делать нельзя ну и над

00:11:52

этим подумаю пока давайте будем

00:11:54

использовать именно его

00:11:56

это у нас что аха

00:12:02

нужно вот вот это мы оставляем и давайте

00:12:06

вот этого все закрывать опять посмотрим

00:12:08

что у нас тут происходит сегодня мы

00:12:11

будем сначала подключать пиццы

00:12:13

у нас есть в паблик джейсон какой-нибудь

00:12:16

нету тут у нас тоже ничего помоему нету

00:12:21

сейчас я возьму и сразу же заготовленный

00:12:25

джейсон его уже перекину

00:12:27

наше приложение где-то у меня она была

00:12:31

этот это джейсон где-то у меня был

00:12:33

а вот база данных в паблике прикину его

00:12:37

пока потом заходим youtube tutorials

00:12:43

вы пока ничего не видите паблик и делаю

00:12:46

вот так вот теперь у нас есть

00:12:51

вот кого джейсон то есть вот он тут у

00:12:54

нас пиццы то есть вот вот этот вот

00:12:58

объект вот эти вот все объекты мы будем

00:13:01

превращать уже в реальных компонент у

00:13:04

нас будет вот такой вот этот компонент и

00:13:06

он будет брать изображение он будет

00:13:10

править название пиццы и все это он

00:13:12

будет подставлять внутрь самого

00:13:14

компонента то есть вот это вот обычно

00:13:16

объект мы будем превращать уже

00:13:18

полноценный реактор ска и

00:13:19

но в реактор ский компонент многие когда

00:13:21

вот в общем принципе изучают rick james

00:13:23

не могут понять как вообще взятие

00:13:25

переконвертировать например массив или

00:13:28

объект или что то еще

00:13:29

уже в компонент или там вычтем а верстку

00:13:32

принципе если вы сейчас уже проходите

00:13:34

этот урок то вы уже должны примерно

00:13:38

понимать как что тут устроена потому что

00:13:40

мы уже на том этапе когда

00:13:42

но примерно хотя бы на малом уровне это

00:13:44

уже нужно понимать если же вы до сих пор

00:13:47

не понимаете наверное вам нужно

00:13:50

попрактиковаться сегодня мы в любом

00:13:53

случае попробуем примерно такое сделать

00:13:55

и что мы будем делать вот этот вот файл

00:13:57

я почему закинув public я сейчас объясню

00:14:00

когда вообще у вас находится реактор sca

00:14:03

приложение на local host

00:14:05

то вам нужно сделать так чтобы какие-то

00:14:09

статичные файлы например там изображение

00:14:12

она не знаю ну аудио какой-то или там

00:14:16

видео если вы хотите его с помощью

00:14:18

импорта взять там картинку видео там я

00:14:22

аудио с помощью импорт то есть взять

00:14:24

написать будут например экзем вот

00:14:26

где-нибудь тут импортом аудиофайл то эти

00:14:31

файлы у вас должны храниться какой-то

00:14:33

папки внутри

00:14:34

src импорт работает только в этой папке

00:14:38

тут он работать не будет то есть он не

00:14:41

сможет вот наше приложение не сможет

00:14:43

зайти в паблик и оттуда что-то

00:14:45

импортировать если вы хотите какую-то

00:14:47

статику но статичные файлы там как и

00:14:50

сказал картинки или прочее это все

00:14:52

импортировать и потом там ссылку пихнуть

00:14:55

или куда-то передать то тогда вам нужно

00:14:57

уже создавать отдельную папку внутри со

00:15:00

всей ну и тут уже все так

00:15:02

добавлять а потом как могут помнить и

00:15:04

делали где у нас

00:15:06

хедере потом уже взять импортировать

00:15:09

этот файл его же пихать куда нам нужно

00:15:12

то есть нужно созвать в source и папку

00:15:15

если мы хотим с помощью

00:15:17

импорта взять какой-то файл но в данном

00:15:21

случае мне это делать не надо я хочу

00:15:24

сделать так что я буду отправлять на

00:15:26

локалхост 3001 это давайте мы уберем

00:15:31

чтобы она не мешала нам вкладка 3001 я

00:15:33

хочу сделать так чтобы я отправлял

00:15:35

запрос на мой сервак

00:15:37

и сервак не возвращал какой-то джейсон

00:15:41

то есть я получал какой-то там джейсон

00:15:44

файл и его потом погружал и потом уже

00:15:47

что то с ним дела у меня будет работать

00:15:50

примерно таким образом и так что мы

00:15:54

будем делать теперь

00:15:55

сейчас я проверю образом вот на моем все

00:16:00

что мы будем делать теперь смотрите я

00:16:02

закинул в папку public db джейсон теперь

00:16:06

я буду брать этот db джейсон по

00:16:09

такому-то адресу локалхост но это ваше

00:16:13

приложение и

00:16:14

db джейсон я нажимаю enter и ничего не

00:16:18

получая

00:16:19

не получая кстати наверно потому что я

00:16:22

напрямую через браузер обращаюсь давайте

00:16:24

мы попробуем отправить fitch а я к

00:16:28

запрос tanks фарид и чантинг greetings

00:16:34

from ли тони сценки форварда нэйшн

00:16:40

дальше я не знаю что сказать в любом в

00:16:45

любом случае останки

00:16:46

кристина что мы делаем я беру а я

00:16:51

по-моему ссылку неверно указал давайте

00:16:53

мы проверим вот так поставлю .

00:16:57

а вот работает и оказывается просто

00:16:58

запятую поставил вместо точки все

00:17:01

нормально все нормально то есть что у

00:17:03

нас смотрите у нас тут вот вот это вот

00:17:07

объект вот и в этом объекте у нас есть

00:17:09

свойства пиццы и потом вот эту вот

00:17:11

массив мы будем превращать уже в реальные

00:17:14

ну компоненты которые нам нужны и так

00:17:16

смотрите вот есть файл по этому пути и

00:17:20

его теперь уже нужно взять именно в

00:17:23

реакции и сохранить где-то у нас будет

00:17:26

состояние а потом уже мы будем брать из

00:17:29

состояния и рендерить уже сами

00:17:32

компоненты и так если вы когда-нибудь

00:17:36

как я когда первый раз изучал react

00:17:38

хотите столкнуться с такой задачей где

00:17:40

вам нужно взять обратиться к бэг-энда

00:17:43

обратиться к кому-то сервера

00:17:45

который вам удаленно должен вернуть

00:17:48

какие-то данные эти данные вы должны

00:17:50

получить и сохранить в реакции если вы

00:17:53

хотите понять как это сделать сейчас мы

00:17:55

это будем делать то есть у нас сейчас

00:17:57

наших клиентское приложение будет

00:17:59

отправлять запрос на backend ну якобы

00:18:02

backend и так что мы делаем я теперь

00:18:07

убираю вот эту часть

00:18:09

смотрим что у нас пайка джейсон и по

00:18:11

моему xs не добавлял 7 ошибаюсь ману я

00:18:14

недоволен

00:18:15

нет не добавлял сегодня мы будем изучать

00:18:19

новую библиотеку в наверное некоторые

00:18:23

начинающие разработчики спросите по

00:18:25

или будут жалуются блин типо нахрена нам

00:18:28

столько новых библиотек зачем они нам

00:18:30

вообще в принципе нужны не хватит ли

00:18:32

просто реактор в принципе просто реактор

00:18:34

хватит и мы можем весь код писать уже

00:18:37

сами мы можем общее даже не использовать

00:18:39

react

00:18:40

мы можем взять и все написать сами там

00:18:42

на джейка или вообще просто натянуть

00:18:44

java скрипте

00:18:45

но все эти библиотеки и в том числе

00:18:48

react и прочие они созданы для того

00:18:49

чтобы нам упростить работу и разработку

00:18:52

нашего проекта то есть условно говоря

00:18:54

тот же react

00:18:56

нам упрощают разработку каких-то там

00:18:59

сложных приложений и простых неважно то

00:19:01

есть ускоряет и упрощает и причем

00:19:04

говорит как правильно нужно сделать и

00:19:07

далее далее есть дополнительные всякие

00:19:09

библиотеки по типу там у рио

00:19:11

редакция там access я не знаю что нибудь

00:19:15

еще

00:19:16

react роутера и прочее все эти

00:19:19

библиотеки уже работают их код написан

00:19:22

для того чтобы мы его могли

00:19:23

использовать и сами при этом не писать

00:19:25

велосипед понимаете если мы хотим взять

00:19:28

и условно говоря сделать хранение данных

00:19:31

глобально то мы можем это сделать все

00:19:34

вручную

00:19:35

да без проблем но блин зачем если есть

00:19:38

библиотеки который себя зарекомендовали

00:19:40

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

00:19:42

работает хорошо и сегодня мы будем

00:19:44

изучать новую библиотеку которая

00:19:47

называется access благодаря именно этой библиотеке

00:19:50

мы можем отправлять на backend запросы

00:19:53

там get запрос по запрос и прочее

00:19:56

получать какие-то данные эти данные

00:19:59

потом уже сохранять на ли ок джес

00:20:00

точняк джеймс тут такой момент что мы в

00:20:05

принципе можем не использовать axis мы

00:20:08

можем взять и сначала сделать на fitch

00:20:10

то есть с помощью просто уже того api

00:20:13

который есть в java скрипте

00:20:15

итак давайте сначала сделано фич потом я

00:20:18

покажу как можно сделать отдельной

00:20:20

библиотекой какая у нас задача вообще

00:20:23

принципе стоит у нас сейчас стоит задача

00:20:24

такая что мы должны взять сказать ну то

00:20:27

есть мы как приложение должен сказать

00:20:29

backend дай нам пожалуйста джейсон и бак

00:20:33

engvid какой джейсон тина я горю далее

00:20:35

вот это вот файл db джейсон и все что у

00:20:38

него есть верни мне это пожалуйста

00:20:40

и я это у себя где-то сохраню и вот

00:20:44

примерно вот то что я сейчас описал мы с

00:20:45

помощью кода напишу что мы делаем я

00:20:48

захожу в псв джесс я ничего писать

00:20:52

теперь понял что не буду я это буду

00:20:54

писать

00:20:55

пока буду писать хотя знаете как давайте

00:20:59

мы будем это давайте мы будем это писать

00:21:01

тут знаете что мы сделаем мы будем

00:21:04

получать данные от бэг-энда сохранять и

00:21:08

vps а потом прокидывать их hам давайте

00:21:13

так и сделаем до или так или так не

00:21:16

будем делать я просто подумал что

00:21:19

не давайте пока так и сделай может потом

00:21:21

отрыв фактором потом можно три фактора

00:21:23

но суть в том что нам в любом случае в

00:21:26

родительском компоненте в главном

00:21:29

компоненте нужно сохранять там какие-то

00:21:31

данные а потом них уже где-то

00:21:33

использовать и у нас будет уже на уровне

00:21:36

мтс хранение данных и так что мы делаем

00:21:40

теперь я беру

00:21:42

то пишу код если я хочу при первом

00:21:48

рендере нашего приложения отправить

00:21:51

какой-то код а потом получить эти данные

00:21:53

то я соответственно должна использовать

00:21:56

хук который называется эффект у него

00:22:00

изучали в прошлом уроке тут такой

00:22:03

ключевой момент что у меня в

00:22:04

комментариях писали типа я не знаю

00:22:06

разницу между компаний ну то есть как не

00:22:08

написать компонент dismount на с помощью

00:22:12

хуков я уже ответил принципе это в

00:22:14

комментариях что есть документации этом

00:22:17

подробностью объясняется

00:22:18

но если говорить вкратце то для того

00:22:22

чтобы написать на react джесс компонент

00:22:24

did mount для того чтобы сказать что

00:22:26

компонент сейчас первый раз с

00:22:29

монтировался мы будем писать следующий

00:22:32

код react .

00:22:34

юз эффект потом скажем что есть

00:22:38

анонимная функция

00:22:39

который будет выполняться когда нам

00:22:41

нужно и потом скажем что вот этого

00:22:44

действия именно пустой массив для юз

00:22:47

эффект говорит что это компонент did

00:22:50

mount то есть вот этого часть именно для

00:22:52

мтс

00:22:53

означает что теперь наше приложение и на

00:22:56

вот эту вот компоненты зверь точнее

00:22:58

будет выполнять этот эффект только один

00:23:02

раз при первом рендере

00:23:04

и в этом хуки внутри вот это вот

00:23:06

анонимной функции мы напишем следующий

00:23:09

код то есть теперь нам нужно сделать так

00:23:13

что мы будем отправлять запрос смотрите

00:23:15

мы заходим в консоль

00:23:18

сейчас я опишу обычный java script код я

00:23:22

пишу fitch то есть есть специальная api

00:23:25

вы java скрипте который называется fitch

00:23:28

gs вечно пишите тут подробностью

00:23:30

объясняется гленн джеймс суть в том что

00:23:33

fitch получает встречу возвращает

00:23:36

promise проще говоря правильность это

00:23:39

такая штука которая говорит что что-то

00:23:42

происходит и это что-то может

00:23:45

происходить там асинхронно и

00:23:48

это что-то я тебе могу вернуть когда она

00:23:51

действительно будет получено и мы будем

00:23:54

делать по такому же принципу получения

00:23:56

асинхронных данных точнее будем делать

00:23:58

получение вот этого джейсона я пишу

00:24:01

fitch говорите ка дай но я не знаю как

00:24:04

на английском fitch давайте вместе

00:24:05

посмотрим 5 принести принести

00:24:09

[музыка]

00:24:11

очаровательный заканчивать квест по

00:24:14

сбору да именно вот это вот там есть ещё

00:24:17

был написано что мы делаем я беру вот

00:24:21

эту часть прокидывая вот сюда то есть

00:24:25

что я делаю теперь я просто говорю что

00:24:27

вот этого действия смотрите вот ставка

00:24:31

интер загрузка в от этого действия вот

00:24:35

этого действия я хочу сделать с помощью

00:24:37

java скрипта для этого написал такой код

00:24:40

печь типу дай мне принеси мне ну дай мне

00:24:43

информацию из вот эту вот адреса

00:24:46

нажимаю enter и смотрите сюда я сейчас

00:24:49

пока еще не нажал enter вот сюда вот

00:24:50

видите ничего нету я нажимаю enter я

00:24:55

получил promise смотрим network network

00:24:58

мы видим что

00:25:00

отправился запрос мы отправили get

00:25:04

запрос get это значит ну типа получить

00:25:06

дать что-то и мы сказали серверу сервер

00:25:10

пожалуйста дай нам вот этот вот файл

00:25:14

смотрим что нам вернул server server на

00:25:17

нырнул и такое джейсон то есть вот то

00:25:19

что мы хотим тоном она верна и фэч это

00:25:23

вот вот эти вот все данные

00:25:25

возвращает через пропасть давайте

00:25:27

проверим что теперь у нас в promise я

00:25:30

пишу опять сайт и далее в promises его

00:25:35

не знает шутку про нас почитайте java

00:25:36

script документацию

00:25:38

кроме сможет получать китам то есть

00:25:41

promise дает нам какие-то методы если

00:25:43

метод вдм есть метод кей честь этот файл

00:25:46

файл или может быть что то еще есть и не

00:25:49

за плевать но это три самых главных

00:25:51

методов и мы будем делать следующую мы

00:25:54

будем говорить когда вот этого действия

00:25:55

выполнится тогда вдм выполнить вот эту

00:26:01

вот анонимную функцию

00:26:07

готова и в итоге нам запрос отправляется

00:26:11

и он возвращает готово все отлично

00:26:14

теперь не хочу получать в консоль готова

00:26:17

я хочу получить то что мне вернул себе

00:26:19

для этого я пишу

00:26:20

response или просто могу написать в с

00:26:25

беру от этого переменную прокидывая ее в

00:26:28

консоль смотрим теперь нажимаю enter

00:26:32

теперь я уже получаю пронес котором не

00:26:35

вернул эта функция а потом уже получаю

00:26:38

то что в консоли мне вернулось то есть

00:26:40

из щас возьму напишу тут

00:26:41

условно говоря вот так вот чтобы мы

00:26:45

видели разницу вот видите вот вот у нас

00:26:49

просто функция вернула без консоль лог а

00:26:52

это на мою же с помощью консоль ваку

00:26:54

вернули смотрим что response response мы видим

00:26:57

что есть там ответ типа ok

00:26:59

все нормально ты по этому адресу

00:27:01

обратился нам говорят в ответ от сервера

00:27:04

мы получили

00:27:05

и то что нам нужно хранится в базе и

00:27:09

если зайти сюда

00:27:11

то мы не сможем ну то есть мы как люди

00:27:13

не сможем прочитать что там говорится и

00:27:17

в итоге для того чтобы вот этот предаст

00:27:21

рим для того чтобы вот эта часть

00:27:23

переконвертировать в понятный для нас

00:27:25

язык текстовый язык мы должны

00:27:28

использовать дополнительную одну штуку

00:27:30

которая сейчас скоро напишу а потом уже

00:27:32

оттуда вот вытащить эти данные и и

00:27:34

дальше использовать

00:27:35

насколько я знаю тут уже принципе ничего

00:27:38

не получить то что нам нужно мы сейчас

00:27:42

можем сделать следующие теперь redbul то

00:27:44

есть в базе хранится поток скажем так

00:27:49

олечка хранится информация которую

00:27:51

непонятно теперь ей нужно сделать так

00:27:53

чтобы она нам было понятно я пишу и вот

00:27:57

убераю вот эту часть тоже часть выберу я

00:28:00

пишу что вот это вот response мне нужно

00:28:04

с помощью метода джейсон

00:28:05

то есть мне нужно взять вот этого текст

00:28:07

в году эту информацию которая по учету

00:28:10

переконвертировать и и джейсон я теперь

00:28:14

получаю promise

00:28:16

то есть в итоге у меня исполнителей сон

00:28:19

возвращает новую кроме

00:28:20

что я делаю теперь я теперь говорю что

00:28:24

вот это вот promise который был у меня

00:28:28

возвращен в консоль я его передают сюда

00:28:31

то есть я сейчас вам это зачем объясняю

00:28:33

для того чтобы вы поняли что этот способ

00:28:36

он сложнее того который сейчас вам

00:28:38

объясню то есть мы теперь берем говорим

00:28:41

типа перри конвертирует а в джейсон

00:28:42

потом теперь то что ты

00:28:44

переконвертировать джейсон верни нам

00:28:46

смотрим что теперь консоль лоб джейсон

00:28:54

вот так вот лишнее лишь никого скобка

00:29:00

выполняю и получаю теперь уже не

00:29:03

readable строим не получают там какой-то

00:29:08

promise а получаю уже реальный джейсон

00:29:11

вот видите то есть я произвел вот такой

00:29:15

вот путь для того чтобы получить вот

00:29:17

такого джейсон

00:29:18

и в итоге я могу теперь взять вот эту

00:29:21

вот весь код внедрить его вот сюда вот и

00:29:24

дальше уже что-то с ним сделать но

00:29:27

просто так хранить это все ну не круто

00:29:30

то есть ну просто так чтобы она мы

00:29:32

получили то и все что тут пишут в чате

00:29:38

это трансляция или нет эта трансляция

00:29:45

запись короче

00:29:46

ой нет запись короче скорее боже умер

00:29:49

смотреть больно на него

00:29:52

смысле я что помер

00:29:55

смысле у нас трансляцию не работает или

00:29:57

что не понимаю

00:30:08

123 123

00:30:15

вроде все нормально в какой папке

00:30:20

хранится в паблик в папке public то есть

00:30:23

если мы хотим обратиться по ссылке окей

00:30:28

спасибо огромное что троллите в папке

00:30:32

public храним вот этот вот файл чтобы

00:30:34

потом по ссылке к нему обращаться и так

00:30:38

что мы делаем теперь просто блин ну

00:30:41

извините я не могу не обращать внимание

00:30:43

потому что ну вот такая вот хрень с

00:30:46

трансляцией происходит и так что мы

00:30:49

делаем теперь вот этого джейсон которая

00:30:51

получил мне теперь нужно сохранить его

00:30:52

буду сохранять уже стоите

00:30:55

что я делаю я теперь беру создаю стоит

00:30:59

пишу и us state далее вот туда добавляю

00:31:05

react потому не вот так вот проще писать

00:31:07

то есть разницы нет что вы сделаете вот

00:31:09

так вот а потом возьмете тут напишите

00:31:12

что вы с помощью де структуризации вы

00:31:15

такое можете заметить что из реактор с

00:31:18

помощью деструкторы заяц получается

00:31:19

отдельный метод

00:31:20

и он используется так но не знаю мне

00:31:22

этот метод не очень нравится мне вот

00:31:24

нравится по душе но очень не по душе вот

00:31:26

этот способ просто без де структуризации

00:31:29

взять и написать react а потом уже взять

00:31:32

и . и estate прим но это удобно и

00:31:35

понятно откуда берется и estate

00:31:37

теперь я тут делаю массив ну пусть у

00:31:40

меня по умолчанию будет храниться в

00:31:42

массив потом я пишу set

00:31:46

давайте как называем пицца с или

00:31:49

ites set in this set pete's давайте мы

00:31:54

его назовём ся от пицца с пусть им будет

00:31:56

так я отпишу цвет и заз потом пишу

00:32:02

пейзаж

00:32:04

сохраняем вот так вот и потом уже всем и

00:32:09

пицца которое получил с помощью джейсона

00:32:11

я их буду передавать вот сюда вот что я

00:32:16

делаю я беру вот эту вот всю часть

00:32:18

прокидывать сюда только тут я уже не

00:32:21

пишу консоль мог так как я уже получил

00:32:23

джейсон я убираю консоль лак и потом

00:32:28

пришел так вот так вот тут пишу что

00:32:33

когда запрос был отправлен

00:32:35

переконвертировать джейсон и в итоге это

00:32:38

джейсон получил я это джейсон беру и

00:32:41

прокидывая вот вот это вот стоит пишу

00:32:45

тут джейсон

00:32:47

но какой момент смотрите у нас

00:32:51

возвращается объект но это логично что

00:32:55

он возвращается объект потому что я это

00:32:57

специально сделал так чтобы потом для

00:33:01

нашего фейково джейсон это было доступно

00:33:03

так как ему нужно и нам нужно теперь

00:33:06

взять и из этого объекта вытащить

00:33:08

свойства pets с для этого я пишу что из

00:33:13

джейсона не нужно вытащить pets с потом

00:33:17

уже это пицца с я буду уже сохранять

00:33:19

куда мне нужно давайте проверим что это

00:33:21

действительно работает тут я пошел

00:33:23

консоль лак и делают так вначале у нас

00:33:26

должен быть пустой массив потом у нас

00:33:30

будет уже все пиццы мы видим вот сначала

00:33:34

пустой массив потом рендер произошел и

00:33:37

отправился запрос и мы видим что этот

00:33:41

запрос давайте вот фильтр включен и напишу тут

00:33:45

д.б. джейсон мы видим что этот запрос уже за

00:33:48

нас отправляется то есть когда

00:33:50

происходит 1 render react говорит о'кей

00:33:54

театры нравился обвес и вот это

00:33:57

отправляя запрос

00:33:58

если я вот этого действия действия

00:34:00

комментируя сохранил я попью воды

00:34:04

то тогда он не запрос отправляться не

00:34:06

будет

00:34:11

[музыка]

00:34:12

сохраняю смотрим и мы видим что в

00:34:16

фильтрации в network запрос не

00:34:19

отправляется и в итоге в консоли нас

00:34:22

водится пустой массив

00:34:23

то есть запрос сам он не отправился на

00:34:26

момент когда произошел рендер теперь я

00:34:30

пишу что я хочу вернуть это действие

00:34:32

когда у меня первый раз от рендерится и

00:34:35

джейс отправиться в такой вот запрос и в

00:34:38

итоге когда вот я получу то что не нужно

00:34:40

я это все сохраню стоит ну и все таким

00:34:44

образом теперь я уже могу взять те

00:34:46

данные которые получил и сохранила уже в

00:34:49

стоит могу где-то использовать что мы

00:34:52

делаем теперь для того чтобы но

00:34:53

визуально понять что произошло какое-то

00:34:56

изменение что мы делаем теперь мы заходим пойдешь

00:35:00

отсюда мы убираем что отсюда мы убираем

00:35:04

все пиццы кроме одного блока что я делаю

00:35:09

я оставляю это и думать все нет то есть

00:35:15

так давайте так иду вот так вот вот так

00:35:19

вот так вот так вот так все пиццы

00:35:23

возьмем и будем их час удалять вот

00:35:27

досюда

00:35:29

сохраняю и вот теперь я получаю одну

00:35:33

пиццу редакция сегодня не будет он будет

00:35:36

на следующем уроке и это будет точно

00:35:38

сегодня у нас будут другие темы потому

00:35:41

что сейчас я не смогу объяснить редокс

00:35:44

это слишком затянуто будет сегодня мы

00:35:48

вообще принципе разберемся как вообще

00:35:50

это хоронить на уровне самого приложения

00:35:52

а потом уже это на уровне самого

00:35:54

редакция перенесем то есть что я делаю

00:35:58

теперь у нас есть вот такой вот блок

00:36:01

давайте мы его сразу же перенесем в

00:36:03

компонент чтобы всю верстку не сохранять

00:36:05

мы уже крутые программисты мы уже знаем

00:36:08

как это делать то есть что мы делаем мы

00:36:10

создаем файл называется пицца блок за

00:36:13

вами о так как нам понять не будет

00:36:16

потом мы уже знаем что можно с помощью

00:36:17

сниппет а создать вот такой вот шаблон

00:36:20

сразу же компаниям такой сделать потому

00:36:22

что мы молодцы и смотрели старые уроки

00:36:25

теперь мы берём вот эту вот верстку

00:36:29

как вы меня вчера научили копируют так

00:36:33

вырезаю отсюда и перекидывать сюда вот

00:36:37

сохраняю это можно убрать кстати вот

00:36:39

этот убрать можно сохраняем потом мы

00:36:43

знаем что но сохраняя вот так вот сейчас

00:36:46

ничего пицца не будет потом мы знаем что

00:36:47

1 новый компонент

00:36:49

но его нету в energise мы знаем что

00:36:52

делать мы его переносим в яндекс с чтобы

00:36:54

каждый раз на каждый компонент

00:36:56

не делать импорт сохраняем теперь идем

00:37:00

hам потом мы знаем что благодаря именно

00:37:04

в с коду мы можем не писать

00:37:06

импорт но я сейчас вспомнил что он

00:37:09

полипом напишется и мы просто возьмем

00:37:11

сюда добавим пицца блок теперь у нас в

00:37:14

яндекс джесс в компонент есть наш

00:37:16

компонент и мы не будем отдельно не

00:37:18

подписать я уберу

00:37:20

пихаю вот сюда вот вот такую теперь вся

00:37:24

вёрст капица блока у нас в этом

00:37:27

отдельном компоненте вот он теперь вот

00:37:29

могу взять вот сделать их много сколько

00:37:32

мне надо обожаю react

00:37:34

сохраняю и вот возвращаю все как есть и

00:37:37

так господа программисты теперь что мы

00:37:40

делаем нам теперь нужно сделать так что

00:37:43

сколько мы получили объектов из массива

00:37:48

вот сколько этих объект организма 10

00:37:50

штук столько блоков отображаться и будет

00:37:53

как это сделать мы берём вот эту вот

00:37:57

переменную так как мы уже получили

00:37:59

данные мы берем эту переменную

00:38:02

прокидываем и и хам только тут такой

00:38:07

момент что это компонент

00:38:09

и вот эта часть насколько я помню нужно

00:38:13

поменять то есть если мы хотим сделать

00:38:16

так чтобы мы могли в компонент

00:38:18

прокидывать какие-то пропсы мы должны

00:38:22

взять и написать тут место компонент

00:38:26

написать render render

00:38:30

теперь взять написать тут анонимная

00:38:34

функция потом написать вот так вот то

00:38:38

есть вот этот вот метод нужен для того

00:38:39

насколько я помню я могу может ошибаться

00:38:43

насколько я помню в от этот метод нужен

00:38:45

для того чтобы делать вот такие вот вещи

00:38:48

если мы не хотим брать и там создавать

00:38:52

какую-то анонимную функцию потом в

00:38:54

какой-то там компонент прокидывать

00:38:56

что-то

00:38:57

то мы можем просто название компонент

00:38:59

указать и написать компонент потом

00:39:01

передать название компонента если же я

00:39:03

хочу в тот компонент который мне будет

00:39:06

рендериться по этому пути

00:39:07

что-то прокинуть а я это хочу сделать я

00:39:11

вот пишу рендер я объясняю что я хочу от

00:39:14

рендерить вот эту часть вот это вот

00:39:16

анонимная функция которая будет

00:39:18

запускаться с самим реактор и этот и эта

00:39:21

функция будет уже возвращать вот это вот

00:39:24

компоненты

00:39:25

теперь в этот компонент я передаю пусть

00:39:29

будет айтюнс я думаю наверное так будет

00:39:33

логичнее мне кажется так будет логичнее

00:39:34

передаю айтюнс ну типа значение скажем

00:39:39

так назовем так

00:39:40

строчки значения теперь white and себя

00:39:43

будет придавать вот это вот переменную

00:39:45

вот сюда то есть я могу написать пицц с

00:39:48

но блин не знаю почему то пицца с не

00:39:51

хочется тут писать я напишу а так

00:39:53

сохраняю смотрим ничего не изменяется

00:39:56

заходим теперь хам в ком теперь у нас

00:39:59

есть про пса кто что нам нужно напишем

00:40:02

консоль log

00:40:03

далее напишем props

00:40:07

и вот этот протянем сюда проверим что в

00:40:10

консоли нам возвращается то что нужно да

00:40:13

мы получаем hам внутри хам в пробках мы

00:40:18

получаем вот эти вот айтюнсе видите на

00:40:20

этом этапе мы получаем пустой массив

00:40:22

потому что только приложение начинает

00:40:25

рендерится она сразу же возвращает и

00:40:27

состоянии пустой массив запрос еще не

00:40:30

успел выполняться

00:40:31

то есть рендер произошел но запрос еще

00:40:33

не успел выполнится когда запрос

00:40:36

выполнился происходит апдейт потом его

00:40:38

переход пихаем в пицце уже массив

00:40:43

который был возвращен из defender и в

00:40:47

итоге мы получаем вот код массив теперь

00:40:49

давайте сделаем следующее с помощью де

00:40:51

структуризации

00:40:52

исправься вытащим айтюнс далее далее

00:40:57

теперь возьмем так как мы знаем как

00:40:59

взять и массив превратить во что то мы

00:41:03

пишем следующие а это мтс с помощью мипо

00:41:07

конвертируем вот этот вот массив

00:41:09

объектов

00:41:11

вот это вот массив объектов мы теперь

00:41:13

конвертируем в react компонент я беру

00:41:18

пишу что вот это вот map получает

00:41:22

функцию которая получает от dji и

00:41:28

место каждого объекта который будет в

00:41:31

этом массиве она заменяет его на

00:41:33

ректорский компонент сохраняя смотрим и

00:41:37

вот я вижу теперь что у меня рендерится

00:41:40

все пиццы давайте вот перезагружаю и мы

00:41:44

можем заметить что вот происходит такая

00:41:47

вот пауза типа

00:41:48

сжатие поэтому резко все открывается

00:41:51

чтобы был это наглядней я теперь покажу

00:41:53

так я пишу захожу в network если хочу

00:41:57

уменьшить скорость интернета себе

00:41:59

имеется виду в браузере

00:42:01

я державный at work то есть открыла

00:42:04

консоли умный at work потом закажу вот

00:42:06

сюда вот тротлинг и выбирают скорость интернета

00:42:10

вы можете сами добавить скорость я вот

00:42:12

ставлю там fast

00:42:14

3g

00:42:15

перезагружаем видите пустой массив то

00:42:21

есть очень пустая страница

00:42:22

а потом все рендерится то есть теперь у

00:42:25

нас происходит вот такая вот маги и в

00:42:29

итоге у нас стран дрица вот эти вот все

00:42:31

страницы

00:42:32

если я теперь возьму условно говоря тут

00:42:34

поставлю слова 3g сделают так пока она

00:42:38

загружает почитаю чат

00:42:43

то автоматов connect обернется не кстати

00:42:47

об этом не знал и не знаю правда три

00:42:49

нитку я бы там низом смотрите видите вот

00:42:52

то есть сначала пустой массив

00:42:54

точнее пустая страница а потом всё

00:42:57

рендерится и вот возвращает скорость интернет и все

00:42:59

я могу сделать там типа загрузка

00:43:04

написать текст могу не делать то есть я

00:43:06

могу взять что-то там написать что

00:43:08

угодно то есть теперь у нас

00:43:11

пиццы получаются асинхронно но мы видим

00:43:15

что название пицц одинаковы везде

00:43:16

давайте мы это исправим теперь что мы

00:43:19

делаем так как мы знаем что общих

00:43:22

хранится а мы знаем что там хранится ну

00:43:24

вот этот каждый объект

00:43:25

то есть вот это вот каждый объект

00:43:28

который есть массиве он передается через

00:43:31

мап вот сюда вот и потом р-н drip

00:43:34

столько раз пиццы

00:43:36

сколько раз тут в массиве хранится

00:43:38

значение теперь что я делаю давайте для

00:43:41

примера возьмем и

00:43:44

из вот этого объекта чтобы вы понимали

00:43:46

что там хранится и так шева так в

00:43:48

консоль мог сделать так а вот этого беру

00:43:51

смотрите вот смотрим что теперь тут и мы

00:43:56

видим что выполняется 10 раз консоль лак

00:43:59

и мы получаем категорий

00:44:02

айди имиджу wellton name

00:44:05

цена рейтинг размеры которые доступны и

00:44:09

типы которые доступны теперь мы будем

00:44:13

брать вот эту вот из вот это вот объекта

00:44:15

а где значение при перроне там что-то

00:44:19

там но свойство на и прокидывать это в

00:44:22

комп компонент пицца блок как мы то

00:44:24

будем делайте смотрите как так как мы при про

00:44:27

комп при каждом заходе

00:44:29

поэтому массиву то есть при каждой

00:44:32

итерации мы знаем какой объект мы

00:44:34

получаем какие у него свойства есть мы

00:44:37

просто пишем тут вот так вот мы потом

00:44:42

берем из вот этого объекта свойство name

00:44:46

прокидываем сюда пишем op je n'y

00:44:50

сохраняю и смотрим что теперь видите все

00:44:54

равно все тоже самое ну никаких

00:44:56

изменений не происходит потому что мы

00:44:58

протянули свойства но его не пихнули уже

00:45:01

в сам компонент

00:45:02

еще кстати смотрите что вот такая вот

00:45:08

водка и предупреждение warning типа

00:45:11

каждый типа

00:45:12

начальный элемент который ты пытаешься

00:45:14

рендерить он не уникальна и для того

00:45:17

чтобы он был уникальный ты должен

00:45:18

поставить ключ и так так как у нас

00:45:21

каждый объект хранит уникальное значение

00:45:24

какое именно айди я не буду писать там и

00:45:28

яндекс или что то еще я просто возьму

00:45:30

вот этот вот объект и так как я его

00:45:34

рендере вот это вот компоненты его рендерю

00:45:37

каждый раз с помощью мы по я должен

00:45:40

объяснить react у смотри react

00:45:43

так как ear эндрю много всяких

00:45:45

компонентов пицца блоков и бренды их

00:45:50

потому что они хранятся там каком-то там

00:45:52

массиве объекты и эти объекты превращен в

00:45:54

компонент ты react

00:45:56

должен понимать что там первый компонент

00:46:00

который отрендерится там второй и третий

00:46:02

компонент

00:46:03

что они отличаются друг от друга и для

00:46:06

того чтобы я акт это понял для того что

00:46:08

мы ему объяснили что типа вот вот это

00:46:11

вот пицца блок будет отличаться от

00:46:14

другого пицца блок который будет

00:46:15

рендериться в этой области мы добавляем

00:46:18

ключ с помощью этого ключа мы объясним

00:46:21

что этот пицца блок 2 пицца блок 3 pets

00:46:25

блок они будут отличаться то есть react

00:46:29

это нужно для того чтобы он лишний раз

00:46:31

не производил сожжен др там где это не

00:46:34

нужно понимаете

00:46:36

то есть но чтобы не было путаницы в

00:46:38

дальнейшем именно с вашим приложением

00:46:40

вейп уникально объяснена точно не

00:46:44

уникальна объясняете

00:46:45

вы объясняете что есть компонент и он

00:46:48

уникален благодаря именно включу пишите

00:46:51

какие потом объясняете какое значение

00:46:54

уникальный должно быть у этого

00:46:55

компонента

00:46:56

так как у меня есть уникальное значение

00:46:59

а это свойство айди

00:47:00

я пишу объект айди сохраняя теперь уже

00:47:05

этой ошибки у меня не должно быть до ее

00:47:07

нету отлично теперь уже каждую пицца

00:47:10

блог про будет рендериться

00:47:12

он будет уникальным и этот кий он не

00:47:15

прикидывается вычтем а он нужен для

00:47:17

реактор идем далее теперь нам нужно

00:47:20

взять и вот это вот свойство name

00:47:23

который мы покинули вот это вот

00:47:25

компонент его нужно вытащить из

00:47:28

процессов и вставить вот сюда вот это

00:47:32

сделать очень просто пишем тот что мы

00:47:35

хотим с помощью для структуризации взять

00:47:37

все пропсы

00:47:38

и оттуда вытащить свойствами и вот это

00:47:42

вот переменной name прокинуть сюда вот

00:47:46

пишем тут фигурные скобки мы сохраняем

00:47:51

смотрим и мы видим теперь что у нас

00:47:55

появляется и перо new fresh там сырная

00:47:58

цыпленок барбекю и так далее то есть

00:48:00

теперь у нас не просто статичные блоки а

00:48:03

уже реальные пиццы которые мы хотим

00:48:07

рендерить из вот это вот массива

00:48:10

понимаете то есть в этом массиве то что

00:48:12

есть теперь будет рендериться на этой

00:48:14

странице то есть мы отправили на бэкон

00:48:17

запрос сказали backend дай нам

00:48:20

пожалуйста вот эти вот пиццу backend нам

00:48:21

вернулась и пиццы

00:48:22

потом и сказали backend окей спасибо

00:48:24

потом мы заходим в reactos

00:48:27

и вряд ли вас мы говорим ок джес ты

00:48:30

пожалуйста сохранить куда-нибудь эти

00:48:32

пиццы а потом я эти пиццы будут

00:48:35

проектировать куда мне нужно я

00:48:36

прикидываю их в хам и потом уже внутри

00:48:40

хён буду у эти пиццы использовать там где

00:48:43

мне это нужно но используют тут объясняю

00:48:46

что каждый

00:48:47

объект из вот этого массива будет

00:48:50

переконвертировать не в обычный объект

00:48:53

а вот такой вот реактор ских компонент

00:48:56

теперь у нас каждый объект это реактор

00:48:59

ский компонент далее я сказал что в этот

00:49:01

реактор ский компонент я хочу прокинуть

00:49:04

название каждой пиццы и объяснил что у

00:49:08

этого реакторов ского компонента есть

00:49:11

свойство name

00:49:13

далее в этот свойства на им я прокидывая

00:49:16

из каждого объекта

00:49:18

название пиццы то есть теперь у меня по

00:49:20

сути вот эта часть вот этого часть но по

00:49:23

сути она является обычным объектом то

00:49:27

есть вот эта вот часть вот это вот это

00:49:30

вот объект он пири-пири конвертировался

00:49:32

в реактор ский компонент и мы взяли из

00:49:36

этого объекта

00:49:37

ним видите петроний давайте я увеличу

00:49:40

и потом вставили его сюда потом взяли

00:49:45

сырные переконвертировали и вставили

00:49:51

сюда то есть теперь у нас каждая часть

00:49:54

объекта конвертируется же в реактор ский

00:49:57

компонент хорошо мы принципе разобрались

00:50:00

с этой частью

00:50:01

теперь давайте дальше мы можем для

00:50:03

красоты добавить вместо вот этих

00:50:06

статичных изображений уже что то более

00:50:08

менее симпатичный вот щас вот будет ну

00:50:10

немного кайф что мы делаем мы тут пишем

00:50:13

что есть свойство иметь ural и пишем что

00:50:19

пицца блок мы должны покинуть объект

00:50:24

имеет

00:50:25

юар сохраняем рендерится все точно так

00:50:30

же просто картинки

00:50:31

теперь это нужно поправить заходим пицца

00:50:34

блок отсюда вытаскиваем и меч и р так

00:50:39

как мы указали его в этом компоненте уже

00:50:42

тут ну как в обычном hdmi ли мы добавили

00:50:46

новое свойство теперь его мы можем

00:50:48

вытащить из пропсы

00:50:49

вот тут вот с помощью фигурных скобок мы

00:50:53

с помощью де структуризацию the skin из

00:50:54

проб со свойствами я пишу что вот это

00:50:57

вот imagine должен ставиться место в

00:50:59

это вот вот это вот ссылки тут я пишу

00:51:03

фигурной скобки и имиджа сохраняем

00:51:08

теперь я вижу что у меня рендерится

00:51:11

мой компонент я получаю название пиццы и

00:51:15

вот каждая пицца теперь имеет свою

00:51:18

картинку но уже что-то у нас

00:51:20

накручивается до господа

00:51:22

то есть теперь у нас есть такая хрень

00:51:25

что-то вроде компонента

00:51:27

который получает название и получает

00:51:30

картинку теперь уже что-то у нас

00:51:32

начинает появляться

00:51:34

далее теперь нам нужно взять но

00:51:36

прокинуть все остальные свойства я

00:51:38

конечно мог бы взять и писать смотрите

00:51:42

как что есть айди да потом писать тут

00:51:47

типа айди и вот там о бже о бже

00:51:53

айди кто мог написать там что есть прайс

00:51:56

кто написать прайс там и так далее но

00:51:59

если я этого делать не хочу то что как

00:52:04

не выкручиваться шкаф не быть то есть

00:52:06

как сделать так чтобы те свойства

00:52:10

которые мне известны я не пихал каждый

00:52:13

раз в этот компонент есть этого например

00:52:16

делать не хочу но я знаю что в этом

00:52:19

объекте есть те свойства которые буду

00:52:22

использовать как не взять теперь из

00:52:24

этого объекта каждое свойство

00:52:26

автоматически пропихнуть в этот

00:52:29

компонент сделать это можно очень просто

00:52:33

более простой способ это хотя они оба

00:52:38

простые но разницу покажу

00:52:40

показываю первый способ я могу взять

00:52:43

избавиться от этих вот про псов и

00:52:46

написать просто общей и этот объект

00:52:50

прокинуть уже в пицца блок сохраняю

00:52:53

будет час ошибка

00:52:54

даже по моему ошибки нету ну типа в но

00:52:57

мы видим от что теперь я уже могу взять

00:53:00

вместо этого написать отзыв

00:53:03

потом взять вот это вот обжиг потому что

00:53:07

его прокинул одним

00:53:08

вот этим о действии тут написать о g.na

00:53:11

и потом тут написать о джек йовил

00:53:16

и мы джор-эл и будет все renders также

00:53:19

теперь я знаю что у меня есть объект и

00:53:21

из объекта я уже внутри этого компонента

00:53:24

вытаскивают то что мне нужно но что

00:53:27

делать если я не хочу использовать вот

00:53:31

этот объект я все равно хочу получить именно

00:53:35

свойства как переменные как я это делал

00:53:37

ранее то есть я хочу вот таким вот

00:53:39

образом из объектов вытащить эти

00:53:41

свойства автоматически без написания вот

00:53:45

этих от свойств вручную сделать это

00:53:47

очень просто вы берете пишите тут что у

00:53:51

вашего компонента есть следующая штука

00:53:56

открываете внутри вашего компонента вот

00:53:59

тут вот где-нибудь тут ну например после

00:54:01

пробела пишите фигурная скобка ставите

00:54:05

три раза .

00:54:06

и тот объект который вы хотите

00:54:10

использовать обувь не закрывайте

00:54:13

фигурной скобкой что это значит это

00:54:16

значит что все свойства которые есть

00:54:20

внутри вот этого объекта автоматически

00:54:23

будут проброс она вот это вот компонент

00:54:25

теперь вам не нужно писать о бже ним

00:54:29

оптом прайс

00:54:31

обувь и мичурин то есть каждый раз

00:54:33

вручную это указывать не надо вы можете

00:54:36

взять и написать что есть пицца блок и

00:54:38

есть какой-то объект

00:54:40

все его свойства перейдут в этот в этот

00:54:45

компонент сохраняю смотрим теперь теперь

00:54:51

у нас пишут

00:54:52

кино открыт и мяч урал пишут потому что

00:54:55

написал а где

00:54:56

ну вот сохраняем как было то есть мы

00:54:59

убираем обувь ставим как было и все

00:55:02

работает все как нужно если я уберу эту

00:55:05

часть

00:55:07

видите уже ничего не работает возвращаю

00:55:11

эту часть теперь уже все работает как

00:55:13

нужно давайте проверим смотрите вы мы

00:55:16

написали я написал я объяснил вам что

00:55:19

есть вот такие вот свойства что если

00:55:25

теперь хочу понять что он не обще про

00:55:26

пса

00:55:27

я пишу в консоль лак и проверяю

00:55:31

что у меня есть и мичурин давайте вот

00:55:34

тут для быстрого решения от добавила так

00:55:38

вот что мне в пробках хранится внутри

00:55:41

компонента пицца блок

00:55:43

смотрим я уже вижу что он не внутри

00:55:46

пицца блок из категории есть прайс

00:55:49

средством рейтинге прочее прочее я же

00:55:52

этого не писал видите но все равно

00:55:54

пробках и то есть если я уберу отсюда

00:55:57

то мы видим что пробках уже ничего нету

00:55:59

за нас java скрипт автоматически в этот

00:56:03

компонент прокинул все свойства и потом

00:56:07

мы уже их можем использовать в пробках

00:56:09

то есть таким образом мы можем упростить

00:56:11

нам задачу это можно сделать том случае

00:56:14

если вы уверены какие свойства у вас

00:56:16

есть и что эти свойства вы можете потом

00:56:20

с помощью где структуризации

00:56:22

вытащить из проб сам сохраняю

00:56:25

и все вроде всё работает как надо

00:56:28

давайте по-быстрому я теперь буду меньше

00:56:30

комментировать и теперь просто возьму

00:56:32

вот эти вот все свойства подставлю где

00:56:34

это надо что я делаю я пишу тут прайс

00:56:39

прикидываю его сюда вот так и вот 803

00:56:45

2 45 - 5 то есть как нам нужно вот

00:56:48

803 2 45 803 2 45 и так далее

00:56:53

теперь нужно поправить следующий момент

00:56:57

нужно сделать вот эту вот этот я бы

00:57:01

хотел сейчас заглянуть свой старый кот

00:57:03

но я знаю что если я щас буду

00:57:06

заглядывать свой старый кот то я буду

00:57:08

пытаться писать там писать так как была

00:57:11

там и соответственно я буду сбивать себя

00:57:14

свою стоимость и который я хотел ну

00:57:17

реализовать что я буду делать я буду

00:57:19

вместе с вами теперь разрабатывать эту

00:57:21

часть будем теперь месте думаете как это

00:57:23

сделать и так что мы будем делать

00:57:27

начнет с этой части смотрите помните мы

00:57:29

делали вот этот компонент мире вот этот

00:57:31

компонент

00:57:32

примерно таким же образом у нас будет

00:57:34

работать и тут что мы делаем мы заходим

00:57:37

пицца блок и у нас должен быть активный

00:57:43

вот эта вот часть у нас types

00:57:47

то есть вот это вот types у нас вот она

00:57:52

сайзер

00:57:54

у нас вот то есть вот эти вот три

00:57:57

элемента у нас вот массив вот эти вот

00:58:01

types и у нас будут вот

00:58:03

тонкое традиционная насколько я знаю а

00:58:06

вот видите тут и например делал 0 тут я

00:58:09

например сделал сайт 2640 а тут вот прям

00:58:12

ну полностью указал то есть какие-то

00:58:16

пиццы могут не иметь какие-то

00:58:17

определенные размеры какие-то

00:58:19

определенные типы а мы их не будем

00:58:21

внедрять

00:58:22

единственное что я не помню а помню то

00:58:26

есть если же у нас например есть два

00:58:29

типа то они оба активны

00:58:31

если же у нас только один тип доступны

00:58:34

тонкая то традиционная будет дизай бот

00:58:37

она будет не активна и мы будем

00:58:40

добавлять класс давайте мы это проверим

00:58:42

что этот классу есть я возьму вот это

00:58:46

вот класс прокинув традиционно напишу

00:58:48

disabled

00:58:51

не работает давайте мы зайдем стиле

00:58:56

пицца блок пицца блок потом зайдем you

00:59:02

all ли тут есть актив но больше ничего

00:59:13

нету то есть я что не писал стиле для

00:59:17

того чтобы дизейбл делать по моему я

00:59:21

написал да то есть я написал селектор

00:59:28

вот селектор ну то есть селектор имеется

00:59:31

ввиду вот этот вот эти вот печь тему

00:59:34

элементы и есть актив вот активно но

00:59:39

дизейбл к нету я вижу что стиле я не

00:59:44

добавил по ходу

00:59:45

для того чтобы был дизейбл давайте мы

00:59:49

это исправим кстати проверим вообще

00:59:53

верстку ну имеется виду дизайн по моему

00:59:58

я тут делал а вот то есть у нас будут

01:00:02

они дизейбл и мы сейчас будем это делать

01:00:04

с помощью стилей

01:00:07

то есть мы возьмем теперь в пицца блок и

01:00:10

css то есть в стиле

01:00:11

добавим новый класс designed он будет

01:00:15

давайте труд тут сразу напишу дизайн

01:00:18

болт он будет opacity 0.5

01:00:24

вот так видите вот мы сделаем там один

01:00:28

пример чтобы было вам видно вот видите

01:00:34

давайте чуть темнее вот так вот пусть

01:00:39

будет вот так вот далее далее нам теперь

01:00:42

нужно сделать следующее нам нужно

01:00:44

сделать так чтобы мы не могли кликать на

01:00:47

это действие мы можем сделать с помощью

01:00:49

java скрипта но по моему можно это

01:00:51

сделать с помощью этого css и то есть

01:00:55

что мы можем сделать смотрите есть

01:00:58

клик анонимная функция alert 123

01:01:06

он дизейбл видите но я сверну на него

01:01:10

кликнуть могу я мог бы взять тут

01:01:12

написать типа если там что-то ну

01:01:17

например если нету types

01:01:20

один то есть если тут нету в этом

01:01:23

массиве так с1 или там 0 то тогда мы вот

01:01:26

это вот вот это вот

01:01:29

анонимную функцию не передаем ну или же

01:01:32

передаем если они хочу делать так чтобы

01:01:36

у меня вызывалась вызвался вот этот

01:01:38

метод если я хочу сделать с помощью

01:01:40

jalas когда я могу до написать просто

01:01:42

типа передавайте там раненую функцию или

01:01:47

не придавать но на всякий случай я

01:01:48

сейчас возьму и с помощью css и объясню

01:01:51

что вот этот вот элемент

01:01:53

не может быть кликабельным я пишу

01:01:56

pointer events но он теперь уже с

01:02:00

помощью css и я объясню что вот этот вот

01:02:04

элемент он не может быть кликабельным

01:02:06

видите то есть я не могу произвести клик

01:02:10

если уберу это свойство

01:02:11

из все с с а и нажму видите теперь можно

01:02:16

производить клик то есть тут ну как бы

01:02:19

нету onclick тут можно произвести вам

01:02:21

клип я на всякий случай все сессии пишу

01:02:23

такое свойство

01:02:24

и объясняю что теперь вот это вот

01:02:26

элемент

01:02:28

он не может быть кликабельным ну и все в

01:02:31

итоге мы видим что дизайн болт не

01:02:35

кликабельны

01:02:36

теперь что мы делаем вот это вот я уберу

01:02:38

пока теперь мы делаем так я могу взять

01:02:43

для 30 sm сделать дизайн

01:02:47

вот мы видим теперь что у 30 с.н. теперь

01:02:51

стоит дизейбл и теперь мы будем делать

01:02:54

следующим образом мы будем создавать

01:02:57

стоит стоит у нас будет для вот этого и

01:03:00

вот этого 20 то я пишу что есть

01:03:05

us state 1 будет называться

01:03:11

active time актив так я знаю что нам

01:03:16

придется ли factory немного эту часть

01:03:19

когда мой ридак подключим но давайте

01:03:22

пока сделаем так потом мы сами месте

01:03:24

поймем что нам лучше надо было

01:03:26

переделать

01:03:27

так когда мы подключили редокс я беру

01:03:31

тот пишу актив type the делают так и как

01:03:36

мне теперь понять какой из этих

01:03:39

ли у меня активным я мог бы взять и

01:03:44

сделать вот так смотрите не все актив

01:03:49

type-0 то тогда актив или же строчка ну

01:04:00

тут кстати react поправить и тут сделать

01:04:05

ноги ну и мы видим его тонкое теперь

01:04:09

нажимаю сюда и мы видим что тут дизейбл

01:04:13

давайте дизайн будут тут кстати тоже по

01:04:16

правилам и берем дизейбл

01:04:17

тут делаем вот так один сохраняем вот то

01:04:22

есть они не кликабельны но теперь они по

01:04:24

определенному параметру могут ставить

01:04:26

актив или же не active то есть мы видим

01:04:28

что тут нету этих тут есть потому что

01:04:31

актив type у нас один потому что тут

01:04:34

написал его но что если так не хочу

01:04:38

делать давайте мы сделаем так что у нас

01:04:41

вот эта часть будет рендериться с

01:04:43

помощью массива мы возьмем тут напишем

01:04:45

const types

01:04:48

и укажем что есть вот такого значения в

01:04:52

этом массиве и есть вот такой вот далее

01:04:59

мы возьмем тут напишу что есть массив

01:05:04

который называется types с помощью мы по

01:05:08

мы пробегаемся по этому массива и каждый

01:05:11

тип мы прокидываем в ли

01:05:19

вот так я убираю часть смотрим работает

01:05:24

все точно так же вот есть я щас

01:05:27

добавлю тут вот так вот видите тут уже

01:05:31

ну с помощью массива мы указываем

01:05:33

сколько у нас должно быть типов ну на

01:05:36

стих 2 я оставляю как есть как теперь понять

01:05:40

что какой-то из этих типов выбран я пишу

01:05:44

что вот этот вот ли у него класс на и

01:05:50

есть и тут я пишу

01:05:52

если актив type равен индексу помните

01:05:58

как мы делали в категорию индексу

01:06:00

то тогда акте

01:06:06

иначе пустая строчка вот теперь я пишу

01:06:11

тут следующее я пишу

01:06:13

он клик объясняю что при нажатии на

01:06:16

одной из этих нужно вставить активный

01:06:19

type я пишу onclick потом анонимная

01:06:23

функция

01:06:24

давайте не делать анонимную функцию

01:06:26

давайте тут создадим функцию

01:06:28

опишем const сет как у нас там была с

01:06:33

что у нас там была он сел и python

01:06:36

давайте напишем он select type

01:06:40

то есть возьмем вот этот чел kontrol ц ч

01:06:48

контрл с и контур

01:06:52

в он работает сет type он select type

01:06:58

далее мы пишем что он selected вызывает

01:07:01

active time

01:07:03

потом мы сохраняем и вот эту часть

01:07:07

прокидываем сюда и так подумал а нет это

01:07:14

нам нужно будет когда мы будем тут

01:07:16

редакция использовать нам в любом случае

01:07:17

придется такой метод создавать давайте

01:07:19

мы таки мы пишем я тут создал все равно

01:07:22

анонимную функцию и в нее прокинул

01:07:24

индекс сохраняю то есть теперь у нас

01:07:28

каждый получает

01:07:30

он select type и в него прокидывает его

01:07:33

индекс и этот индекс прикидываться сет

01:07:36

актив ну и ставится активно статус

01:07:38

кликаю кликаю то есть теперь а вот там

01:07:41

видите могу выбирать тип мои пиццы

01:07:44

которая хочу хорошо вроде бы все

01:07:48

нормально что если у нас тут должен быть

01:07:50

зайдут что если видите вот тут в этом

01:07:56

массиве у нас есть 0 и 1 ну вот и не радуется

01:07:59

что если вы во втором массиве

01:08:01

который называется сырной 90 вот хотя

01:08:06

вот эта часть была вот эту сырная у него

01:08:10

type of один только но это имеется 000 и

01:08:16

надо сделать так что если в массиве одно

01:08:19

из этих значений один или ноль то есть

01:08:22

может оказаться так что в массиве это

01:08:24

может быть там один и тогда нужно

01:08:28

сделать так что тонкое она не будет

01:08:32

активным будет активным только

01:08:34

традиционное и

01:08:36

дизейбл будет у тонкого то есть мы

01:08:39

теперь будем определять есть ли в

01:08:42

массиве yandex вот этого ли

01:08:45

если его ли вот это вот вот это вот

01:08:48

яндекс он есть в массиве если он есть то

01:08:52

мы не ставим дизейбл если живу нету то

01:08:55

мы ставим дизайн

01:08:56

то есть если же в массиве оказалось так

01:08:59

что в но вот например тонкая тоже 0

01:09:02

индекс а это один в массиве 012

01:09:06

и если окажется так что в этом массиве

01:09:08

нету один видите тут нету один сырная

01:09:12

нету один это значит что традиционное

01:09:15

должен быть disabled

01:09:17

и мы должны это написать что если же в

01:09:21

яндексе в массиве нету

01:09:23

традиционная то ставим дизайну что я

01:09:25

делаю давайте напишем не types потому

01:09:29

что нам теперь нужно отсюда вытащит

01:09:31

types если мы напишем types и types

01:09:34

но это будет конфликт имен перемен

01:09:36

давайте назовем type нильс вот так type

01:09:40

names

01:09:41

и тут вот сделаем вот так сохраним вот

01:09:45

все нормально все точно так же просто мы

01:09:47

переименовали переменную теперь я делаю

01:09:51

следующее я беру types смотрите

01:09:55

консоль лог беру так и смотрим и кстати

01:10:03

вот это надо поправить тоже переходим мы

01:10:06

сюда видите у нас ругается что ты в ли

01:10:10

пицца блок в ли пытаешься не уникальны и

01:10:14

мили сделать я пишу что есть и

01:10:17

и у него ключ type все теперь всё

01:10:22

нормально смотрим теперь у нас есть

01:10:25

такая история тут у нас 01 а почему

01:10:31

пишет наверное а я понял два раза пишет

01:10:37

потому что у нас strict мод включи

01:10:39

давайте мы его нахрен отключим он нам

01:10:41

пока не нужен то есть но когда мы будем

01:10:43

но нужен на самом деле он нужен и сейчас

01:10:47

играет он нужен он помогает отловить все

01:10:49

ошибки которые в принципе без strict

01:10:51

моды могут не отравится

01:10:52

давайте мы его пока на данный момент

01:10:55

откручиваем вот так вот теперь видите не

01:11:00

происходит войной

01:11:01

рендер из-за strict мода ваши компоненты

01:11:05

будет рендериться два раза понимаете не

01:11:08

один раз а два раза потому что

01:11:10

strict моду нужно проверить типа я не

01:11:14

помню мечтал я читал документацию на

01:11:16

этот момент не очень хорошо запомнил

01:11:19

суть в чем strict моду это нужно для того чтобы

01:11:22

точно убедиться в том что произошли

01:11:24

изменения там какие-то и потом

01:11:25

произвести там сверху на ошибки льна

01:11:27

прочее

01:11:28

из-за этого он делает 2 рэнд итак у нас

01:11:32

теперь не происходит двора рендера не мы

01:11:34

видим что в чизбургер давайте чтобы нам

01:11:38

было понятно мы сделаем так ну вот и тут

01:11:43

не сделал того чтобы мы понимали что к

01:11:46

чему относится мы видим теперь что

01:11:50

пеперони пеперони содержит вот такой вот

01:11:54

массив сырная содержит вот такой вот

01:11:58

масел цыпленок барбекю содержит что

01:12:01

такое массив видите вот то есть 0

01:12:04

тут вот 2 указанного элемента тут один

01:12:07

элемент 1 и так далее теперь мы должны

01:12:09

понять есть ли в массиве

01:12:12

тот индекс который содержится в этом ли

01:12:17

это вот можно убрать что мы теперь

01:12:20

делаем мы теперь поправляем вот эту

01:12:23

часть будем использовать библиотеку

01:12:25

классным пишем тут импорт

01:12:30

класс names упростим себе написание

01:12:33

классу классный мтс переходим вот сюда

01:12:38

вот пишу тут класс mins то есть если у

01:12:42

вас есть какая-то библиотека и у нее

01:12:44

имена видите тут классный все указано

01:12:47

но я советую вам называть камил кейси ну

01:12:53

то есть название имен если она содержит

01:12:56

два разных слова

01:12:58

писать с большой буквы то есть первое

01:13:00

слово с маленькой второй самый большой

01:13:02

третье слово с большой и так далее мы

01:13:05

берем эту функцию прокидывать сюда тут

01:13:09

пишут что есть у нас какая история вот

01:13:14

это вот activate an active time будет

01:13:17

нам определять нужно ли какой-то класс

01:13:19

ставить или нет мы в гласным с первым

01:13:22

аргументом

01:13:23

прокидываем объект и объясняем что класс

01:13:27

актив будет только в том случае если

01:13:30

актив type равен его индексу

01:13:34

сохраняем работать будет все точно так

01:13:38

же ну точно также су работает но теперь

01:13:41

мы уже с помощью библиотеки классный мтс

01:13:43

сказали что у нас есть объект и в этом

01:13:47

объекте есть ключ этот ключ будет

01:13:50

классом который применится уже в этот

01:13:53

элемент

01:13:54

видите вот он он применится в том случае

01:13:57

если это условие совпадет если же не

01:14:00

совпадает где будет фолз тону нигде не

01:14:04

будет этого класса видите

01:14:07

таким образом тут мы объясняем какое

01:14:10

какое название класса вы прикручиваем а

01:14:13

тут мы объясняем по какому условию

01:14:15

прикручивать это или не прикручивать

01:14:18

теперь мы делаем дальше тут я добавляю

01:14:22

новые свойства и пишу

01:14:23

дизейбл и дизейбл будет следующим случае

01:14:29

если же vtx includes индекс то тогда

01:14:42

наоборот наоборот если же в types нету

01:14:46

вот это вот индекса то есть в types у

01:14:49

нас есть 01 там где-то 0 где-то 1 и мы

01:14:53

проверяем если в types массиве types

01:14:55

который вот хранится вот тут если в нем

01:14:59

нету нашего какого-то одного индекса или

01:15:03

этого или этого

01:15:04

то ставим класс дизай but проверяем есть

01:15:08

ли в этом массиве этот индекс

01:15:10

он говорит ну например нету тогда мы

01:15:13

говорим типа нокий если же нету ставь

01:15:17

тогда clos de займет сохраняем смотрим и

01:15:21

мы видим что ну вот есть тут все окей мы

01:15:25

видим от

01:15:26

в такси есть 0 и 1 все отлично смотрим

01:15:30

дальше types для сырная сына

01:15:35

тонкая есть традиционно видите

01:15:37

неактивную почему мне традиционно стала

01:15:40

активным потому что я тут указал по

01:15:43

умолчанию так делала так теперь у меня

01:15:47

везде тонкая традиционное тонко

01:15:49

традиционно вот видите где то не активно

01:15:51

где-то активно и смотрите какой момент

01:15:53

теперь у нас есть такой небольшой баг

01:15:56

тонкая у нас активно хотя на designed

01:15:59

нам это нужно поправить

01:16:01

нам теперь нужно понять какой из этих

01:16:07

индексов

01:16:08

есть и потом в итоге его индекс в бить

01:16:13

сюда

01:16:15

дайте мне подумайте как мы это сейчас

01:16:18

сделаем пробегаться по массиву давайте

01:16:21

вместе подумаем за 1 не подскажете

01:16:23

потому что честно скажу у меня сейчас

01:16:24

мозг ну немного не варит вместе подумаем

01:16:27

как теперь сделать так чтобы смотрите

01:16:30

какая ситуация у нас есть types of types

01:16:33

есть 0 и 1 нам нужно понять какой из

01:16:37

этих 0 или 1 присутствует и в итоге мы можем

01:16:44

сделать проще смотрите как мы просто

01:16:46

берем и актив types

01:16:47

пишем 0 все да да да спасибо просто

01:16:53

пишем types 0 ч туплю у нас же в любом случае

01:16:56

смотрите как у нас любом случае есть

01:16:58

массив фото есть в любом случае в

01:17:02

массиве есть первый элемент да мы просто

01:17:05

берём этот первый элемент и придаем сюда

01:17:07

но первый элемент является индексом или

01:17:11

ноль или один где-то в начале может быть

01:17:14

0

01:17:15

где-то в начале может быть один и мы

01:17:18

этот индекс по умолчанию прокидываем you

01:17:21

state сохраняем и вот теперь щеки

01:17:25

тут вот тонкая тонкая тонкая тут тонкая

01:17:30

уже не активно традиционная активно и в

01:17:33

итоге вот

01:17:34

работает все как должно работать

01:17:36

работать идеально

01:17:38

тут кстати смотрите нет а вот этих двух

01:17:41

блоков давайте мы пока таки оставим не

01:17:45

будет ничего делать хорошо теперь мы

01:17:48

смогли вот сделать вот такой вот видите

01:17:51

тут нельзя кликнуть тут ужину тут

01:17:53

логично что нельзя кликнуть можно

01:17:56

кликать тот нельзя кликать тут можно то

01:17:58

есть где то можно где-то нельзя потому

01:18:00

что где-то в какой-то пицца может размер

01:18:02

там или там тип пиццы может быть

01:18:04

недоступен но соответственно мы ставим

01:18:06

дизай but или там не дизай болт теперь

01:18:10

мы делаем следующие для размера везде

01:18:14

сейчас у нас размер 30 сантиметров

01:18:17

указан дизейбл это надо поправить

01:18:21

заходим сюда тут указываем side is sites

01:18:27

блин носить свойства сайт с дайте я

01:18:30

проверю как я писал у себя в старом коде

01:18:36

сайт components пицца блок перекинем

01:18:41

сюда а вот у меня вот этот прикинем сюда

01:18:45

выебал says вот про кинем это surround

01:18:50

доступные размеры по моему меня тут было

01:18:52

его baltics даже

01:18:54

давайте так и напишем его и болт а в

01:18:59

обле тут с вот так и вот тут просто

01:19:04

поправим в очередной раз поправим

01:19:06

название переменной но это просто делаете того чтобы мне

01:19:08

было понятно что ну точнее как

01:19:11

программисту и типы доступны

01:19:14

вообще в принципе тут делаем выебал says

01:19:19

и вот точно как и тут мы

01:19:23

рендерим типы ниже мы будем сейчас

01:19:27

рендерить размер пиццу то пишем и выебал

01:19:32

avi

01:19:33

ого иловли available и сайт и место type

01:19:37

пишем says далее says передаем сюда

01:19:43

потом

01:19:44

прокидываем индекс он select type только

01:19:48

пишем тут уже напишем он select says

01:19:52

создаем вот так вот он select сайт тут

01:19:57

мы создаем новый стоит тут напишем

01:20:03

сайлас тоже будем брать первое доступное

01:20:07

значение и напишу

01:20:09

active

01:20:10

сайт и тут сет актив says потом вот этот

01:20:16

вот метод прокинь ему же сюда и вот этот

01:20:20

вот метод перед один вариант сохраняя

01:20:24

вроде бы тут актив type тут нужно актив

01:20:28

т память на эти в сайт а потом тут

01:20:31

написать тут написать мы должны

01:20:36

следующее мы должны написать сайтис но у

01:20:41

нас по моему нету тут свойства side as

01:20:43

тут мы должны из проб сам вытащить сайт

01:20:46

то есть мы теперь будем в объекте сайзер

01:20:50

но в объекте свойств сайтов искать

01:20:53

доступные эти доступные размеры

01:20:58

вроде бы все и единственное вот это вот

01:21:02

нужно написать тут то есть мы не будем

01:21:05

рендерится тип мы будем радовать размер

01:21:08

сохраняя и у нас везде дизай болт это

01:21:13

очень интересно почему нас не забудут

01:21:16

везде давайте проверим сайт с 2640 а я чекаю

01:21:25

то есть я в массиве в этом массиве сайт

01:21:28

чекаю не размер а

01:21:31

индексы то есть яндекс ну там будет 0

01:21:34

чокаться один нам нужно человек хоть

01:21:36

sol's то есть мы будем проверять если в

01:21:40

массиве каждый каждый размер который

01:21:44

будет рендериться

01:21:45

вот от сюда вот то есть мы уже заранее

01:21:48

тут я почему я тут написал так я это

01:21:51

написал для того чтобы я уже заранее в

01:21:54

все те размеры которые доступны в

01:21:57

принципе а потом я буду рендерить их вот

01:22:01

эти вот все размеры в любом случае кр

01:22:03

эндрю в любом чтобы пользователь знал

01:22:06

какие размеры могут быть но тут я уже

01:22:10

определяю доступен ли это 3 размер для

01:22:13

выбора или же недоступен и тут я

01:22:16

определяю в объекте которые получу из

01:22:19

массива

01:22:20

вот это вот ой thomson

01:22:24

доступный размер есть ли среди тех

01:22:28

размеров которые указаны вот тут вот

01:22:31

если же нет то to disable

01:22:33

сохраняя смотрим 26

01:22:38

вот видите нельзя отрицать убирать 40

01:22:40

можно ну и вот работает выбора зло хочу

01:22:46

сказать что твой канал настоящая находка

01:22:49

можно сказать даже сокровищницы тебя

01:22:52

очень интересно слушать спасибо да не за

01:22:56

донат и спасибо за отзыв

01:22:58

мне приятно как и в принципе наверное

01:23:01

тебе может быть приятно смотреть то что

01:23:05

и могу рассказывать и так что мы делаем

01:23:09

теперь мы теперь берем где

01:23:12

а тут мы пишем так и цен смотрите видите

01:23:17

вот тут у нас указан размер все верно но

01:23:21

верстки у нас стоит еще с.м. как теперь

01:23:25

взять к этому значению says добавить

01:23:29

текст мы просто берем пишу casale привет мы

01:23:34

просто пишем says и потом пишем пробел

01:23:38

с.м. все больше чем мы делаем смотрим

01:23:43

давайте этого там уберу смотрим 26 сен я

01:23:47

могу написать тут типа

01:23:49

размер то большего буквы прямо крикнуть

01:23:52

вот размер размер размер могу сделать

01:23:56

так ну так как у меня по верстке все но

01:23:59

тут очень по дизайну я пишу тут 26

01:24:01

видеть вот я получаю значение которое

01:24:04

мне рану ну не то что рандомно берется из массива

01:24:07

и к этому значению добавляю

01:24:09

с.м. ну просто текст сны вот видеть

01:24:14

нельзя кликнуть тут можно кликнуть то

01:24:16

есть таким образом я уже получил те

01:24:18

данные которые мне в принципе нужны итак

01:24:22

давайте зайду в telegram к себе проверю

01:24:25

потому что мне лень заходить в к теперь

01:24:31

заходим varchar кого в блог и смотрим

01:24:35

тут тут у нас что получение pets

01:24:39

асинхронный я сделал мы разобрались с

01:24:41

тем как асинхронно получать пиццы в

01:24:43

следующем уроке мы будем подключать

01:24:45

джейсон сервер будем делать так что у

01:24:48

нас будет теперь фэйковый сервак и плюс

01:24:52

к этому мы ещё будем подключать редокс

01:24:55

то есть теперь будет ну в следующем

01:24:57

уроке будет прям кайф болеть потом я не

01:25:02

это не объяснил сделали создание

01:25:05

компонента пиццы вот у нас кстати вот

01:25:09

это нужно можно поправить

01:25:11

давайте пока оставим как есть пока не

01:25:14

будет трогать потому что тут riddex

01:25:15

нужно подключать потом сделаем

01:25:18

отображение pets & jason которая будет

01:25:20

подгружаться сделали то есть мы вот ведь

01:25:25

вольт подгружается у нас из бэг-энда

01:25:27

нафикова ну типа просто открывается файл

01:25:31

просто примитивно открывает файлы там

01:25:34

что-то происходит и принципе все

01:25:37

единственное что осталось сделать это

01:25:38

вот это вот разобраться с тем что такое

01:25:41

protex

01:25:42

честно говоря мне сложно последнее время

01:25:46

дается писать реактор ски компоненты или

01:25:51

реактор ские приложения без typescript

01:25:53

что такое typescript и секвестрация это

01:25:58

java script на максималках скажем так то

01:26:03

есть если же у нас окажутся так что мы

01:26:07

каким-то образом в этот компонент

01:26:11

протянем ним не строчку объект то тут

01:26:17

напишется объект ну и соответственно там

01:26:20

что-то обжиг то есть если я возьму

01:26:23

сюда напишу типа

01:26:28

ну например будет хеллоу

01:26:33

один сохраняю то у меня даже

01:26:37

ошибка будет мы видим что у нас даже

01:26:39

ошибка если этот напишу например я не

01:26:44

знаю рвать антифа хотя антифа и но не

01:26:46

отобразится

01:26:47

он не отобразится то есть если я напишу

01:26:50

то что я в принципе не ожидал у меня

01:26:52

будет ну или ошибка или что то еще

01:26:55

благодаря именно typescript у который к

01:26:57

сожалению мы не будем использовать в

01:26:59

этом уроке такой проблем у вас не

01:27:01

возникло бы вы бы на этом уровне пицца

01:27:04

блок например ли где-то еще написали бы

01:27:07

какие свойства могут быть строчками

01:27:12

числами и так далее и когда вы в этот

01:27:16

компонент опрокидывали бы не то что

01:27:18

ожидается typescript булан сказал ты

01:27:20

дурак ты пытаешься мне прокинуть то что

01:27:23

не хочу остановить чувак ты мне какой то

01:27:25

хрень прикидывались давай-ка ты

01:27:27

протянешь нормальную вещь и мы говорите

01:27:30

по что прокинуть что типа потом мы

01:27:32

смотрим что у нас за ними и он пишет

01:27:35

знаем эту я строчка понимаешь это у тебя

01:27:38

нет а мне объекты танин define эту те

01:27:40

строчки такой в чем прикол ты такой

01:27:45

изменить typescript заходишь опять свой

01:27:47

код меняешь и делаешь так чтобы в нем

01:27:51

передавалась действительно строчка этими

01:27:53

прекрасен typescript то есть мы можем

01:27:55

описать конкретно какие свойства какие

01:27:58

переменные могут быть там конкретно

01:28:00

только строчками числами массивами и

01:28:03

потом если мы попытаемся прикинуть не то

01:28:06

что мы хотим нас typescript поругает и

01:28:09

не даст нам нормально запустить

01:28:11

приложение этим и превосходим из-за

01:28:14

этого я советую начинающим разработчикам

01:28:18

пробовать писать на typescript это

01:28:21

сложно будет я вам обещаю это будет

01:28:23

сложно потому что я сам typescript начал

01:28:27

пробовать

01:28:28

внедряйте где то год назад то есть я

01:28:31

знаю что такое строго типизация где-то

01:28:33

s2000

01:28:35

по-моему 14 12 где-то 2013 года

01:28:39

где-то с этого года я за штуку строгой

01:28:41

типизации потому что я да веб-разработки

01:28:44

работал с дэльфи работал с шарфом работу

01:28:47

c + +

01:28:48

ну и знаю что в принципе понимание есть

01:28:51

зачем нужна строгой типизации с java

01:28:54

script он строгой типизацией я

01:28:56

столкнулся где то год назад не было

01:28:58

сложно скажу часа но со временем я потом

01:29:02

привык анонимная функция это плохо часто

01:29:07

встречал такое утверждение статьях

01:29:09

рекомендациях я скоро отвечу на твой

01:29:11

вопрос обязательно отвечу и так что у

01:29:15

нас дальше привет эбро здорового hydra

01:29:18

что мы делаем дальше дальше мы теперь

01:29:21

берем объясняем нашему компоненту

01:29:25

свойства которые есть у тебя в пробках

01:29:28

какого типа они могут быть то есть

01:29:32

теперь у нас компонент будет

01:29:33

а проверять и сливным про кинули там не

01:29:37

строчку

01:29:38

то в консоли нас об этом поругают скажут

01:29:41

ну типа у тебя на и мне строчку и зачем

01:29:44

это в принципе может пригодиться

01:29:46

это может пригодится в том случае когда

01:29:49

вы случайно каким-то образом как и

01:29:52

сказал про кинули не то что ожидалось до

01:29:56

вам потом придется долго дыба жить вам

01:29:59

придется искать это проверять почему а

01:30:01

как из-за чего и вы с помощью

01:30:06

дополнительной библиотеки которые есть у

01:30:08

реактор проб types можете указать

01:30:11

конкретно типы которые могут быть

01:30:14

использованы

01:30:15

а потом уже в консоли вы сможете чекнуть

01:30:19

интересно какие ошибки у меня в консоли

01:30:21

ты захочешь консоли видишь типа там name

01:30:25

это у тебя написан объект и ты такой

01:30:28

типа почему на ему не объект он же

01:30:30

строчка должен быть про обстоят с тебе

01:30:33

об этом скажете по вот смотри ты пытался

01:30:35

пихнуть объект хотя я ожидал строчку и

01:30:39

такой а блин вот чем проблема ты взял

01:30:41

быстро исправил

01:30:42

пицца блоки там тип и настроил как тебе

01:30:46

нужно или передал то что

01:30:48

нужно то есть это тебе в какой-то

01:30:50

степени поможет дыба жить в приложении

01:30:53

именно protex

01:30:54

и будет тебе в момент написание твоего

01:30:57

компонента указывать тип ну немножко

01:30:59

поможет подсказки будет давать что name

01:31:02

это только строчка запомните скажут это

01:31:05

нельзя туда больше ничего прокидывать и

01:31:06

так что я делаю покажи плиз корзина к

01:31:11

сожалению корзину нас недоступны вот но

01:31:13

типа ничего не нет и мы же не не

01:31:16

разработали что я делаю я теперь иду

01:31:19

сюда и пришел по моему проб tips

01:31:24

если меня не подводит память если меня

01:31:29

не подводит память

01:31:30

она устанавливается месте с реактором

01:31:32

давайте проверим впк джейсон проверю

01:31:36

какие библиотеки у меня установлены проб

01:31:39

да это нужно устанавливать отдельно я

01:31:43

пошел что я хочу установить библиотеку ярно и

01:31:46

кстати я

01:31:48

access установил сейчас мы давайте

01:31:50

установим access а потом сделаем пробный

01:31:54

рез я пошел от xs

01:31:57

и теперь будем место фича использовать

01:32:00

access весь сайт на leagues

01:32:05

да вот мы установили access теперь вот я

01:32:10

хожу сюда вот это вот убираю теперь

01:32:13

смотрите вот эту вот часть я сделаю

01:32:16

более короткой с помощью отдельной

01:32:18

библиотеки я мог бы ее в принципе не

01:32:22

использовать потому что ну в данном

01:32:26

случае exec особо может не пригодится

01:32:29

потому что тут довольно таки просто

01:32:31

справляются fitch это нужно признать

01:32:33

но все же я вам объясню axis чтобы вы в

01:32:38

дальнейшем знали что есть к библиотека

01:32:40

которая позволяет делать то же самое что

01:32:42

фрич но более удобным способом я иду

01:32:46

выше

01:32:47

шел и брат access access используют для

01:32:51

более крупных проектов или где вот кроме

01:32:54

get запроса нужно отправлять еще более

01:32:56

сложные запросы и access позволяет это

01:32:59

делать более удобным способом

01:33:01

итак я вот герой access и тут поправляю

01:33:05

мистер fitch я сначала пшел xs

01:33:09

потом скажу не нужно какой метод вызвать

01:33:12

мне нужно вызвать метод get получить и в

01:33:16

get я передаю вот это вот строчку потом

01:33:20

я объясняю что мне нужно сделать дальше

01:33:22

мне нужно дальше вытащить ответ но я уже

01:33:26

не буду делать в исполнить джейсон и не

01:33:29

будут сначала вот это вот виду пол

01:33:31

строим конвертировать джейсон потом

01:33:34

джейсон вытаскивать и так далее я буду

01:33:36

делать проще смотрите как с помощью xs

01:33:40

я пишу сразу д.н. потом говорю что ветер

01:33:44

испанцы далее пишу что мне возвращает

01:33:50

access проверим что мне возвращает

01:33:53

access и давайте тут тоже проверим эти

01:33:56

как вот так вот так пусть он вот этот

01:34:02

вот в браке нет вот этого джейсон но

01:34:05

выше мы напишем

01:34:06

консоль лак то есть мы проверим что нам

01:34:10

возвращает печь печь и что нам

01:34:16

возвращает access 2 response а вот

01:34:23

response фича называется распалась

01:34:26

access он называется копчика и мы видим

01:34:30

что они отличаются смотрите response

01:34:34

that body

01:34:35

а тут сразу же уже готовый джейсон

01:34:38

видите вот готовы джейсон заходим body

01:34:43

body on астроиды построен потом его

01:34:45

нужно конвертировать джейсон и только

01:34:47

потом уже можно использовать тут с

01:34:49

помощью xs

01:34:50

он сразу же конвертируется джейсон то

01:34:53

есть джейс access за вас ваша может

01:34:55

понять во что примерно нужно

01:34:57

конвертировать благодаря именно вот

01:34:59

этому действию content type тут у xs

01:35:03

есть там свои конфигурации которых нету

01:35:06

например там of reach ну и в короче axis

01:35:09

можно настраивать еще дополнительно там

01:35:11

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

01:35:13

что мы делаем тут смотрите видите access

01:35:17

нам возвращает объект со свойством data

01:35:20

is a response из вот этого всего объекта

01:35:23

мы будем теперь с помощью где

01:35:25

структуризации вытаскивать дата вот дата

01:35:31

проверим что теперь у нас в дата в data

01:35:36

access

01:35:37

нам возвращает теперь наш джейсон то

01:35:40

есть он возвращает вот это вот вот этого

01:35:44

часть

01:35:45

и то есть теперь вот эту мы убираем

01:35:47

сначала скопируем эту часть вот эту

01:35:50

часть мы уберем она нам уже не нужно

01:35:52

теперь мы тут пишем что мы хотим взять

01:35:56

дата прокинуть сюда и сохранить работать

01:36:02

все будет точно также но теперь это

01:36:05

работает благодаря именно xs конечно же

01:36:08

применение в этом приложении не является

01:36:12

таким логичным потому что это

01:36:16

единственное место где мы в принципе

01:36:17

можем использовать axis

01:36:20

ну еще единственный где это в сортировке

01:36:22

и еще вот тут и все ну и может быть там

01:36:26

при удалении где то еще но в принципе

01:36:29

больше нигде access мне мы не будем

01:36:31

добавлять

01:36:32

пицце мы будем просто их там открывать

01:36:36

или же riddex или же удалять и если же у нас был бы

01:36:40

более сложный проект

01:36:41

например там ну условно говоря чат

01:36:45

который мы делали там ранее то там было

01:36:47

бы логично использовать axis тут я

01:36:49

объяснила xs для того чтобы вы знали что

01:36:52

есть такая библиотека и потом в ее могли

01:36:54

использовать то есть то должно исходить

01:36:58

из ходить еще из ситуации когда

01:37:00

использовать fitch когда использовать

01:37:03

access и так что мы делаем теперь тут я

01:37:07

оставляю все как есть просто смотрите

01:37:09

вот какая разница тут более но большая

01:37:12

форма тут более короткой формат в

01:37:15

принципе больше ничего нет

01:37:17

сохранил тут вот напишем так и вот

01:37:21

оставляем вот так хорошо теперь давайте

01:37:25

разберемся с пробки псами

01:37:27

то есть нашим вот эти вот компонентом

01:37:30

нам нужно добавить новую библиотеку

01:37:32

который называется проб types

01:37:36

эта библиотека отряд джаз ранее она была

01:37:41

встроена сам rick james и можно было

01:37:44

туда написать protex

01:37:46

потом для того чтобы уменьшить размер

01:37:48

самой библиотеки было решено

01:37:50

разработчиками facebook а что про птиц

01:37:54

будет отдельной библиотекой и теперь нам

01:37:57

нужно взять написать что есть библиотека

01:37:59

проб таец называться она будет с большой

01:38:03

буквы потому что все названия библиотек

01:38:07

точнее который мы будем использовать они

01:38:10

будут называться за большой буквы в

01:38:12

данном случае это просто функции функции

01:38:14

обычно пишут с маленькой буквы

01:38:17

я беру вот эту вот библиотеку и и буду

01:38:20

использовать войти вообще проверим я

01:38:22

кстати никогда не проверял что в пробках

01:38:24

сохранится давайте проверим месть

01:38:28

передается объект и мы видим что этот

01:38:32

объект нам передаёт там всякие функции

01:38:34

видеть вот там например фанк ноут на мы

01:38:40

строим и так далее эти функции мы будем

01:38:44

использовать благодаря именно этим

01:38:47

функциям наши вот эти вот свойства будут

01:38:51

проверяться являются ли они тем чем мы

01:38:54

ожидаем или не являются и так что мы

01:38:56

делаем теперь я вот убираю эту часть

01:39:00

перехожу ниже самый низ сам вниз где вот

01:39:04

экспорт дефолт

01:39:06

и тут я говорю что теперь я хочу указать

01:39:09

типы то есть типы которые есть у моего

01:39:14

компонентом что значит типы как я уже

01:39:17

объяснял ранее теперь я указываю что он

01:39:20

не может быть только строчка давайте мы

01:39:24

начнем с этого я пишу что у меня есть

01:39:27

компонент кто называется пицца блок у

01:39:30

него есть свойство

01:39:32

проб tights и это свойство моего

01:39:38

компонентов функционального компонента

01:39:40

получает объект в этом объекте буду

01:39:45

писать теперь типы то есть я буду писать

01:39:47

ним чем может являться условно говорят

01:39:51

там прайс чем может являться только

01:39:53

числом ним может являться только

01:39:55

строчкой the types может являться только

01:39:59

массивом и так далее теперь я пишу что

01:40:03

свойство name

01:40:04

который берется вот отсюда вот является

01:40:09

только строчкой и для этого я объясняю

01:40:12

что есть библиотека про птиц

01:40:17

по-моему тут с маленькой буквы нужно

01:40:19

писать эссе не ошибаюсь есть библиотека

01:40:22

проб types

01:40:23

и эта библиотека должна нам сказать что

01:40:28

она объясняет что вот это вот свойство

01:40:33

name

01:40:34

является строчкой я пишу что protex

01:40:37

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

01:40:41

является строчного функций мы помнить

01:40:44

что в про птиц каждое свойство которое в

01:40:46

нем хранится

01:40:47

является функцией то есть есть я теперь

01:40:50

напишу console.log

01:40:51

еще раз и проверить что у нас тут зайдем

01:40:54

ниже мы видим что вот этот вот strong

01:40:57

вот он то есть вот из этой библиотеки

01:41:01

который вот криницы тут вот string он

01:41:04

является функцией он про кинется ванной

01:41:07

и тут вот тут вот он не будет уже

01:41:12

функции вот этот вот name так и

01:41:14

останется с прачкой

01:41:16

кнута что мы хотим то есть то что мы

01:41:18

передали тут тем этой останется но уже в

01:41:22

пробке пс у нас будет указываться что

01:41:26

если мы получили свойство name

01:41:28

ну точнее пропись в пробках получили ны

01:41:31

мы проверяем когда нам передали вот это

01:41:34

вот не являлся ли он строчкой или же не

01:41:37

являлся сохраняю и проверяю в консоли

01:41:42

давайте уберём это нам уже не нужна мы

01:41:46

видим ошибок никаких нету вот видите но

01:41:49

это не обращайте это уже мое плагин

01:41:52

ругаются теперь я иду и пошел не не

01:41:59

строчка то есть вот и пишут или

01:42:01

nord est видите теперь у меня все тест я

01:42:06

сказал сначала вот возьмись все свойства

01:42:08

из объектом их не их а потом сказал я

01:42:11

хочу заменить вот это вот не но все

01:42:14

остальное я оставляю как есть теперь у

01:42:17

меня вот никаких проблем нету тест тест

01:42:20

тест тест

01:42:21

но что если тут напишу андо файл

01:42:27

сохранен я ни хрена не получаю никакого

01:42:32

предупреждения давайте проверим почему у

01:42:35

меня есть подозрение что и тут по моему

01:42:37

по моему тут по моему с маленькой буквы

01:42:40

нужно писать проб types с маленькой

01:42:43

буквы давайте проверим что я прав как

01:42:45

джеймс

01:42:46

или я знаете как нагрузила даже проще

01:42:49

я могу просто взять зайти вот сюда вот и

01:42:54

проверить

01:42:55

ниже рот ипс

01:42:59

вот у меня указан тут так

01:43:05

a-ha я понял я понял что ничего не понял

01:43:14

наверное знаете в чем дело react видимо

01:43:18

путается

01:43:19

react видимо путайте понимает что в это

01:43:22

на этом месте я получил действительно

01:43:23

ведь ты получил не которая является

01:43:26

строчкой а потом я заменил его на яндекс

01:43:29

да какого хрена у него не проверяя

01:43:31

давайте мы сделаем наоборот мы возьмем

01:43:37

тут давайте сделаем так я вот тут

01:43:42

оставлю как есть то есть оставим как

01:43:44

есть но зайду теперь в паблик и петроний

01:43:49

заменю на 123

01:43:51

числом в.в. видимо я был прав то есть

01:43:55

получается на этом уровне то есть когда

01:43:58

он пихает все эти свойства он проверяет

01:44:02

на этом уровне типа name что ну окей

01:44:04

name эта строчка а потом тут и указанным

01:44:07

он define ему плевать

01:44:09

то есть вот если напишу тут например

01:44:11

тест я не знаю как то работать скажу

01:44:18

честно то есть я тут написал он' дефайны

01:44:21

он типа решил не работать но видите

01:44:28

начинал

01:44:31

ну напишу там я не знаю массив теперь он

01:44:39

ругается теперь он ругается говорит типа видимо я

01:44:43

понял видимо я понял видимо я понял то

01:44:46

есть давайте вернем знаете как видимой я

01:44:49

понял зайдем его тебя ut где-то тут нот

01:44:56

на лабу

01:44:59

то есть те extent of a

01:45:03

плохая полем вероятнее всего он

01:45:07

проверяет типа если идти на или он

01:45:10

define the never но видимо короче он

01:45:13

разрешает вбивать сюда стинг что если я

01:45:17

теперь укажу что обязательно должна быть

01:45:21

строчка и вот тут напишу но вот вот

01:45:29

теперь все работает в чем прикол я

01:45:31

теперь понял прикол в том что есть я не

01:45:36

укажу тот язык валяет смотрите вот то

01:45:40

что сейчас объясняю это не обязательно

01:45:42

но желательно то есть это желательно

01:45:46

знать в от этого часть пробки псами не

01:45:50

является обязательным то есть вы можете

01:45:51

не писать компоненты я вам скажу больше

01:45:54

я работаю в довольно таки крупной

01:45:57

компании и в некоторых компонентах не

01:46:00

используется проб tips

01:46:01

ну типа просто не используется я вот или

01:46:04

заметил где-то используется

01:46:06

но там кстати этот скрипт но даже

01:46:08

учитывая это и так что почему у меня не

01:46:14

выводил предупреждение видеть него но

01:46:17

если вставлю сейчас так то выводит дело

01:46:20

в том что если они укажу из прикроют это

01:46:24

значит что ну и типа блин ладно окей

01:46:27

нормально ну типа

01:46:29

онлайн поэтому главным придумал наук но

01:46:32

если передаешь там массив или что-то там

01:46:35

другое мы тогда не прокатит то есть он говорит

01:46:38

если у тебя name on the fine

01:46:41

ирина ну типа up north

01:46:44

то есть ты можешь то делать а теперь

01:46:47

объясняю что у меня обязательно string

01:46:51

должен быть то есть я объясняю что у

01:46:55

меня не обязательно должен быть строчкой

01:46:58

сохраняю и вижу что теперь мне пишет

01:47:02

свойство name is marked as required in

01:47:08

пицца блок but its валу и

01:47:11

и стал он говорит что ты пытаешься fun и

01:47:16

передать нам

01:47:18

но я ожидаю тебя поучить чё получить с

01:47:26

рукой рот бат и целью из но окей ну я

01:47:32

пишу тут например массив а вот промо

01:47:38

невидима видима и финал передаю он

01:47:40

понимаю он думает что типа ничего не

01:47:42

передал теперь он говорит типа

01:47:45

инвалид проб нами of the пиара и способ

01:47:48

ли эта пицца блок expected string он

01:47:52

говорит что ты пытаешься передавать

01:47:55

массивов непередаваем не пожалуйста

01:47:58

массив передавай не пожалуйста строчку я

01:48:01

говорю о кей но как ты это узнал и

01:48:06

реактор ский компонент говорит я узнал

01:48:08

благодаря именно вот этому действию я

01:48:10

проверил является ли ним строчкой и

01:48:14

обязательно ним должен содержаться в

01:48:17

компоненте пицца блок обязательно должен

01:48:21

быть строчкой и обязательно содержаться

01:48:23

в итоге он говорит типа ну ты мне

01:48:26

передал не то что я хотел если я передам

01:48:29

сюда теперь тест

01:48:32

сохранен и проверю то никаких ошибок нет

01:48:36

тут теперь уже никаких инвалидов не

01:48:38

бывает потом я беру и тут пишу все

01:48:43

остальные свойства я пишу дальше

01:48:46

смотрите как смотрите как дальше будет

01:48:50

интересный момент

01:48:51

участок будет резко момент

01:48:53

тут опишу ним ну оставляю как есть то

01:48:58

есть давайте зайдем сюда так будет проще

01:49:00

не имеешь что у нас дальше types идет

01:49:04

сайт идет и прайс прайс у нас кстати не

01:49:08

стройка прайс у нас надо теперь смотрите

01:49:14

дальше сохраняют все

01:49:17

и 0 ok теперь из я возьму каким-то

01:49:21

образом у меня в моей базе данных

01:49:25

окажутся так что прайс это не число

01:49:29

строчка меня поругают прайс у тебя

01:49:33

раздается как строчка пишут

01:49:35

хотя я ожидаю получить число ниткой

01:49:38

извини-извини

01:49:40

я возвращаюсь что как и было и все

01:49:44

нормально теперь все отлично но как

01:49:47

теперь типизировать types и когти

01:49:52

позировать сайзер сделать это тоже ну не

01:49:56

очень сложно мы идем сюда тут я пишу что

01:50:00

есть types и

01:50:03

из проб types библиотеки я хочу получить

01:50:07

р-н если напишу так то это значит что

01:50:12

проб types именно 0 types

01:50:15

он может быть массивом потом и объяснял

01:50:19

что обязательно он является массивом

01:50:21

и все нормально то есть всякий никаких

01:50:25

проблем нету то есть 10 будут запись

01:50:27

придавать там число ну да тогда он

01:50:30

поругается и у меня сломается компонент

01:50:32

и заодно поругается скажет ты в types

01:50:35

передаешь не то что нужно

01:50:37

но что если я хочу конкретно указать что

01:50:42

именно может содержаться у меня массиве

01:50:45

что если я возьму и напишу что у меня

01:50:48

вот эти вот 0 и 1 это строчек ругаться

01:50:53

он не будет видеть его не ругается если

01:50:56

я тут напишу там что у меня массив строк

01:50:59

он не поругается если напишу что мне

01:51:02

массив чисел он не поругать

01:51:04

не поругается потому что сказал что это

01:51:07

просто массив неважно массив чего именно

01:51:10

это просто массив теперь я говорю что я

01:51:14

не хочу просто массив я хочу массив

01:51:17

чего-то

01:51:18

именно массив чисел теперь я объясняю

01:51:22

что в проб types есть специальный метод

01:51:26

точнее свойства 1 of ну точнее то это по

01:51:31

моим функции да это факте теперь я пишу

01:51:35

что эта функция может получать проб

01:51:40

types

01:51:42

только надо и в обязательном порядке я

01:51:48

сказал что из библиотеки проб types я

01:51:51

должен получить массив для вот этого

01:51:54

types который содержится вот тут вот

01:51:58

видите если в этом types есть массив

01:52:04

тонкий но не только ok

01:52:07

то есть ну типа не только ok что

01:52:09

нормально прокатит если этот массив не

01:52:13

просто массив массив чисел то только

01:52:18

тогда все нормально будет работать

01:52:21

сохраняю смотрим теперь пишет проб types

01:52:26

говорит что types у тебя не является тем

01:52:30

что ожидается смотрим а по-моему надо

01:52:36

сделать вот так вот нормально да начес

01:52:40

нормально теперь он говорит если у тебя

01:52:44

от types это массив чисел и он должен быть

01:52:49

обязательно если это все окей то тогда

01:52:52

ну никаких ошибок не будет видите ну это

01:52:55

массив чисел что если возьму где-то

01:52:58

напишу строчку случайно

01:53:02

он мне выдает инвалид свойства в types

01:53:08

по индексу 0 а ноуте является строчкой а

01:53:12

я ожидаю получить число понимаете теперь

01:53:16

вы уже проще можете понять где у вас

01:53:19

вероятнее всего проблема то есть вы

01:53:22

самому себе но не оставите тех граблей

01:53:26

которые вы можете оставить без

01:53:28

если вы не укажете там типа есть живу не

01:53:31

указывайте конкретные типы то в будущем

01:53:34

где это может быть у вас окажется так

01:53:36

чтоб возникнет какая-то проблема и там

01:53:39

просто вы не поймете в чем дело вам

01:53:41

придется это все добавить консоль longhi

01:53:43

включать а тут вам немножко в помощь

01:53:46

приходит проб tips который говорит что у

01:53:49

тебя в types в компоненте пицца блок

01:53:52

есть проблема и но кстати не говорит где

01:53:56

именно вот это вот печально вот это

01:53:57

кстати печально

01:53:58

он не горит где именно но все равно он

01:54:01

говорит и говорит что в types у тебя по

01:54:03

индекс 0 есть проблемы я говорю эти

01:54:06

полки

01:54:07

без проблем я возвращаю как было теперь

01:54:10

никаких проблем нету то же самое я

01:54:13

теперь делаю для says сохраняют все

01:54:19

нормально теперь я возьму для союз тут

01:54:22

напишу то но что это не понял сохраню он

01:54:32

видимо

01:54:33

строго не проверяет но печаль давайте

01:54:36

сделаем не на узел опять же строчку 30 и

01:54:41

он ругается что у тебя в сайзер где-то

01:54:45

там первое число но уточнить 1 по

01:54:48

индексу элемент 1

01:54:50

у тебя строчка а я ожидаю получить число

01:54:56

expected надо и вот я исправляю

01:55:00

и сел все нормально то есть никаких

01:55:02

проблем нету protex это прикольная штука

01:55:05

понимаете это такая интересная вещь но

01:55:08

блин с помощью typescript а это так все

01:55:11

красиво делается не приходится писать

01:55:14

там каких-то там вот этих вот действий

01:55:17

array of of и так далее ставим скриптом

01:55:20

это прям все кайфово делается прямо вот

01:55:23

вот как надо и кстати еще есть такой

01:55:26

интересный момент смотрите теперь я

01:55:28

напишу на он не в подсказках указывает

01:55:32

на им что но им строчка если напишу тест

01:55:37

он уже не говорит что такой тест видеть

01:55:42

нету тестом это мои подсказки

01:55:44

это сниппет а мои и он горит что эти нет

01:55:47

теста в компоненте пицца блок но

01:55:50

например твайс у тебя есть и он нам все

01:55:56

отлично то есть теперь все работает

01:55:58

нормально примерно таким образом

01:56:02

работать что ты еще хотел объяснить но

01:56:05

только вето хотел объяснить это мне из

01:56:07

головы вылетело это у меня вылетело из

01:56:12

головы

01:56:13

[музыка]

01:56:17

вроде бы все вроде бы все вот что-то вот

01:56:22

хотел объяснить блин ну ладно наверное

01:56:27

это было не столь важно если забыл

01:56:30

принципе а вспомнил вспомнил вот что вот

01:56:34

вот вот вот и последний момент который я

01:56:37

хочу объяснить чтобы потом не пришлось

01:56:39

объяснять что если окажутся так что ну я

01:56:44

случайно не передал массив то есть я не

01:56:50

передал массив как сделать так чтобы по

01:56:53

умолчанию в компоненте

01:56:55

все-таки оказался массив если его не

01:56:58

будет

01:56:59

для того чтобы по умолчанию какие-то

01:57:01

значения вбивать если я по какой-то

01:57:03

проблеме могу их не указать то есть ну

01:57:06

случайно окажется так что где-то тут не

01:57:10

будет так с

01:57:11

может быть такое окажусь то есть я

01:57:14

возьму теперь напишу так что нету в этом

01:57:17

первом объекте types и у меня ломается

01:57:20

приложение видите она сломалась пишут

01:57:24

что у тебя нету ты пса

01:57:25

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

01:57:29

так чтобы я предотвратил такой момент

01:57:30

чтобы на всякий пожарный я указал по

01:57:34

умолчанию значения я беру ниже указу

01:57:37

пицца блок далее пишу

01:57:41

дефолт props на печеньки

01:57:49

спасибо евгений за донат на печеньки мне

01:57:55

кстати давно сладко важнее но все равно

01:57:58

спасибо теперь что я делаю надо будет

01:58:02

кстати чтобы садко купить учитывает

01:58:05

давно я уже давно линию все выходить

01:58:06

магазин что мы теперь делаем я теперь

01:58:10

говорю что по умолчанию

01:58:11

если же той песне был передан то у меня

01:58:15

он будет пустое массива теперь нет

01:58:19

никакой ошибки если я случайно

01:58:23

укажу что types у меня будет ну например

01:58:26

12

01:58:27

например все нормально все работает но

01:58:31

точнее нас нет у нас есть вот так все

01:58:34

нормально работает но если сюда передам

01:58:36

underline а мы видим что у нас нету

01:58:40

массива то есть у нас types

01:58:42

из-за того что передал сюда анды файл не

01:58:46

является массивом

01:58:47

видите он уже не массив и для того чтобы

01:58:52

предотвратить вот эту ошибку который

01:58:54

может возникнуть

01:58:55

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

01:58:58

компонент не вернул массив мы по

01:59:00

умолчанию ставим асем видите ничего не

01:59:03

ломается хотя я указал indev а я вот

01:59:07

убираю все нормально теперь вот у меня

01:59:09

ну по сути по умолчанию у меня везде

01:59:13

должно быть дизейбл

01:59:18

а вы тут видите вот потому что этот

01:59:22

убрал об остальных объектах есть я вот

01:59:25

возвращаю и все нормально теперь у меня

01:59:28

все работает как есть и точно так же я

01:59:31

могу сделать для чего то другого то есть

01:59:33

я могу убрать например там обязательно

01:59:36

вот могу сказать что ну не надо

01:59:39

обязательно вводить

01:59:40

можно не вводить но тогда мы у меня

01:59:47

будет там типа название пиццы или просто

01:59:52

сделаем вот так пусть будет так и секунд

01:59:57

окажутся так что компонент ничего не

01:59:59

видно то есть я щас вот сделаю так все

02:00:02

нормально все отлично теперь я возьму

02:00:05

этот компонент и выше ничего не будет

02:00:09

придавать просто тренды этот компонент

02:00:12

у меня будут ошибки видите пишет что

02:00:16

ругается на сайте

02:00:19

давайте мы укажем сайт из по умолчанию

02:00:22

что если в него ничего не передается

02:00:24

то он является массивом и вот значение

02:00:29

имени у меня вот дефисы если я не

02:00:33

передаю имя число у меня но цена у меня

02:00:36

нету цены нету я теперь указываю что

02:00:40

цена по умолчанию 0 вот теперь 0 и далее

02:00:45

указываю что engel

02:00:47

но условно говоря у меня будет по

02:00:51

умолчанию условно вот это вот видите я

02:00:56

не буду писать сделаю вот так и вот

02:01:02

таким образом то есть я объясняю

02:01:04

пробки псу что тут очень дефолта опцию

02:01:08

что без этих комп без этих свойств мой

02:01:12

компаньон жить не может и для того чтобы

02:01:14

мне не возникло проблем в дальнейшем я

02:01:17

эти свойства вставлю по умолчанию но без

02:01:20

этих двух он может справиться вот и без

02:01:22

этих двух не можешь

02:01:23

просто для красоты их указываю и их

02:01:28

который вот без которых не может

02:01:30

принципе жить их я укажу в строгом

02:01:33

режиме скажу типа из приходят идут шум и

02:01:37

срывают на всякий случай в typescript и

02:01:41

это делается очень просто тут вот на

02:01:44

blizko.ru

02:01:45

могу кстати не писать зачем писать если

02:01:48

они по умолчанию

02:01:49

указываются так то есть таким образом

02:01:53

вот я теперь добавил типизацию для моего

02:01:57

моего компонента пицца блок так же можно

02:02:00

сделать для всего остального ст вот у

02:02:02

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

02:02:05

тут написать батон проб таец и сказать

02:02:12

что вот левой часть onclick проб проб

02:02:18

types выйти вот отсюда скопируем проб

02:02:23

types что он клик является функцией и

02:02:31

сек

02:02:32

ну то есть мы просто теперь можем

02:02:33

указать и уже в хедере смотрите в хедере

02:02:37

где у нас компонент мы теперь пишем он

02:02:41

клик и он сразу на подсвечивать видите

02:02:44

сразу говорит что onclick у тебя

02:02:46

является функцией если я уберу вот эту

02:02:49

часть и проверю тут опять он клик он

02:02:55

горит onclick у тебя хрен пойми ч не

02:02:58

является теперь они за это они что угодно вот я

02:03:03

вот возвращаю теперь смотрим облик

02:03:08

теперь говорит onclick у тебя является

02:03:11

функцией который может получать что-то

02:03:13

его защищать что-то

02:03:16

то есть таким образом вы себе сами

02:03:18

можете указать каких-то типов и в

02:03:21

дальнейшем вам будет проще понимать

02:03:24

какие свойства у осесть и в дальнейшем

02:03:26

он будет проще дыба жить ошибки которые

02:03:29

могут ну может быть возникнуть в

02:03:33

принципе все в принципе все 2 часа но

02:03:37

зато рассказал то что хотел рассказать

02:03:41

то что хотел рассказать в принципе

02:03:43

рассказал как то так я вам буду очень

02:03:48

признать но у нас урок закончился я вам

02:03:54

буду очень признателен тем кому

02:03:57

небезразлична судьба нашего канала тем

02:04:01

кому тот кто хочет помочь хоть как-то

02:04:04

моему каналу например не может донатом

02:04:09

ничего страшного вообще нету

02:04:11

если у вас есть такое желание хоть

02:04:14

как-то помочь потому что ну я тоже

02:04:16

стараюсь помочь вам то помогите мне

02:04:19

пожалуйста указать тайм-коды то есть вы

02:04:22

можете даже не писать все тайм-коды вот

02:04:26

вы смотрите это видео то начинаю

02:04:28

объяснять про т.п. например вы можете

02:04:32

взять и в этот момент указать на каком

02:04:37

на какой секунде на какой минуте я начал

02:04:39

объяснять про птиц в комментариях

02:04:41

например я потом могу и стала сесть

02:04:44

собрать ваши комментарии и уже сделать

02:04:47

из этого список таймкодов если вам не

02:04:51

лень и вы хотите помочь то вы можете

02:04:53

указать там в процессе просмотра те тайм

02:04:57

коды которые вы заметили ну и где я

02:04:59

объясняю это во первых мне поможет мне

02:05:02

будет легче потом тайм-коды вбивать и в

02:05:05

дальнейшем вы и другим людям поможете ну

02:05:08

и соответственно моим каналом так что

02:05:11

буду признателен вам если вы него так

02:05:15

вот сможете помочь

02:05:18

так что вот такие вот дела вроде все

02:05:22

давайте посмотрим чат по классике что

02:05:26

настучать и потом перейду уже к тому что

02:05:32

пойду

02:05:34

зависеть его муж эти норм интернет блин

02:05:37

это было бы наверное самое лучшее что

02:05:40

могло бы воспроизвести потому что смотри

02:05:44

видишь вот это вот это плохо не должно

02:05:48

быть красную и не должно быть 155000

02:05:54

пропуска кадров не должно быть понимаешь

02:05:58

должно быть 00 ли

02:06:05

переехал в новый дом

02:06:08

поставил другого провайдера и все равно

02:06:12

это проблема наблюдается

02:06:14

печально печальном но вот у меня такое

02:06:18

подозрение что эти оба провайдера через

02:06:20

ростелеком работает и видимо из за того

02:06:23

что они ростелеком овский трафиком но

02:06:25

передает видимо из-за этого какие-то

02:06:27

проблемы происходит я уверен что это не

02:06:30

мой компьютер и виноват

02:06:41

ну я вроде отвечал riddex будет на

02:06:43

следующем уроке на этом но на следующем

02:06:46

точно будет следующий урок на днях может

02:06:50

быть завтра может быть после завтра но

02:06:56

точно не через неделю это вот

02:06:58

гарантированно за всей информации за

02:07:03

новостями которые могут быть за новыми

02:07:05

стримами

02:07:06

не только по урокам следите в программе

02:07:08

и в контакте но не тут уже пишут в

02:07:12

telegram давайте его пока замечу начнет

02:07:16

cuccio плюс mobic удобнее кому как кому

02:07:21

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

02:07:24

автоматом компонент в connect обернется

02:07:27

а вот ты просто говоришь я неверно понял

02:07:30

относительно чего-то имеешь виду давно

02:07:33

brexit так работает на сколько я знаю

02:07:35

хотя нет там по моему а декоратор нужно

02:07:39

еще дополнительно подключать

02:07:40

а работает или нет или да помоему работу

02:07:47

там по моему через прокси работалось

02:07:49

ошибались в рот и надо же объект не

02:07:52

потом как так нужно следить за порядком

02:07:55

роутер но за порядком работу нужно

02:07:57

следить касатин да но y у нас указан это

02:08:07

на что дальше это вы тут обсуждаете муки

02:08:15

типа чтобы нажал добавить и лег под

02:08:18

рукой пиццу я хочу добавлять наверно он

02:08:20

имеет виду помог x огни джек мы отлично

02:08:29

[музыка]

02:08:35

структурировать например приватный робот

02:08:38

для только залогин их пользователей что

02:08:46

сейчас объясняет анонимных функция она

02:08:50

ними функция это плохо не раз встречал

02:08:52

во всяких статьях рекомендации анонимные

02:08:55

функции это неплохо но плохо в тех

02:08:59

случаях когда у тебя в пробках могут

02:09:03

меняться ссылки на эти функции что это

02:09:07

значит это значит что если у тебя

02:09:09

окажутся так что есть родительский

02:09:12

компонент который создает анонимную

02:09:14

функцию при каждом рендере то

02:09:18

дочерней компонент будет производить

02:09:20

лишний раз эндрю когда это не нужно и

02:09:24

анонимные функции это неплохо просто

02:09:27

нужно следить за тем чтобы ссылки на эти

02:09:30

функции которые была создана с помощью

02:09:32

аноним то есть который была создана

02:09:35

анонимная функция какой-то переменной

02:09:37

лев функциональным название хотят секса

02:09:40

на функциональные

02:09:42

функционально название если функция

02:09:45

имеет название она уже не нанимаем то

02:09:47

есть если у тебя есть переменная const

02:09:49

который содержит тебя анонимную функцию

02:09:51

и если она меняется то есть перри

02:09:56

создается то тогда это плохо то есть

02:09:59

нужно следить за тем чтобы ссылки на эти

02:10:04

функции они не менялись тогда ничего не

02:10:07

будет тогда все нормально ты можешь

02:10:08

создавать она не на функции из-за этого

02:10:11

люди говорят что тип это плохо то есть

02:10:13

нужно следить за этим моментом чтобы

02:10:15

потом у тебя из-за того что поменяла

02:10:17

ссылка потом у тебя не произошел

02:10:21

ненужный render такой момент на одном

02:10:25

компоненте это в принципе не отразится

02:10:28

но если у тебя будет там 1500 тысячи сто

02:10:33

тысяч компонентов рендерится

02:10:35

если в них будет прокидывать эта функция

02:10:38

которое будет меняться то есть я ссылка

02:10:41

будет меняться то соответственно все эти

02:10:43

100000 компонентов тоже будет

02:10:45

производить render что не есть хорошо

02:10:49

раненый функции это плохо это уже что

02:10:52

админку бы сделано но джесс сделал но не

02:10:56

для этого курса может быть для платного

02:11:02

кстати немного похоже делал похоже что

02:11:06

проект зачем учить то есть когда есть

02:11:10

java-script но в принципе незачем если

02:11:12

подумать в принципе не зачем то есть

02:11:16

java script typescript

02:11:17

это тот же java-script но есть отличие

02:11:21

java-script давайте приведу простой

02:11:23

пример вот есть функции как который

02:11:31

получает а и b это обучен жалость крит +

02:11:38

b

02:11:40

что наши функция делает калькулировать

02:11:43

два значения а и b и от шубка ук 1 плюс

02:11:49

3 равно 4 север что если я возьму и в

02:11:55

опрокину но будет три привет страны java

02:12:04

script что если прокинул анды файл

02:12:06

сейчас вот не будет ли кстати что я про

02:12:09

кино если считаясь опрокинула define будет

02:12:12

нам он не скажет что он define плюс 3

02:12:18

мне вернул вернул нам потом этот нам

02:12:22

каким-то хреном мог передается сюда или

02:12:26

потом там еще куда-то и в итоге твоего

02:12:29

приложение может сломаться понимаешь это

02:12:32

обычно java script и

02:12:36

в принципе ты можно писать тут проверку

02:12:41

сказать что if a type of a равен ли на

02:12:52

быт of b равен ли нам если равен то

02:13:00

тогда делаешь вот этого действия есть

02:13:07

уже не равен то тогда выводишь ошибку

02:13:12

throw error и говоришь или b или б нет

02:13:24

число

02:13:26

теперь смотрим один b2 все верно call

02:13:38

can define

02:13:41

3а и либо не число то есть ты принципе

02:13:47

сделал проверку видишь вот и да без

02:13:53

стать скрипта ты можешь справиться то

02:13:55

есть в принципе можно обойтись без стать

02:13:57

скрипта а теперь смотрите пускают просто

02:14:05

берем эту функцию заходим в редактор

02:14:11

typescript а чтобы ну типа поиграться со

02:14:14

100 писк оптом я пишу тут теперь так

02:14:21

typescript и потом пишут

02:14:24

alert

02:14:27

гаук 1 плюс 2 ран получаю три все

02:14:34

работает java script работать видите вот

02:14:37

то есть вот этот вот код перри

02:14:39

конвертировался ну вот вот в такой вот

02:14:42

вот ну все работает нормально то есть

02:14:44

три верного но если посмотреть сюда у

02:14:48

нас тут ошибки а указан как н я а мой

02:14:55

typescript я не знаю что такое а тут что

02:14:58

ты мне прислал кай и что я должен с этим

02:15:01

делать я говорю а это число и b может

02:15:08

быть только число все работает нормально

02:15:12

теперь себя возьму тут напишу

02:15:15

underfell видишь он у меня ругается

02:15:20

аргумент о ступе on the file is not is a

02:15:26

noble то параметр f-type номер он пишет что ты

02:15:31

пытаешься первым аргументом

02:15:34

передавать антифа и хотя он является

02:15:37

набором

02:15:38

а потом ты такой apple 5 потом может

02:15:44

оказаться так что ты такую перемену

02:15:46

создаешь там например a5 где это там в

02:15:54

dre в своем коде где-то там хрен пойми

02:15:58

где потом ты придаешь этот 5 и вот тебя

02:16:02

работает все нормально все работает

02:16:04

нормально но ты потом взял в а каким-то

02:16:07

образом где-то там в коде неважно где а

02:16:10

поменял на строчку и у тебя typescript

02:16:16

поругается на это скажут ты

02:16:19

переменную а пытаешься пропихнуть в

02:16:23

кока-колку меня нам бы я вырежу строго

02:16:27

указал что нам и а пишут что я являюсь

02:16:31

строчкой

02:16:32

хотя можно придавать число то есть

02:16:35

typescript

02:16:36

тебе помогает исправить те проблемы

02:16:38

которые ты можешь написать на момент там

02:16:42

передачи из одних параметров в другие

02:16:45

там из одной функции в другую и на этом

02:16:48

этапе вы можете сказать номер на моменте

02:16:51

когда ты вводишь какие-то там свои коды

02:16:53

он можете сказать ты не прав тот нельзя

02:16:56

так писать пиши нормально и ты уже

02:17:00

понимаешь что в kalk нельзя передавать

02:17:02

строчку нужно придавать число и ты такой

02:17:05

ok

02:17:07

то есть таким образом typescript тебе

02:17:09

помогает исправить те ошибки которую тем

02:17:12

могли бы возникнуть на этапе компиляции

02:17:16

то есть на этапе конвертирования из

02:17:18

typescript java script typescript тебя

02:17:21

может заранее предупредить и

02:17:23

предотвратить поломку твоего приложения

02:17:26

понимаешь чем строже ты тебе же чем

02:17:30

строже ты типизировать свое приложение

02:17:32

тем меньше у тебя могут возникнуть

02:17:35

ошибки такой момент из-за этого

02:17:37

typescript

02:17:38

я и советую использовать то есть ты

02:17:41

можешь принципе не углубляться в

02:17:43

изучении полностью в typescript а ты

02:17:45

можешь просто установить typescript

02:17:47

и хотя бы хоть что-то типизировать чтобы

02:17:50

вот примерно понимаете понимаешь так что

02:17:55

то только момент если сайт сделано этим

02:17:58

жестом нужно например динамично

02:17:59

пробежать некий контент

02:18:01

так есть ли смысл подключать 3gs чтобы

02:18:04

подгружать этот контент я думаю есть

02:18:07

если у тебя есть такая необходимость я

02:18:11

думаю есть ты в принципе можешь с

02:18:13

помощью джейк вере все сделать вообще

02:18:15

без проблем это можно сделать с помощью

02:18:17

джейк вере никаких там проблемы не

02:18:19

возникнут

02:18:20

но здесь в тебя приложение там более

02:18:24

сложная и требует каких-то там

02:18:26

динамических изменений то наверное стоит

02:18:29

посмотреть в сторону ли я джеймс ну или

02:18:31

по-крайней мере view джесс спасибо

02:18:37

объясните насчет types к и пожалуйста я

02:18:39

объясню как раз хотел спросить как часто

02:18:48

использую этот проект are proud to peace

02:18:50

я вроде бы вроде бы объяснил да да

02:19:00

конечно строгая типизация значительно

02:19:04

облегчает дэбак твоего приложения так о

02:19:07

да неважно как jest ныряют с любого

02:19:10

jalas котовского кода который был

02:19:13

написан на typescript

02:19:14

привет и тебе тоже привет настроить

02:19:21

обязательно тебе с когда но по сути мы

02:19:23

вчера привет это полноценный проект с

02:19:26

последующей выгрузкой на хостинг да мы

02:19:29

попытаемся выглядеть это все на хвостик

02:19:31

наверное это будет heroku

02:19:33

наверное посмотрим может быть будет

02:19:38

может быть будет но с h может быть будет

02:19:44

heroku может быть

02:19:46

будет другой наверно хирург потому что у

02:19:49

нас там будет

02:19:50

но но уже с бэк-энд точнее будет

02:19:54

библиотека которой написано но через и

02:19:56

она должна запускаться это вроде

02:20:01

подсказывают я слит ну типа того типа

02:20:06

того какие проекты ты посоветуешь для

02:20:10

практики я хочу один и видео сделать на

02:20:12

это пока эти могу посоветовать диод

02:20:14

список пользователей или список задач но

02:20:18

я бы тебе посоветовал сделать список

02:20:20

пользователей

02:20:21

его интерес нему делать сделать список

02:20:23

пользователей

02:20:24

где-то асинхронно получаешь данное и

02:20:26

сделать так чтобы ты мог добавлять

02:20:28

пользователей во фран тенди удалять и

02:20:32

редактировать

02:20:36

[музыка]

02:20:37

дикую можете сказать какой формуле

02:20:44

надо момент востребованным реак джойс вы

02:20:53

сделали не не забыла часа я уже делаю 4

02:20:56

урока страницу

02:20:57

но если бы вот щас мне нужно было

02:20:59

сделать бы ну наверное где-то полдня

02:21:04

я буду тело может быть меньше я думаю

02:21:07

наверное меньше но если бы не было бы

02:21:09

более сложным функционала был бы тот

02:21:12

который есть на самом деле это ничего

02:21:15

сложно вот поверьте мне когда вы уже

02:21:17

постепенно начнете вникать в reacts

02:21:19

вы поймете что какие-то вещи которые вам

02:21:22

показались сложными вы уже можете делать

02:21:24

ну на автомате то есть вы потому что уже

02:21:28

набрались опыту и делали подобных проект

02:21:31

рот целиком монополист

02:21:33

и но всех сервис особенного отдельных

02:21:38

районов там где нет но ростелеком кстати

02:21:42

не захотели мне подключать проводить

02:21:45

коми интернет что на самом деле печально

02:21:47

очень печально как объяснить как

02:21:53

объяснить react у

02:21:54

что я кликну на определенную пиццу мы же

02:21:57

одну к компоненту добавили а зачем

02:22:01

объяснять или акта что мы кликнули на

02:22:03

определенную пиццу не понял вопроса ты

02:22:09

между на кнопку добавить или вообще в

02:22:12

принципе на блок пиццы

02:22:15

подскажите вы представляете услуги

02:22:17

менторства пока алекс я такого не

02:22:21

предоставляю пока но советую следить за

02:22:26

информацией в телеграме потому что у

02:22:30

меня есть в планах скоро

02:22:32

заниматься менторства то есть я наверное

02:22:35

наверное еще пока не знаю как

02:22:38

наверное подключу спонсорство хотя нет

02:22:41

нет да я подключу спонсорство в patreon

02:22:45

наверное

02:22:46

уже три раза помимо мнение и

02:22:50

то есть люди смогут стать patreon или ну

02:22:53

и короче там описании есть patreon и

02:22:56

ссылка пока не надо ничего делать оттуда

02:23:01

вот можно будет производить оплату и

02:23:05

будет для этих людей закрытый чат то

02:23:08

есть для тех людей которые будут

02:23:10

патреона мимо ими что кто не знают о чем

02:23:13

еще с говорю в описании есть ссылка там

02:23:17

сойтись patreon для этих людей я скину

02:23:20

ссылку на закрытый чат и в этом чате я

02:23:24

буду заниматься менторства то есть если

02:23:27

будут вопросы там пгс там на работе

02:23:30

например возникла какая-то проблема и ты

02:23:32

не знаешь кому обратиться можно будет ко

02:23:36

мне обратиться или в чате в этом

02:23:38

закрытом какому-нибудь другому но по

02:23:40

крайней мере так как нам не уже будет

02:23:43

ответственность за тебя потому что ты

02:23:45

как бы платишь за это деньги то я буду

02:23:47

помогать и я буду отвечать на вопросы и

02:23:50

стянуть и возникнут там проблемы

02:23:52

какие-то то есть заниматься менторства и

02:23:56

будет закрыта чат в телеграме где по

02:24:00

платной подписки будет такая возможность

02:24:03

бесплатно такой чат я делать не буду

02:24:07

потому что у меня к сожалению нет

02:24:09

времени на это так как во первых я ими

02:24:14

работу трачу очень много времени

02:24:15

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

02:24:20

что такой момент нужно понимать

02:24:23

тоже что как бы я осознанно должен

02:24:28

тратить время на то что не только

02:24:31

приносит пользу другим но и мне тоже и

02:24:34

соответственно в плане

02:24:36

где нижнем мне вот будет такая польза

02:24:39

а вам плане менторства так что все будет

02:24:43

взаимовыгодным

02:24:46

но это не не то что не скоро это в

02:24:50

ближайшее время думаю

02:24:52

я пока устроился на новую работу я уже

02:24:54

тут почти третий месяц по моему даже

02:24:58

третьи уже идет и

02:25:01

мне надо сейчас полностью понимать какое

02:25:05

время когда я бывают свободен чтобы

02:25:09

точно я описал это время уже людям

02:25:12

которые будут платную подписку брать

02:25:16

начат и вот им помогал вот когда вот я

02:25:20

вот именно буду свободен чтобы не было

02:25:22

потом что типа я вот объяснил вам до что

02:25:24

типа вот мы есть папа то подписка

02:25:26

подключайтесь а потом типа не но не

02:25:29

отвечаю и вы получается отдали мне

02:25:32

деньги а я вам не отвечают тогда когда

02:25:34

вы хотите этого и я сначала пойму в

02:25:38

какой период времени бываю более-менее

02:25:40

свободен а чтобы мы по договоренности

02:25:42

уже понимали что в это время возможно я

02:25:46

не смогу отвечать по крайней мере я буду

02:25:49

пытаться но возможно и не буду отвечать

02:25:51

потому что я занят другими делами такой

02:25:54

момент и мне нужно понять в какой

02:25:56

диапазон времени бывая свободен так что

02:26:02

менторства скоро будет

02:26:09

привет владислав я случайно нашёл по

02:26:14

разработке чего-то стоит все же за тобой

02:26:16

спасибо надеюсь тебе чем-то помог этот

02:26:23

плейлист с этим курсом

02:26:25

чем отличается анонимная функция от call

02:26:27

back off понятие понятием что-то

02:26:30

неправильно понимаешь суть call back off

02:26:32

и она не мог функции

02:26:34

callback и то есть это есть любая

02:26:37

функция анонимно или там

02:26:38

именовали типа он берет и не ты делаешь

02:26:51

так сломали кого алексом будет и видео

02:26:56

праве окна этих ближайшее время как

02:27:00

минимум наверное полгода точно не будет

02:27:04

потому что я уже сделал этим курс

02:27:07

стоматологии приложения и он реально

02:27:11

этих возможно возможно когда я более

02:27:15

менее уже лучше изучу флотар будет курс

02:27:18

по флотар а где мы сделаем не просто

02:27:21

круто список задач а вот реально

02:27:24

интересное приложение

02:27:25

то есть что нибудь интересным

02:27:29

интересными не зря дата просто изучили

02:27:32

акт о изъять в просто изучив лотар нет

02:27:37

нас будет прямо чудо прикольно может

02:27:40

будет так что мы запилим интернет

02:27:42

магазин в приложении на фла тори может

02:27:47

быть но это пока мы светло

02:27:50

так что так пудинг сегодня будет вроде

02:27:56

бы я уже походил сегодня вроде папа

02:28:00

ходил и все можете сделать следующее

02:28:04

чтобы идеально было поставьте 2 лайка

02:28:11

чтобы тут было сто и я больше от вас

02:28:14

ничего не требую это вот этот 8 она меня

02:28:18

бесит над ним новый потерял там в поле у

02:28:27

родителей раз целиком такое дно

02:28:30

сбавить скорость выше 10 не подумает

02:28:33

стол только adsl 900 рублей месяц сельская

02:28:37

местность ну смотри я плачу тысячу

02:28:41

рублей и у меня скорость

02:28:45

80 мегабит скорость скачивания у меня

02:28:51

5-9

02:28:53

ну не более ну и при этом ты видишь что

02:28:58

мне происходит сбой из трансляции сейчас

02:29:01

вроде причем хорошо то есть сейчас

02:29:03

битрейт они все по сильно отличается

02:29:10

сложность подключения spring будут на и

02:29:12

но джесс spring будет если не ошибаюсь

02:29:15

это по-моему джалла темы java и но джесс

02:29:20

сам джон скрипт но это разные вещи

02:29:22

сколько я знаю но джесс по моему по

02:29:28

моему мнению будет легче

02:29:29

я не знаю spring будет как потому что я

02:29:32

не работал стригут то есть я не писал на

02:29:35

чаю сервак а через что делать

02:29:39

редактирование текста в реакции делай с

02:29:42

помощью you stay там то есть у тебя

02:29:44

будет

02:29:45

estate

02:29:46

тур будет контролировать твой текст и им

02:29:50

путь который будет получать текст и

02:29:53

каждого дима значение передавать обратно

02:29:56

с той

02:29:58

гуд ивнинг артур король хайруле киеве

02:30:04

надеюсь правильно произнес флотар вроде

02:30:08

modart да очень крутой язык дарт ну типа

02:30:12

typescript типа typescript

02:30:15

но со своими там приколюхами насколько

02:30:24

ценишь себя по пятибалльной шкале я как

02:30:26

специалиста на 35 или бы от наш как и

02:30:32

сказал почти на 4 тут примерно вот на

02:30:38

такой уровень но хотя нет я врун и 4 но

02:30:41

точно не 5 но учитывая

02:30:44

учитывая позициями 2 учитывая позициями

02:30:46

2-я 4 из 5

02:30:48

я вот скажу так точно не 5 потому что

02:30:52

для мидла есть вещи которые я еще не

02:30:56

очень хорошо знаю и мне нужно закрепить

02:31:00

нативный java script чтобы я вот

02:31:04

хорошими долл долл ну точно не сенин я в

02:31:10

этом уверен до синевы я думаю мне еще

02:31:13

года три наверное 23

02:31:19

если бы они оба были не вам я думаю

02:31:21

наверное было намного раньше было затяну

02:31:27

либо свр от верного ну-ка

02:31:35

что это у нас примут дата птичек

02:31:42

много интересно что это у нас такое

02:31:53

легковесная

02:31:54

backend игностик a real-time части

02:31:58

джеймс так типа знаешь что такое

02:32:00

саспенс саспенс type скрыть пройди

02:32:11

арест ком 5 pull out and local интересно

02:32:17

вот это вот уже интересно кстати то есть

02:32:20

это на фронте получается user profile

02:32:26

теперь но это типа на городской похоже

02:32:33

фокус ввода дающий что дальше юрьевич

02:32:50

дашборд

02:32:51

юсб свою и пей

02:32:54

events & projects with и юзера refresh

02:32:58

interval

02:32:59

тонко flash сверг configuration

02:33:03

то есть я придаю сюда вечер который

02:33:06

используют of а вот как то есть вот это

02:33:10

вот про нас будет возвращаться в питер

02:33:12

данные где хранятся

02:33:14

я не знаю где хранятся данные не могу

02:33:17

понять вот вот бред к графику вечер как

02:33:26

а есть вижу потом you are using

02:33:34

я понял я понял но единственный вопрос

02:33:38

пока остается это как происходит

02:33:41

real-time то есть если мой сервер не

02:33:44

поддерживают соки то я не знаю как

02:33:46

real-time наверное происходит на уровне

02:33:49

и графской сервака наверное наверное

02:33:52

думаю ну прикольно штука это себе

02:33:56

добавлю еще закладки

02:33:57

надо будет как-нибудь потестить

02:33:59

интересные еще спасибо привет как какие

02:34:07

youtube канал последуешь кроме тебя для

02:34:09

обучения ну и обычно советую тех кого

02:34:14

советует а там по реакции с а я быть я

02:34:19

знаешь как сказал смотри тех вот смотри

02:34:22

тех людей которые тебе реально

02:34:24

интересные матчи которые заходят и

02:34:29

все-таки топка нас про маска 400 рублей

02:34:34

я кстати

02:34:36

учился москве я знаю я получил 500

02:34:39

рублей за 80 мегабит тут 1000 рублей за

02:34:43

10 мегабит поясни за 100 до за 100

02:34:47

мегабит

02:34:50

как думаешь стоит ли

02:34:51

отсылать потенциальным работодателем

02:34:53

тестова задания у тебя не получилось в

02:34:55

нем некоторые команды общее просто не

02:34:58

парся просто не пальцы попытайся его

02:35:02

сделать максимально идеальном попытайся

02:35:04

вот эти вот сколько можешь приложить

02:35:07

усилий попытайся сделать но если ты уже

02:35:10

не знаешь как его идеально сделать то но

02:35:13

отправлений не бойся там уже как повезет

02:35:17

это лучше чем не отправлять тебе тоже

02:35:22

удачи не кстати тоже пройду я думаю

02:35:24

хватит я думаю вполне хватит следующий

02:35:29

урок да верно и будет на днях я думаю

02:35:34

завтра послезавтра любая информация она

02:35:37

доступна в телеграме так что следите за

02:35:41

ней и там я вам скину заранее за 15

02:35:47

минут может быть там заполни может быть

02:35:50

за два три часа анонс когда я буду

02:35:53

делать следующую трансляцию и так

02:35:55

господа всем вам удачи спасибо что

02:35:59

ставите лукасы

02:36:01

хорошие неделе вам а я пойду отдыхать

02:36:06

встретимся