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

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

[@NJenyaBMW]

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

[@stanislavndreev2831]

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

[@АндрейКомаров-т8х]

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

[@ИванБорисов-б1ж]

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

[@ДмитроПасічнюк]

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

[@sabatr1989]

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

[@Quentinrei]

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

[@dxnght]

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

[@АннаЛелеко-ы3ю]

Намагаюсь працювати таким чином - прослухала вступ від Дімича, наче зрозуміла, що він хоче далі показати, зупиняю відео і роблю завдання самостійно, якщо не виходить - продовжую дивитись...На цьому ролику тупанула - назвала метод і значення в стейті однаково (isFetching) і півгодини шукала, чому в мене не пропадає прелоадер, адже по алгоритму все зробила так само))) А взагалі підтримаю всіх - курс просто надзвичайний. Важко не зрозуміти те, що прямо розжовується і мало не в рот кладеться

[@olegzidane7099]

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

[@AndreiLaurou]

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

[@pashabezk]

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

[@rostikoffchannel]

не говори 100%

[@СафроноваМарина-л9э]

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

[@ITKAMASUTRA]

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

[@grigodoes]

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

[@Macheten]

Как же я намучался с экшн креатором) При копировании я забыл поменять type, еле нашёл причину бага. Буду теперь внимательнее писать) Спасибо, Димыч! Всё как всегда понятно, бомбим дальше!

[@SpeedGodQ]

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

[@AliaksandrAndreyeu]

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

[@trojdenid9580]

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

[@gonqii]

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

[@tevi6667]

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

[@PavelChupryna]

Благодарю за курс! Летим дальше!

[@volodymyrsus]

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

[@vladislavhirsa9094]

Я сделал с помощью библиотеки 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 });

[@bystryisokol1546]

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

[@АндрейГонин]

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

[@ЛусінеАтаджанян]

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

[@is_eliseeva]

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

[@arthuru4I]

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

[@kaysar787]

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

[@artempavlenko5147]

Kaysar 😂

[@lemuriecnoname]

Тоже улыбнуло

[@qwertypoiu1337]

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

[@adrenalineMSC]

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

[@shsh01212]

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

[@mystexx]

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

[@Titanidze17]

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

[@theWorldIsMultivariate]

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

[@АртёмРусалеев-ж2ь]

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

[@КириллВычужанин]

isFetching, он в пропсах сидит и мы такие зае... и мы такие... улыбнуло) Огромное спасибо за курс

[@qwerty12377789]

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

[@is_eliseeva]

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

[@slavapush]

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

[@ГеннадийПетров-ж4ы]

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

[@ДмитрийКибешев]

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

[@denkodatskyi3381]

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

[@gameroom6690]

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

[@n0escape]

Прошел и этот урок, всегда любил на сайте пытаться добавлять прелоадеры, но не знал как правильно их делать. Интересно и спасибо. Совет всем кто будет проходить и проходит курс: всегда внимательно следите куда вы отправляете данные ( неважно, из пропса или из сервера ), ибо я потратил минут 30 на поиск того, почему не отправляется параметр isFetching, а оказалось, что просто забіл добавить его в mapStateToProps

[@tazalov]

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

[@n0escape]

@@tazalov к сожалению я не настолько крут, чтобы еще и тайпскрипт юзать

[@ctumyji9737]

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

[@egorepir]

Блин так намучился с импортом картинки , она почему-то не отображалась сидел тыкал, и так импортировал разными способами. Перебилдил проект все заработало , круто. Спасибо за видео, очень много интересного узнаю

[@АрсенОсипов-ж6щ]

State, Store, Dispatch ,Connect, Action, Route, Provider, Reducer, mapStateToProps, mapDispatchToProps, {...state}, Props React Redux Практика JavaScript курс React Веб разработка разметка Спасибо за урок :)

[@Lok1goD]

Блин) Пол часа пытался разобраться что за ошибка в консоли, не могу достучатся до вашего API , оказалось, что именно сегодня вы решили переехать на новый сервер)) "Переносим сервис на новый сервер. В среду всё заработает" пишу вам из октября 2022го )) Курс огонь)

[@rostikoffchannel]

не знаю все работает....

[@IgniosTyumen]

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

[@Executioner2126]

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

[@StanislavObrazcoff]

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

[@MaxKievSky]

Кода на 34м уроке меня взяли на ИС (3 недели назад), спрашивали про реакат но не много, скажем так, вопросы были разбиты гдето так 70% JS 20% React-redux (основы) и по организации процесса - гит, верстка, вебпак, и прочее... вобщем что надо - thid. bind map, OOP. принципи редакса и понимание верстки. + гитхаб, показать надо пример БЕ|М, кроме примера соцсети еще чтото отдельно по реакту. + codewars около 50 задач

[@MikhailKuklenkov]

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

[@alexroman3120]

Кот тоже учит React, Redux. Кот-самурай вжух вжух вжух. Димыч топыч!)))

[@БорисЦ-ю8ы]

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

[@andreiribac6284]

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

[@tar7sha]

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

[@АлексейДолматов-м3я]

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

[@grindezer9578]

Чтобы нормально загружался, лучше задать div с background-image и ссылкой на наш svg, видимо стили в приоритете грузятся, работает как задумано

