Модальное окно (Popup) на REACT JS. Переиспользуемое всплывающее окно на REACT JS

Рет қаралды 111,275

3 жыл бұрын

В этом уроке мы cделаем адаптивное, переиспользуемое модальное\всплывающее окно на REACT JS.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Поддержать меня и мой канал вы можете по ссылкам ниже.
Qiwi кошелек - www.qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

Пікірлер: 224

@neiron3863 Жыл бұрын

Настолько без воды что аж в горле пересохло 😅

@eleonora5101 6 ай бұрын

🤣

@suhoboy1 3 жыл бұрын

Самый топовый видос насчет модалок, быстро и по факту, спасибо!

@UlbiTV 3 жыл бұрын

Спасибо большое!)

@user-dz1uq5sd5b 9 ай бұрын

донесение инфы на высочайшем уровне - всего 5 минут и все по делу! спасибо!

@user-fu3bq3kl7t 2 жыл бұрын

Спасибо. Для меня начинающего это очень полезное видео. Конечно часа 3 разбирался, но получилось. И даже интегрировал в свой учебный материал. И всё работает. Класс!

@user-vj3gs7kg7s Жыл бұрын

Коротко, ясно, по факту. Очень помогают подобные видео. Лайк, подписка и просмотр других тем на упреждение на канале)

@nafisgarifullin7199 7 ай бұрын

Все просто супер, огромное спасибо за такое объяснение. Все четко и без воды как всегда 🤝

@alexd1723 3 жыл бұрын

Приятно слушать тебя, быстро и по делу! годный контент

@seregabalit1025 Жыл бұрын

Улёт, лаконично, понятно, грамотно. Как всегда на высоте)

@natalikamenkova5383 Жыл бұрын

Огромное спасибо за Ваши видео, очень помогают, все коротко и ясно

@user-bo7mb9cf4d 3 жыл бұрын

Без воды, чётко и ясно. Лайк!

@UlbiTV 3 жыл бұрын

Благодарю!)

@user-nx5sg8uf2q Жыл бұрын

Спасибо за то, что ты делаешь! Очень круто!

@Alex4ever01 2 жыл бұрын

Мой любимый канал про React, Просто ТОП!!! Благодаря вам я начинаю любить React. Cпасибо большое за максималино полезный контент, без никакой воды. Если устроюсь на работу с меня чаевые!!

@user-us9wu7sr4b 3 ай бұрын

И как?

@christianspace9700 Жыл бұрын

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

@Moreaux19 29 күн бұрын

Обычно я смотрю учебные видосы на скорости 1.25, но тут такая концентрация инфы без воды, что порой приходилось пересматривать некоторые моменты. Крутотень!)

@vladyslavfx3892 3 жыл бұрын

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

@mrArmagedon1000 3 жыл бұрын

Спасибо, очень полезный контент делаешь, однозначно лайк)

@maxet2374 2 жыл бұрын

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

@alexalex-zh4ep 6 ай бұрын

Спасибо! Лаконично и очень круто изложен материал!

@user-co7nl8pf4p Жыл бұрын

Огромное человеческое спасибо!!! Это моя первая таска но первой работе!!!!

@WhiteHeterosexualMenHere 2 жыл бұрын

Да я просто не могу перестать восхищаться тобой, я почти на каждый вопрос нахожу ссылку на твоё видео.

@sairexes2443 Жыл бұрын

Спасибо, как всегда все четко и без воды

@user-fw9hc5lg9f Жыл бұрын

Круто! Спасибо, было полезно. Подчерпнул для себя пару клевых фишечек!

@Thomas-gd7if 3 жыл бұрын

Чел ты вообще крут!!!Кратко, чётко, подписка и лайк

@UlbiTV 3 жыл бұрын

Спасибо друг!)))

@programming5944 3 жыл бұрын

лучший канал, лайк без вопросов и коммент для поддержки модальное окно на react js

@UlbiTV 3 жыл бұрын

Спасибо!)

@user-nv3sl7cp4y 3 жыл бұрын

топ видос! спасибо огромное. только начал изучать реакт и было супер полезно! спасибо большое!

@UlbiTV 3 жыл бұрын

На канале много интересно!) Рекомендую! спасибо вам!

@moi-nick-zanyat 2 жыл бұрын

Очень интересно, буду использовать 👍

@the_fisherman560 Жыл бұрын

Cпасибо большое за максималино полезный контент.

@Ariadne.sThread 2 ай бұрын

Спасибо! Круто объясняете 🔥🔥🔥

@user-ht4es2nw7k 2 жыл бұрын

Круто! Спасибо за урок!

@user-fb7se3nd9k 2 жыл бұрын

Спасибо, очень помог мне) Как раз искал стоящий контет по Попапу

@user-px3mq1np8z Жыл бұрын

Один из самых доступных гайдов по модальным окнам

@user-br1tu9xh4w Жыл бұрын

