Тёмный

React JS #11 Методы жизненного цикла (Lifecycle methods) 

webDev
Подписаться 118 тыс.
Просмотров 16 тыс.
50% 1

#YauhenK #webDev #React #Redux #ReactRouter
Всех приветствую в курсе «React JS».
В данном видео-курсе мы с вами рассмотрим базовые понятия библиотеки React JS. Научимся создавать свои компоненты приложения. Разберёмся, как подключается и как работает React Router и с его помощью напишем простое одностраничное приложение. А так же рассмотрим такой подход контроля данных в приложении, как Redux.
Дополнительные темы, которые мы рассмотрим:
Валидация пропсов с помощью библиотеки PropTypes
Работа с реальным API
Создание роутинга одностраничного приложения с помощью React Router
Работа с менеджером состояний Redux
✒ Репозиторий курса:
✔ GitHub: github.com/Yau...
✒ Полезные курсы на канале:
✔ ES6: • ES6
✒ Используемые ресурсы и инструменты:
✔ Atom (Редактор кода): atom.io/
✔ Create React App (рабочее окружение): github.com/fac...
✔ React Developer Tools (расширение для браузера): chrome.google....
✔ Redux Devtools (расширение для браузера): chrome.google....
✔ Redux Devtools (репозиторий): github.com/zal...
✔ Fake online REST API (моковый API): jsonplaceholde...
✔ Hacker News (ресурс): hn.algolia.com...
✔ Hacker News (описание API): hn.algolia.com...
✔ Redux-LocalStorage-Simple (репозиторий): www.npmjs.com/...
✒ Полезные ссылки:
✔ React (документация): reactjs.org/do...
✔ Redux (документация): redux.js.org/
✔ React анимации (документация): reactcommunity...
✔ Redux (документация): redux.js.org/
✔ React lifecycle methods +16.3 (ресурс со ссылками): projects.wojtek...
✔ React lifecycle methods less 16.3 (картинка): webjustify.com...
✔ React Transition Group (документация): reactcommunity...
✔ React Router (репозиторий): github.com/Rea...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R...
✒ Автор курса:
✔ RU-vid: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenK...
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/Yau...
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/Yau...

Опубликовано:

 