[@РоманБобков-ж7ы]

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

[@Noname-di9hc]

Шел 6-ой день и 57 лекция. В голове без остановки играет "Реакт, реакт знать будешь круто....", закрываю глаза и вижу только код, а тут еще и смотрел не залогинившись на KZbin. Ох, Димыч, подкинул ты работенки, теперь надо за прошлые видео проставить лайки. Смотрю на 1.75х, полет нормальный.

[@olegzidane7099]

за 6 дней 57 уроков, и не потерялся по коду???

[@Noname-di9hc]

@@olegzidane7099 я изучал Angular 1, Angular 2 и могу сказать, что реакт мне кажется самым доступным из фреймворков.

[@olegzidane7099]

@@Noname-di9hc ааа, ну тогда да

[@sergeyistominov5880]

плюсик для лучшего ранжирования в react-комьюнити =)

[@ЯДИграет]

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

[@mariia6820]

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

[@ДенисБеспалов-п8щ]

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

[@konstantinkuksov914]

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

[@technical777]

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

[@ShoolMinecraft]

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

[@mrmicolka]

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

[@alekseytyapkin5197]

Ха-ха, как только прошел твой урок постраничного вывода, сделал, чтобы список пользователей подгружался при скролле блока и реализовал прелоадер, и вот ты рассказываешь про это, материал заходит на ура! Спасибо тебе!

[@ITKAMASUTRA]

Супер, красавчик!

[@Aleks-lk1et]

Спасибо! 2022! в 23:00 все стало летать, видно прошел часы-пик на API сервере

[@O_Shpak]

Я не знаю у кого как но у меня мозги начали понимать только сейчас,сижу я и думаю так вот тогда это так надо было ,а я не понимала ,даже легкие ошибки начала понимать сама,не импортировала АС так ошибка показала я пошла импортировала , лично для меня это маленькая моя победа🪄,может для кого-то более опытного и более легко обучаемого мои слова покажутся смешними пожалуйста не смейтесь😊😊😊

[@Миралем-у8ц]

как успехи спустя месяц?)

[@O_Shpak]

@@Миралем-у8ц медленно я закинула немножко очень много роботы на основной работе. Как раз думаю возвращается я сейчас на 61 уроке

[@O_Shpak]

@@Миралем-у8ц а у вас какие успехи?

[@Миралем-у8ц]

@@O_Shpak понимаю, а ты просто для себя учишь или нацелена сменить профессию? или область если ты и так программист там:)

[@Миралем-у8ц]

@@O_Shpak я пару недель только учу реакт вот, сейчас стажируюсь в компании, и чтобы пройти собес, нужен фреймворк, а я только на нативном js писал раньше, вот и приходится учить тут)

[@kitralin9987]

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

[@andreyantonovich379]

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

[@blind_ron1n]

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

[@Nazar5545]

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

[@ITKAMASUTRA]

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

[@dimitriitkach7697]

spasibo za urok - React JS - пример Preloader, loader-gif, isFetching indication

[@mykhailostepanishchev6472]

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

[@Mitya-b4p]

2022 условный рендеринг лучший курс по React + Redux

[@ИгорьГладкий-и8ь]

в конце зачетно сказал про реакт.. ребята все внимание на Реакт! ты силач мужик! спасибо тебе искренне

[@botamadimova1316]

как можно ставить дизлайк?!!! Если ты чего-то не понял, это не значит, что видео заслуживает дизлайка. Давайте уважать труд Димыча! курс выложен бесплатно и достоин БИГ ЛАЙКА! Ребята, присоединяйтесь, давайте залайкаем :-)

[@derrylsshowhh3249]

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

[@ivanmiarkulau8320]

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

[@ГалинаКузнецова-н1и]

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

[@chtotutunas432]

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

[@ИльяМаненков-з9е]

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

[@shamilsalakhutdinov5519]

Спасибо за урок! React redux js preloader

[@nachalponimat]

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

[@sandorkligan2208]

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

[@matthewperry8233]

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

[@АндрейФилимончик-ю9у]

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

[@egorepir]

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

[@GrourDenis]

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

[@someChicoRy]

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

[@МаксимНырков-у6г]

КАБЗДА, ДИМЫЧ. ГОД ПРОШЁЛ, А ТВОИ ВИДОСЫ ДО СИХ ПОР ВЫРУЧАЮТ!!!! Тупанул что-то с прелоадером, у тебя ответ нашёл на свою ошибку! Ай , красавчик! Спасибо!!!!

[@ИльяЮров]

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

[@AbaiIlyasov]

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

[@emranakalaev8689]

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

[@oleksiimuliar4123]

20:10 - Картинка как бы появляется, но она ничего не отображает, потому что.... почему) 😂👏

[@ИванДанилов-д5р]

Наконец то спустя месяц ...наверное ....я прошел этот урок. Времени вообще не хватает( Уволюсь с работы и буду заново проходить весь курс, чтоб от зубов отскакивало. Пока учишь одно, забывается другое.

[@dmitrylebedev2691]

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

[@rostikoffchannel]

уволился?

[@ИванДанилов-д5р]

@@rostikoffchannel да

[@MegaVaNushka]

хоспаде, неужели небольшая разгрузочка после предыдущего урока)

[@romanpol3336]

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

[@fargutvest]

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