Спасибо! Лаконично и понятно.

@user-zx8vf7dv5h Жыл бұрын

Это лучший блогер по программированию, которого я смотрел

@yaroslavzef7267 6 ай бұрын

Спасибо. Очень простая и в тоже время крутая модалка

@pavela9158 2 жыл бұрын

спасибо тебе большое, очень доступно и понятно! подписался)

@JohanLiebert2003 9 ай бұрын

Если честно, не знал, что pointer events none позволяет взаимодействовать как бы сквозь блок, думал, что это свойство просто блокирует взаимодействие с внутренним контентом, но сквозь контент не даёт возможности что-то делать, для меня это вообще открытие века, огромное спасибо😂

@dmytronice1337 2 жыл бұрын

Большое спасибо за видео, воспользовался в 2021 :)

@user-kn3ut1sh2o 2 жыл бұрын

Спасибо! Понятно и коротко.

@user-ix9sx5og4s 3 жыл бұрын

Спасибо за видео!

@mykhailostepanishchev6472 3 жыл бұрын

Крутейшее, спасибо!

@UlbiTV 3 жыл бұрын

Спасибо!)

@castiliOR 2 жыл бұрын

Огромное спасибо! Чётко

@user-ep2mh6zp3k 2 жыл бұрын

Супер! То что нужно!!!!

@Ekaterina-tu7ou 3 жыл бұрын

Огромное спасибо!

@user-kw5yy1gi7e 2 жыл бұрын

Спасибо за полезное видео.

@user-uk9fk9wt5c Жыл бұрын

Спасибо, было очень полезно.

@sashahoncharenko1730 3 жыл бұрын

топ контент, продолжай в том же духе )

@UlbiTV 3 жыл бұрын

Благодарю!)

@Quentinrei 2 жыл бұрын

Огонь контент!!!

@goshana1987 3 жыл бұрын

Спасибо! Удачи тебе с каналом.!✌🏾

@UlbiTV 3 жыл бұрын

Спасибо друг!)

@RinatYouldashbaev 3 жыл бұрын

@@UlbiTV у вас в описании в блоке "Разработка fullstack MERN web приложения" при переходе по первым 2 ссылкам - "Плейлист не существует".

@UlbiTV 3 жыл бұрын

@@RinatYouldashbaev Спасибо!) я удалил эти плейлисты, тк люди путаются, есть один, где уроки идут последовательно!)

@jilimb0 3 жыл бұрын

Всё круто, продолжай дальше

@UlbiTV 3 жыл бұрын

Спасибо дружище))

@user-ki8ij8xi9c Жыл бұрын

то что надо👍 спасибо!

@dmitrydidenko694 Жыл бұрын

Все как всегда полезно)) Не знаю что добавить , но для развития канала думаю комент не будет лишним))

@ListenFight 6 ай бұрын

Вот это разжевал) вот прям как надо!

@yevheniisahanenko5848 3 жыл бұрын

Толково, помог! Спасибо

@UlbiTV 3 жыл бұрын

И вам спасибо!)

@devorer77 2 жыл бұрын

как это тут нет моего лайка? отличный гайд!

@DeIgado95 3 жыл бұрын

Отлично, спасибо

@kirillshulman581 3 жыл бұрын

Огонь! 🔥

@Sha-Kate 2 жыл бұрын

Спасибо! Здорово! Было бы здорово сразу на тайскрипте объяснять, мне кажется, так более понятно, с камкими типами имеем дело. Спасибо!!!! Помогло решить таск

@user-wo9vs8ku9t Жыл бұрын

Ulbi - ты Бог!!! Благодарю от всей души за то что даешь нам это знание!!!

@ivanbag9741 2 ай бұрын

Спасибо! Моё почтение!!!

@user-is8qm2bg3p 8 ай бұрын

Ролик реально спасение

@MartinIden-hn7ld 9 ай бұрын

Ты капитальный красавчик!!!

@user-dt8hn8cm7k Жыл бұрын

Лучший!

@teymurtarasov9014 3 жыл бұрын

большое спасибо, лайк

@eleonora5101 6 ай бұрын

Thanks a lot! it was really useful

@falsetrue7910 3 жыл бұрын

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

@UlbiTV 3 жыл бұрын

Не зря старался значит)

@antonkudrin7060 3 жыл бұрын

Однозначно лайк

@UlbiTV 3 жыл бұрын

Спасибо!)

@jsmonstr9638 3 жыл бұрын

По поводу идеи, redux'a с хуками бы побольше, в интернете как то мало информации или она растянута, также что то про useMemo или useCallback посмотрел, про кастомные хуки тоже, спасибо за видео, кратко и полезно.

@UlbiTV 3 жыл бұрын

Спасибо, про кастомные хуки будет 💯)

@sergeikirillov1127 2 жыл бұрын

Прикольно!