3 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 55   
@olehrubchinskiy892
@olehrubchinskiy892 5 лет назад
Самый, подчеркиваю, самый лучший по качеству и уровню преподнесения информации канал по реакту на рус Ютубе! Огромное спасибо тебе за твой труд!
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Спасибо за такой отзыв, приятно!)
@dilyafruzik
@dilyafruzik 2 года назад
В очередной раз благодарю за доходчивое донесение сложной для понимания новичками информации и за Ваш труд. Вы - один из лучших из 2-х-3-х русскоговорящих IT-блогеров (ИМХО) на Ютубе.
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
Спасибо огромное за отзыв
@yusufrahimov9160
@yusufrahimov9160 Год назад
Этот видеоурок был таким полезным! 🤗 Теперь я чувствую, что я знаю гораздо больше о теме, чем раньше. 🧠
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Спасибо за отзыв
@frankielamps2474
@frankielamps2474 5 лет назад
Классно у тебя получается обьяснять, спасибо
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Спасибо большое!
@KirillBabichev
@KirillBabichev 5 лет назад
Спасибо, очень полезный урок.
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Пожалуйста
@Ramosok
@Ramosok 2 года назад
Спасибо за твой труд.
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
Спасибо за отзыв
@liorbraginsky7654
@liorbraginsky7654 5 лет назад
Люди, которые ставят на ваши видео дизлайки(и хотя бы не объясняют почему) - непременно будут гореть в отдельных, самых горячих котлах :) спасибо за уроки, надеюсь это продлиться дольше, чем пара курсов, потому как у вас явно это получается на ура)
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Спасибо большое за поддержку!
@ШураБосс
@ШураБосс 5 лет назад
Отличное видео)!
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Спасибо
@YuriiKratser
@YuriiKratser 5 лет назад
хорошее видео, но хочется с практикой)
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Хм, честно говоря для этой темы было немного проблематично придумать именно наглдную практику).
@РоманДиохтиовский
А почему метода componentDidCatch нет на новой версии схемы?
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Ну потому что не смотря на то что это тоже метод жизненного цикла, он носит всё-таки больше отладочный характер. Или характер перехвата исключений. Я бы так это объяснил
@KomarovPavel-if8ud
@KomarovPavel-if8ud 3 года назад
Есть такое слово: ДЕмонтирование. Куда лучше РАЗмонтирования)))
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Да, нужно запомнить)
@alexriddle2744
@alexriddle2744 5 лет назад
Здравствуйте, отличные уроки, спасибо за ваш труд. Подскажите пожалуйста, является ли антипатерном следующая часть кода state = { foo: this.props.bar } Могу ли я устанавливать в стейт компонента пропсы? Вопрос к тому, что в airbnb styleguide не рекомендую так делать, но если мне нужны пропсы в стейте, могу ли я так поступить? Спасибо
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Ну я бы не сказал что это прям совсем антипаттерн. Иногда такое сам использовал. Но вообще лучше брать метод жизненного цикла getDerivedStateFromProps
@alexriddle2744
@alexriddle2744 5 лет назад
@@YauhenKavalchuk спасибо за ответ, буду иметь ввиду
@freeman2607
@freeman2607 4 года назад
Как всегда все на высоте!) Подскажите, в каком месте лучше всего делать асинхронные запросы на сторонние API, если эти данные должны стать данными для первого рендеринга. В последствии повторные запросы будут обновлять такие данные - но что делать с первым запросом? Как такое лучше всего делать?
@vladimirrabtsun
@vladimirrabtsun 5 лет назад
Спасибо
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Пожалуйста!
@yuragorchuk8266
@yuragorchuk8266 4 года назад
Информация достаточно ценная. Единственный минус -- нужно на практике увидеть что бы закрепить материал.
@YauhenKavalchuk
@YauhenKavalchuk 4 года назад
На канале есть плейлист по react компонентам и плейлист react videocast - там практических примеров много)
@tanyamironchik2964
@tanyamironchik2964 5 лет назад
Ссылка на React lifecycle methods less 16.3 не работает, к сожалению...пересмотрела второй раз, стало понятнее) Спасибо!)
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Обновил ссылку!) Спасибо!
@olezhonnv3215
@olezhonnv3215 3 года назад
Во намудрили! А главное, потом еще и задепрекейтили часть, потому что наломались на свои же косяки! Реально, хайпофреймворк - мне с ним работать не особо нравится. Но клиент хочет - рынок требует. Поэтому приходится разбираться. Напряжно то, что оно завтра все устареет - эти хаписты придумают новый мегафреймворк, и все на хайпе побегут туда.
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
В новой версии с Хуками всё проще
@piligr1m_ua_
@piligr1m_ua_ 4 года назад
без курсора сложно...ну как так можно было???
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Учёл для будущих курсов
@anatoliitytarenko4926
@anatoliitytarenko4926 5 лет назад
Весь текст с статьи на хабре за 2016 год, и таблицы тоже. ЗРС контент я так тоже могу
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Пожалуйста, делайте!
@sergeyaleksandrov6289
@sergeyaleksandrov6289 5 лет назад
Как часто это используется на практике?
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Методы жизненного цикла используются довольно часто, особенно когда нужно работать с запросами
@ГришаТкач-у5д
@ГришаТкач-у5д 4 года назад
@@YauhenKavalchuk Здравствуйте! у меня к Вам вопрос: у меня компонент должен строится на основе данных, полученных с сервера. Тогда где лучше сделать запрос?
@МихаилДрик-ж6в
@МихаилДрик-ж6в 4 года назад
Здравствуйте, искал информацию про почему нужно делать запросы к серверу в DidMount, но так и не разобрался, может Вы знаете почему так?
@YauhenKavalchuk
@YauhenKavalchuk 4 года назад
Ох, подробный ответ - очень большой. Если кратко, то это самый лучший метод, куда забрасывается запрос, что бы и не перерендеривать несколько раз и страница не отрисовалась пустой
@Мишаня-ю9б
@Мишаня-ю9б 2 года назад
​@@YauhenKavalchuk Это наверное связано с синхронной работой componentDidMount()​?
@jenyaspace
@jenyaspace 5 лет назад
получается что что Will это все устаревшее
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Да, это уже устарело. Но использовать можно с приставкой UNSAFE_, хотя крайне не желательно.
@iGotton
@iGotton 5 лет назад
Ссылок на изображения нет.
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Есть, в разделе документация
@iGotton
@iGotton 5 лет назад
@@YauhenKavalchuk неочевидное место. Стиль одинаковый этого описания под каждым роликом, уникальные ссылки теряются.
@МаксимНырков-у6г
без примеров тяжко для восприятия
@YauhenKavalchuk
@YauhenKavalchuk 5 лет назад
Ничего толкового под каждый из методов придумать не смог
@БольшойБрат-з4р
хоть бы мышку использовали для указания о чем говорите. Ото каша какая то получается. Ваше не понятный урок. о чем? зачем? почему?
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Учёл этот недостаток в будущих курсах. Больше курсор ее прячу
@murcha5899
@murcha5899 2 года назад
скучно. по бумажке
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
А лучше было бы чтобы я лил воду, использовал слова паразиты и глубоко дышал в микрофон, когда что-то забывал, или сбивался?
Далее
React JS #12 Ссылки (Refs)
9:47
Просмотров 18 тыс.
Китайка нашла Метиорит😂😆
00:21
React JS #15 Контекст (React Context)
11:00
Просмотров 29 тыс.
React JS #14 Портал (React Portal)
8:35
Просмотров 16 тыс.