57 - React JS - пример Preloader, loader-gif, isFetching indication

Поділитися
Вставка
  • Опубліковано 16 тра 2019
  • 🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
    Front-end
    it-incubator.io/front-end/?ut...
    Back-end
    it-incubator.io/back-end/?utm...
    Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
    Помогайте друг другу вот здесь: t.me/reactjs_samurai
    API: social-network.samuraijs.com/
    Ребят, важно дать пользователю обратную связь, какой-то намёк, что, мол, подожди, мы отправили на сервак запрос, всё обрабатывается, но нужно подождать. Именно для этого и показывают всякие крутилки, блокировки кнопок или их прячут и на их месте показывают крутилку) и так далее. Мы с вами всё это будем делать регулярно на всех страницах почти)) А сегодня небольшое введение в проблему!
    Уроки по React JS: • Курс "React JS - путь ...
    * Сайты:
    it-kamasutra.com
    it-incubator.eu
    samuraijs.com
    * Мы в соц. сетях:
    itkamasutra
    / itkamasutra
    telegram.me/itkamasutra
    * Мои личные VK и Insta:
    d.kuzyuberdin
    / it.kamasutra.dimych
    #презентационная #reactjs #практика #примеры #уроки #курс

КОМЕНТАРІ • 543

  • @NJenyaBMW
    @NJenyaBMW 5 років тому +157

    формат хоть и не стандартный у тебя, Димыч, но он сука лучший )

  • @user-mt1te4fr1y
    @user-mt1te4fr1y 3 роки тому +41

    Пока смотрим как писать проект параллельно увидим весь интерьер квартиры Димыча, кошечке лак)

  • @stanislavndreev2831
    @stanislavndreev2831 3 роки тому +35

    Время от времени всем нам нужно отдохнуть от сложных архитектурных вещей, и просто загрузить прелоадер) Спасибо за урок!)

  • @dxnght
    @dxnght 4 роки тому +26

    Сейчас такой график страшный, что раз в неделю удаётся позаниматься нормально. Ребята, не сдавайтесь, всё будет и вы справитесь! Димыч, спасибо за твои труды! Пыхтим-бомбим, даже, если медленновато

  • @sabatr1989
    @sabatr1989 4 роки тому +27

    20:12 "Патамушта...патамушта...почему 0_o" мвахаах, я чуть со стула не упал от смеха)

  • @trojdenid9580
    @trojdenid9580 3 роки тому +34

    32:55 - вся суть программирования: "сеньору проще взять, один раз пофиксить за 5-10 минут, полчаса, полдня")))

    • @gonqii
      @gonqii 2 роки тому

      ахахахаххааххаха

    • @tevi6667
      @tevi6667 Рік тому +2

      неделя, месяц, год))

  • @grigodoes
    @grigodoes 4 роки тому +36

    Если кому то нужно, чтоб старые пользователи исчезали, а новые появлялись только после ответа. То можно сделать так:
    { this.props.isFetching ? : null } - было.
    { this.props.isFetching ? : } - стало.

  • @kaysar787
    @kaysar787 4 роки тому +70

    "Ты просто пользователь, ты ж тупой" :D

  • @Quentinrei
    @Quentinrei 2 роки тому +3

    По видосам мы были у Димыча на кухне, сегодня в гостиной, я чувствую себя его соседом, который иногда заходит в гости )
    React, Redux, API, JS, TS, best of the best

  • @user-bu5mw7jz6m
    @user-bu5mw7jz6m 5 років тому +73

    Спасибо! 3 день подряд видосы пилишь. Надеюсь продолжишь в том же духе!
    Самый топовый препод

  • @user-oq6ku8zf4q
    @user-oq6ku8zf4q Місяць тому +1

    Димыч - ЧЕЛОВЕЧИЩЕ! Громаднейший респект из четверга ИНКУБАТОРА! год 2024. Хоть и просела IT - сфера, но нет худа без добра. Возможно это как-то притормозило развитие индустрии и оставило этот курс актуальным по сей день и благодаря этому, тем кто долго думал могут воспользоваться моментом и пройти БЕСПЛАТНО АКТУАЛЬНЫЙ курс #React#Redux

  • @SpeedGodQ
    @SpeedGodQ 4 роки тому +18

    только на этом уроке осознал, насколькр же круто это всё. ты не просто пишешь код, а складываешь некий "лего" конструктор, ну или пазлики)

  • @user-ll2wn7qs5r
    @user-ll2wn7qs5r 5 років тому +41

    Спасибо за курс)))☺

    • @ITKAMASUTRA
      @ITKAMASUTRA  5 років тому +1

      Пожалуйста, Марина!

  • @vladislavhirsa9094
    @vladislavhirsa9094 5 років тому +11

    Я сделал с помощью библиотеки react-loadable, и все очень круто получается.
    Example:
    Loading.js >>>>>>>>
    import React from 'react'
    import LoadingImg from './components/Img/loadingGif.gif'
    const Loading = () => {
    return
    }
    export default Loading;
    ............................................................
    App.js >>>>
    // import UsersConteiner from './components/Users/UsersConteiner';
    import Loadable from 'react-loadable';
    import Loading from './Loading';
    const UsersConteiner = Loadable ({
    loader: () => import('./components/Users/UsersConteiner'),
    loading: Loading
    });

  • @AndreiLaurou
    @AndreiLaurou 5 років тому +41

    молодец. И дело хорошее делаешь и рассказываешь позитивно )

  • @is_eliseeva
    @is_eliseeva 3 місяці тому +2

    2024-04-17 парампампам вижу свой коммент от 17 февраля 2023 года, забавно, год прошел, сейчас я в четверге. как же я рада, что учусь в инкубаторе! #react #preloader

  • @user-wr3ml3wc9d
    @user-wr3ml3wc9d 5 років тому +12

    Четко, потихоньку начинаю понимать, спасибо, Димыч!)

  • @ctumyji9737
    @ctumyji9737 4 роки тому +6

    Супер! Все получилось! Спасибо за урок, полетел дальше! :)
    #reactjs #практика

  • @StanislavObrazcoff
    @StanislavObrazcoff 5 років тому +2

    Спасибо за видео. Меняются интерьеры :) Кстати, звук здесь похуже, чем в предыдущих.

  • @mystexx
    @mystexx 4 роки тому +6

    Димыч, спасибо! Маленькими шагами двигаемся по-тихоньку. Обнял :)

  • @user-iz7fk4eu5t
    @user-iz7fk4eu5t 4 роки тому +16

    "ай и сейчас расскажу" лайкос))))

  • @qwertypoiu1337
    @qwertypoiu1337 4 роки тому +6

    Отличный пример создания лоадера на react! (надеюсь, при поиске будет подсовывать это видео :D)

  • @theWorldIsMultivariate
    @theWorldIsMultivariate 2 роки тому +2

    Огромнейшее спасибо за курс!! Ты помогаешь реализовать мою цель, быть разработчиком!!

  • @IgniosTyumen
    @IgniosTyumen 5 років тому +4

    Традиционный лайк за лучшие уроки по ReactJS=) Если можно было бы поставить доп лайк за скорость - он бы уже стоял. Думал, начну пилить проект для работы потренироваться в перерывах между видео, а тут уже новый видос=Р

  • @user-rp8oy2kf5d
    @user-rp8oy2kf5d 3 роки тому

    Димыч спасибо за уроки по React и самое главное что объясняешь как, что и почему учить. Типа учите React и ни на что пока что не отвлекаться. Это очень важно, а то как смотришь вакансии там такой список, что все хочется учить)

  • @bystryisokol1546
    @bystryisokol1546 5 років тому +32

    Как всегда всё получается. Как вceгда like.

  • @user-iv7wq2tp6o
    @user-iv7wq2tp6o 4 роки тому +3

    React js Preloader, loader-gif, isFetching indication Всё доступно и понятно! Однозначно лайкос!

  • @arthuru4I
    @arthuru4I 5 років тому +8

    Как всегда, лучший курс по React Redux, важно что охватываешь постоянно новинки, жду с нетерпением thunk и tsx (по работе нужно будет скоро - понятно пойду по документации, stackOwerFlow - но ты с нюансами объяснишь, до которых, временами, нужно месяцами доходить). Продолжай в том же духе!)

  • @user-zk7fu8jy2x
    @user-zk7fu8jy2x 4 роки тому +2

    Спасибо за отличный курс! Очень помогаешь новичкам! Жирный палец вверх!

  • @user-im8le2mi2w
    @user-im8le2mi2w 2 роки тому +2

    React JS - пример Preloader, loader-gif, isFetching indication
    Спасибо, Димыч!
    Смотрю, учусь!

  • @user-zq6nr9zy2u
    @user-zq6nr9zy2u 3 роки тому +6

    Спасибо. Живе Беларусь

  • @mariia6820
    @mariia6820 4 роки тому +2

    Спасибо огромное!!!Лучший курс по Реакту!

  • @ShoolMinecraft
    @ShoolMinecraft 4 роки тому +2

    Меня зацепило, хоть и имею хороший опыт по Реакту, молодец!

  • @user-jx7ez8xv2e
    @user-jx7ez8xv2e 4 роки тому

    Пишу комментарий когда посмотрю на несколько раз и сделаю все сам по памяти.
    Общие рекомендации по разработке тоже очень ценны! Очень!
    Preloader, loader-gif, isFetching indication круто!

  • @andreyantonovich379
    @andreyantonovich379 3 роки тому +1

    Спасибо за урок,круто!Бомбим дальше!

  • @MikhailKuklenkov
    @MikhailKuklenkov Рік тому

    Царский лайк, Дима. Объяснил по красоте) Гнем свою линию и не сворачиваем!

  • @volodymyrsus
    @volodymyrsus 2 роки тому +1

    Thanks!
    The best lessons of React & Redux!!!
    React , Redux, State, Store, Dispatch ,Connect, Action, Route, Reducer, Props, Preloader, loader-gif, isFetching indication

  • @rahalmamut01
    @rahalmamut01 5 років тому +2

    Спасибо за курс React JS!)

  • @user-fr7eu2dh1f
    @user-fr7eu2dh1f 4 роки тому +1

    Спасибо за уроки по React ! бомблю дальше :)

  • @sergsergey4251
    @sergsergey4251 4 роки тому

    Спасибо, отличный курс!
    React JS
    - Preloader, loader-gif, isFetching indication.
    Бомбим дальше ©

  • @chtotutunas432
    @chtotutunas432 2 роки тому

    Позитивный, несложный , нужный урок! Дал сил двигаться дальше !

  • @yurikorabel5435
    @yurikorabel5435 3 роки тому

    сделали красоту. Всегда мечтал о таких крутилках, но не знал как они делаются. Все оказалось так просто! Супер! Все эти мелкие "присыпочки", добавочки очень настраивают на позитивный лад! Димыч, супер!

  • @user-yu5mq1us2f
    @user-yu5mq1us2f 3 роки тому

    Дмитрий, ты молодец. Потихоньку картина в голове вырисовывается.

  • @pashabezk
    @pashabezk Рік тому +8

    2022. Здорово пройти что-то простое после нескольких сложных тем. Спасибо большое!

  • @ivanmiarkulau8320
    @ivanmiarkulau8320 3 роки тому

    Реализовали Preloader в нашем React-приложении, который информирует нас о процессе загрузки данных с сервера, спасибо за урок!)

  • @user-yf2rw3cu3k
    @user-yf2rw3cu3k 4 роки тому

    Супер! Обожаю такие штуки делать! Оч нравится визуализация)
    Preloader,
    loader-gif
    isFetching
    React

  • @AbaiIlyasov
    @AbaiIlyasov 4 місяці тому

    Всё круто и понятно, иду дальше!

  • @matthewperry8233
    @matthewperry8233 4 роки тому +1

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

  • @tar7sha
    @tar7sha 2 роки тому

    Дай Бог тобі здоров'я!!! Дуже круто, що акцентуєш та повторяєш чому isFetching в action creator.

  • @user-nk6ih7uh1h
    @user-nk6ih7uh1h 3 роки тому +1

    Создание анимации загрузки в реакт приложении. Гифка для загрузки. Preloader. isFetching. Лучший курс по React.JS. react. Дима, большое спасибо за проделанную работу

  • @Titanidze17
    @Titanidze17 5 років тому +3

    Спасибо за уроки. Забыл раньше сказать, но ты мне глаза открыл на пропсы и стейт. Кучу документаии прочитал не мог 2+2 сложить в этом вопросе, даже местами запутался и лег спать с мыселью "нифга так и не понял, в чем вообще у них разница между пропс и стейт...."

  • @aidosbatyrkulov3272
    @aidosbatyrkulov3272 4 роки тому

    И настроение поднимается от твоих шуток )) Отличные уроки с юмором #react #redux #js #2020js

  • @romanpol3336
    @romanpol3336 2 роки тому

    Cпасибо, Димыч, ты лучший! Бомбим дальше!
    React JS - Preloader, loader-gif, isFetching indication

  • @linuxlifepage
    @linuxlifepage 4 роки тому

    Спасибо Димыч! Лучший курс по React JS Redux preloader loader isFetching

  • @andreiribac6284
    @andreiribac6284 3 роки тому +1

    Спасибо за советы и поддержку! Димыч ты лучший! Всем привет из 2021 года!

  • @PodderjkaRUS
    @PodderjkaRUS 4 роки тому

    Спасибо за лучшие уроки!

  • @user-oc2ht9ss8k
    @user-oc2ht9ss8k 3 роки тому

    Огромное спасибо за курс). Бомблю дальше

  • @denkodatskyi3381
    @denkodatskyi3381 5 років тому +9

    React JS
    Preloader, loader-gif, isFetching indication
    The BEST!!! =)

  • @alexandr9313
    @alexandr9313 4 роки тому +2

    Спасибо, Димыч, за знания и мотивацию!

  • @spacerider9426
    @spacerider9426 3 роки тому

    Спасибо тебе огромное за твой труд! Смотрю дальше!

  • @mykhailostepanishchev6472
    @mykhailostepanishchev6472 4 роки тому +1

    Интересно,полезно,спасибо Дмитрий!

  • @sandorkligan2208
    @sandorkligan2208 Рік тому

    Всё получилось, спасибо! Лучшие курсы React Redux

  • @user-fq9is5kg1v
    @user-fq9is5kg1v 3 роки тому

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

  • @muhamadboboev4223
    @muhamadboboev4223 Рік тому

    Самый лучший курс по react ! Спасибо Димыч!

  • @user-tp4fn2dl9w
    @user-tp4fn2dl9w 4 роки тому

    Бесспорно лайк 🔥 лучший курс react redux 🤘

  • @adrenalineMSC
    @adrenalineMSC 4 роки тому +9

    Теория о программистах и их котах подтверждается, не может быть хороший программист и без кота : )
    Отличные курсы, друг, ты лучший в своём роде!

    • @shsh01212
      @shsh01212 3 роки тому +1

      блииин, люблю только собак(((

  • @technical777
    @technical777 4 роки тому +2

    Димыч спасибо за видосы !
    Обнял, поднял, поставил ! -> Принял, понял, побежал !
    Бомбим дальше ! 💻

  • @egorepir
    @egorepir 3 роки тому

    Рад что есть такие люди как ты Димыч, летим

  • @user-qs7ij8df4q
    @user-qs7ij8df4q 3 роки тому

    Все супер, едем дальше!
    Preloader, loader-gif, isFetching

  • @derrylsshowhh3249
    @derrylsshowhh3249 2 роки тому +1

    Мега полезный ролик!Спасибо)

  • @is_eliseeva
    @is_eliseeva Рік тому +1

    спасибо за урок! лечу дальше! 17-02-2023

  • @kitralin9987
    @kitralin9987 3 роки тому

    крутой урок, в начале урока написал сам как думал - заработало а потом уже подрефакторил как у димыча, так просто меньше кода)) Спасибо за труд.

  • @user-tr8hr4xm1l
    @user-tr8hr4xm1l 5 років тому +2

    Крутой курс!

  • @mrmicolka
    @mrmicolka 4 роки тому +2

    Тянем дальше. Спасибо)

  • @MrVagula
    @MrVagula 3 роки тому

    Димыч, спасибо. За этот нестандартный формат твои подписчики тебя и ценят. Все законспектировано и понятно, двигаем дальше.
    Ключевые слова: Preloader, loader-gif, isFetching indication

  • @slavapush
    @slavapush 4 роки тому +5

    Отлично соображаешь! Я бы значительно дольше парился с ошибкой подгрузки лоадера

  • @user-yj9wf7lb3j
    @user-yj9wf7lb3j 4 роки тому

    еще до начала этого урока решил потренироваться и написал обработку пагинации. теперь выводится не 215 кнопок пагинации, а текущая +/- 3. Спасибо за этот курс!! Качается не только знание React и Redux, но и базовый JS, AJAX, а так же архитектурное мышление(оно мне кажется даже важнее конкретных фреймворков и библиотек)

  • @GrourDenis
    @GrourDenis 2 роки тому

    Кайфово, позитивно...!
    React JS - Preloader, loader-gif, isFetching indication

  • @user-km8kb3xj1p
    @user-km8kb3xj1p 2 роки тому

    Preloader, loader-gif, isFetching indication!
    Спасибо за урок!

  • @kub1k
    @kub1k 4 роки тому +1

    Спасибо за курс

  • @nachalponimat
    @nachalponimat 4 роки тому +1

    Спасибо!
    React JS, Preloader, loader-gif, isFetching indication

  • @cikada3398
    @cikada3398 5 років тому +2

    Супер урок как всегда:) Но можешь говорить в уроках что мы в итоге не будем использовать, а что будем) К примеру использовали style.module, а будем использовать style-components:)

  • @maxkos6184
    @maxkos6184 4 роки тому

    Какой позитивный тьютор Димыч! Я последний раз такое удовольствие получал когда смотрел сериал Mr Robot... Но там я просто смотрел и узнавал много интересных фишек, а тут я еще и пишу код!!! Классный React сериал получается.... Спасибо за видео, за подачу материала, за старания, вообще за идею такую интересную - учить Реакт и пилить проект!!!

  • @gameroom6690
    @gameroom6690 4 роки тому +1

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

  • @user-yx7in9nl1d
    @user-yx7in9nl1d 4 роки тому

    Спасибо за огромную работу!!!

  • @Nazar5545
    @Nazar5545 4 роки тому +1

    Незаметно для себя стал рекламировать друзьям твой канал! Круто!) Спасибо..

    • @ITKAMASUTRA
      @ITKAMASUTRA  4 роки тому

      Пожалуйста и спасибо)

  • @user-hg6im5cg2i
    @user-hg6im5cg2i Рік тому

    Спасибо Дима!!!Летим дальше

  • @Mykhailo_Vdovychenko
    @Mykhailo_Vdovychenko 3 роки тому

    Афигенный урок! СПАСИБО =)

  • @vladislavche7603
    @vladislavche7603 2 роки тому

    Спасибо за напутственные слова и мотивацию

  • @wild_wizards
    @wild_wizards 2 роки тому

    Было полезно! Лайк, едем дальше! 😀

  • @tim7703
    @tim7703 Рік тому

    Спасибо за твой труд, Димыч :)
    Иду дальше :)

  • @fargutvest
    @fargutvest 4 роки тому +2

    Wait indicator круто, спасибо! React Redux Preloader

  • @user-tf1rn7qq2p
    @user-tf1rn7qq2p 3 роки тому

    Большое реактивное спасибо, Димыч!

  • @Executioner2126
    @Executioner2126 2 роки тому

    У меня на работе сайт есть, и я разговаривал с проектором этого сайта, и прям почувствовал свои знания, я смог доказать что на react сайт будет быстрей работать) Спасибо Димыч)))

  • @zuzoki864
    @zuzoki864 Рік тому

    Братан, спасибо тебе большое. Ты лучший Preloader, loader-gif, isFetching indication

  • @emranakalaev8689
    @emranakalaev8689 2 роки тому

    Перед просмотром нового видео сначала лайк и коммент)
    вжух вжух самураи!

  • @user-fy2gq8ev2b
    @user-fy2gq8ev2b 3 роки тому

    Спасибо Димыч!! Летим дальше!!!

  • @AndreyShevchenko-yd3tg
    @AndreyShevchenko-yd3tg 4 роки тому +2

    Димыч, красавчик. Бомбим Реакт и только Реакт!!

  • @blind_ron1n
    @blind_ron1n 3 роки тому

    Сделал лоадер самостоятельно ещё перед предыдущим уроком, конечно с соблюдением всех принципов и архитектур, как знал)) Кстати на Loader.io ты просто выбрал платный экземпляр, там также много бесплатных, спасибо за уроки!

  • @user-yq4cs2fe3u
    @user-yq4cs2fe3u Рік тому

    Большое спасибо за урок! )