@ormtosteson9553 14 күн бұрын

Чотка внатуре класс

@nurlanmehdiyev7428 2 жыл бұрын

Спасибо!

@forwork7967 3 жыл бұрын

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

@Renat.Miftakhov Жыл бұрын

если речь про скролл страницы, то достаточно навесить на body стиль overflow: hidden, а после закрытия модалки убрать это правило

@CatPusic_ Жыл бұрын

огонь🔥🔥🔥

@vasylshych6470 2 жыл бұрын

Круто)

@cuppo6638 10 ай бұрын

спасибо тебе большое!

@Nikitosss91 3 жыл бұрын

Было бы очень круто, если бы ты собрал свою мини библиотеку с переиспользуемыми компонентати. Самыми частато встречающимися. Всякие логин формы, инпуты, чекбоксы, кнопочки(дизейблейд, например, когда данные подгружаются) и тд.))

@UlbiTV 3 жыл бұрын

Учту!)

@gatrianL 2 жыл бұрын

Для этого и существуют material ui, Ant-Design и другие)

@koshgosh3081 Жыл бұрын

ты совсем? И кто все это будет поддерживать, обновлять, реакт не стоит на месте, как и требования к функционалу, он может в любой момент измениться. Представь себе сколько времени на это будет уходить

@user-dz1uq5sd5b 8 ай бұрын

Если правильно вас понял, то такая штука уже есть headless ui называется)

@AntonRyabov-by3vn 20 күн бұрын

Очень хорошо, теперь я знаю, что UI компоненты лучше переносить из проекта в проект хаххаха

@user-xz3ys2lh5v Жыл бұрын

Дякую! Дуже швидко і доступно!

@daradanci Жыл бұрын

лучший!!

@NickJ953 3 жыл бұрын

Лукас!

@tofudriver_northlordRacing 2 жыл бұрын

Спасибо, дружище! . . . . ещё пара слов, чтобы коммент был длиннее :)

@user-tp1gr8je3t Жыл бұрын

Отличное видео, как и видео про бургер меню. Заметил, что в обоих произносите stopPropagation не правильно (propagINation вместо propagation). Еще хотел добавить, что использование этой функции считается плохой практикой (некоторые даже говорят evil practice), и лучше ее избегать

@artemmetra9000 2 жыл бұрын

Круть

@user-zo8me5nc7b 3 жыл бұрын

Оч классно. А по интернационализации видос есть? Я чёт в упор не вижу Оч клёво рассказываешь, всё по полкам

@marlonbrando458 2 жыл бұрын

Ультра лайк

@Xx-bt5mo 3 жыл бұрын

Приветствую) Топ контент) Но почему не используешь createPortal ???

@frednoby8531 2 жыл бұрын

Хотелось бы увидеть пример, где много карточек и при клике на любую из них открывалась бы модалка с данными из карточки, по которой кликнули. Мало опыта в этом у многих и тема пошла бы на ура.

@rodion_dev 2 жыл бұрын

Тот же принцип. Просто каждая карточка, должна быть элементом с модальным окном. На карточку добавь обработку клика (как на кнопке из видео) и всё

@frednoby8531 2 жыл бұрын

@@rodion_dev но тогда у каждой карточки будет своя модалка, а это нарушает принцип DRY.

@rodion_dev 2 жыл бұрын

@@frednoby8531 Поэтому и нужно использовать элементы, а не копировать и вставлять код. Если тебе нужно вставить 10 карточек, не получится не повторяться.

@frednoby8531 2 жыл бұрын

@@rodion_dev а если стоит задача не повторяться? Модалку нужно вывести один раз, а вызывать её могут разные компоненты, попутно передавая внутрь данные.

@rodion_dev 2 жыл бұрын

@@frednoby8531 Можно тогда сделать переменную, которая будет принимать в себя контент модального окна. При нажатии на кнопку оно будет обновляться и показывать модалку

@user-tg3bj1vu9i 2 жыл бұрын

Все отлично, объяснения к модальному окну, Вопрос а если сделать модальное окно появлялось по заданному времени например по setTimeout?

@user-om1rg8nq1q 2 жыл бұрын

"..если было интересно..." - мне кажется, тебе давно пора не использовать эту фразу, потому как ВСЕ ТВОИ ВИДЕО ПИПЕЦ КАКИЕ ИНТЕРЕСНЫЕ И ПОЛЕЗНЫЕ!! Спасибо тебе!

@Story-J 2 жыл бұрын

Привет, классно было бы через портал реализовать, чтобы компонент точно подходил под все нужды

@user-tg3bj1vu9i 2 жыл бұрын

Самый топовый видос насчет модалок и объяснения к нему, а кода нет

@user-qp7ph5df7x 2 жыл бұрын

Спасибо за качественный контент. У меня остался вопрос - можно ли открывать 2 разные модалки 2 разными кнопками в одном компоненте? А если можно то как.