React JS #15 Контекст (React Context)

#YauhenK #webDev #React #Redux #ReactRouter
Всех приветствую в курсе «React JS».
В данном видео-курсе мы с вами рассмотрим базовые понятия библиотеки React JS. Научимся создавать свои компоненты приложения. Разберёмся, как подключается и как работает React Router и с его помощью напишем простое одностраничное приложение. А так же рассмотрим такой подход контроля данных в приложении, как Redux.
Дополнительные темы, которые мы рассмотрим:
- Валидация пропсов с помощью библиотеки PropTypes
- Работа с реальным API
- Создание роутинга одностраничного приложения с помощью React Router
- Работа с менеджером состояний Redux
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/re...
✒ Полезные курсы на канале:
✔ ES6: • ES6
✒ Используемые ресурсы и инструменты:
✔ Atom (Редактор кода): atom.io/
✔ Create React App (рабочее окружение): github.com/facebook/create-re...
✔ React Developer Tools (расширение для браузера): chrome.google.com/webstore/de...
✔ Redux Devtools (расширение для браузера): chrome.google.com/webstore/de...
✔ Redux Devtools (репозиторий): github.com/zalmoxisus/redux-d...
✔ Fake online REST API (моковый API): jsonplaceholder.typicode.com/
✔ Hacker News (ресурс): hn.algolia.com/?query=&sort=b...
✔ Hacker News (описание API): hn.algolia.com/api
✔ Redux-LocalStorage-Simple (репозиторий): www.npmjs.com/package/redux-l...
✒ Полезные ссылки:
✔ React (документация): reactjs.org/docs/getting-star...
✔ Redux (документация): redux.js.org/
✔ React анимации (документация): reactcommunity.org/react-tran...
✔ Redux (документация): redux.js.org/
✔ React lifecycle methods +16.3 (ресурс со ссылками): projects.wojtekmaj.pl/react-li...
✔ React lifecycle methods less 16.3 (картинка): webjustify.com/wp-content/upl...
✔ React Transition Group (документация): reactcommunity.org/react-tran...
✔ React Router (репозиторий): github.com/ReactTraining/reac...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZbin: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

[@stickpunx9344]

Четкие уроки! Круто что рассказываете все лайфхаки, которые не объясняют другие)

[@YauhenKavalchuk]

Спасибо большое за отзыв!

[@NazarMalyy]

Спасибо! Четко и лаконично! Straight to the point!!!! Respect!

[@YauhenKavalchuk]

Спасибо за отзыв!)

[@aysommer]

Отличное объяснение, спасибо.

[@YauhenKavalchuk]

Пожалуйста

[@Alex_Delina]

спасибо! все круто объяснил)

[@YauhenKavalchuk]

Пожалуйста

[@diyaudioby4836]

Этот материал здорово помог понять, что есть контекст и как его в реакте юзать )

[@YauhenKavalchuk]

👍

[@mokkamokka4097]

Снова огонь, спасибо!

[@YauhenKavalchuk]

Пожалуйста!)

[@user-yg8nh2ek6w]

Серый Мокко)

[@azimkhanabdulsatarov9887]

Спасибо за урок. Все четко и понятно!

[@YauhenKavalchuk]

Всегда пожалуйста

[@dmitryivanov3200]

Супер!!! Молодец!

[@YauhenKavalchuk]

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

[@TORREScs]

Спасибо! отлично

[@YauhenKavalchuk]

Пожалуйста!

[@maxet2374]

Этот канал - просто о сложном

[@YauhenKavalchuk]

👍

[@yusufrahimov9160]

Я очень благодарен за этот видеоурок. 🤝 Он был настолько понятным и легким в усвоении. 🧩

[@YauhenKavalchuk]

Пожалуйста

[@rolton6307]

наконец-то я нашёл норм видос по useContext, спасибо

[@YauhenKavalchuk]

Пожалуйста

[@marinat201]

Отличный пример 👍

[@YauhenKavalchuk]

Спасибо

[@voodooshtv7883]

отличное объяснение !

[@YauhenKavalchuk]

Спасибо

[@OlegMemer]

Спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@rasim.ismayilov]

Дай вам Бог здоровья добрый человек)

[@YauhenKavalchuk]

Спасибо

[@ultraduck100]

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

[@YauhenKavalchuk]

Приятно слышать)

[@Zluka366]

спасибо!

[@YauhenKavalchuk]

Пожалуйста!

[@suvacodemorcego]

Я бразилец и не могу писать на португальском, но ваше видео мне помогло !!! Спасибо !!! Sou brasileiro e nao consegui conteudo em portugues, mas seu video conseguiu me ajudar !!! Obrigado !!!

[@YauhenKavalchuk]

It is nice to hear it. I hope you know English!) Thanks!

[@radist126]

Блин! Это лучший урок по контексту. Кучу других пересмотрел и нихрена не понял. Здесь на пальцах!

[@YauhenKavalchuk]

Спасибо

[@chessclub92]

Спасибо ,

[@YauhenKavalchuk]

Пожалуйста

[@alex330k47]

Все круто, понятно и методично. По моему скромному субъективному мнению улучшить ролики можно убрав из них слова о представлении автора, имя и фамилию можно просто выводить с низу аккуратной плашкой(как это делают кореспонденты новостей) пока автор рассказывает о теме видео, имхо.

[@YauhenKavalchuk]

Спасибо большое за подробный отзыв!

[@AlBert-ks4xq]

Отлично объяснил. Минимум воды

[@YauhenKavalchuk]

Спасибо

[@SageMindWhisper]

Штука прикольная, но на практике юзается не очень часто. В частности из-за того, что все привыкли к редаксу

[@YauhenKavalchuk]

Инфа 100%)))

[@SageMindWhisper]

=)))

[@user-vv6jx8qg4v]

Редакс очень громозкий.

[@maratgumerov2840]

Здравствуйте. Поясните пожалуйста (на счетчике видео 6:54) - Если мы в 32й строке value присваиваем стрингу. То почему мы в строке 21 используем title а не value... и почему. Спасибо

[@YauhenKavalchuk]

Потому что внутри consumer в функции, я переопределил имя с value на title)

[@maratgumerov2840]

@@YauhenKavalchuk а где про этот момент можно найти информацию. Может где то в доках?

[@jamjam3337]

👍

[@YauhenKavalchuk]

👍

[@user-vi1jf3xb3e]

Идеально подойдет для вхождения в тему Context, но потом лучше почитать официальную документацию в React тк многое опущено.

[@YauhenKavalchuk]

В уроках, к сожалению, всё не расскажешь...

[@user-sy2oq4vd1n]

Подскажите пожалуйста, если мы присваиваем результат вызова функции createContext в переменную TitleContext и далее используем в компонентах TitleContext.Provider и TitleContext.Consumer, то как быть с модульностью? Как получить доступ к переменной TitleContext, если вложенные компоненты расположены в разных файлах? Нужно создать эту переменную в отдельном файле, а потом импортировать её в нужные файлы?

[@YauhenKavalchuk]

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

[@user-sy2oq4vd1n]

@@YauhenKavalchuk Спасибо! :)

[@YauhenKavalchuk]

Пожалуйста)

[@arturrudenko3673]

А как возможно предавать методы компонента-родителя дальше по дереву через контекст? У меня получилось предать метод, добавив вот такое поле в объект контекста 'clickHandler: () => this.handleClick.call()'. Хотелось бы узнать, есть ли альтернативная запись для этого

[@user-qj2yg1rn3j]

ну это конечно прикольно. Я бы сказал в самом начале пути меня это прокидывание пропсов через компоненты сильно бесило. Отличная замена)

[@YauhenKavalchuk]

Благодаря этой идее, на некоторых проектах начинают отказываться от Redux

[@kefyru]

Во первых, БОЛЬШОЕ ЧЕЛОВЕЧЕСКОЕ СПАСИБО за твои уроки, очень понятно и доходчиво... На них освоил js с нуля, затем react, mobx... пишу вот приложеньку на react-native... Есть вопросец: использую react.context (static contextType = ... ; const context = this.context...). Все замечательно работает, разобрался (с твоей помощью), но постоянно мозолит глаза (в WebStorm) - this.context перечеркнуто и подсвечивает "Deprecated symbol used...". Пакеты: react@16.8.3, @types/react@16.8.22... Уже весь гугл перешерстил - ничего не нашел. Жить конечно можно, но раздражает. Если есть идеи как победить буду спасибо)

[@YauhenKavalchuk]

Спасибо за отзыв. Видимо ругается на то, что вы используете устаревший синтаксис context. На канале есть плейлист react videocast там я рассказываю о новом синтаксисе контекста. Если проще, то теперь используется статическое свойство

[@kefyru]

@@YauhenKavalchuk Пересмотрел видеокаст... Я так и делаю: в своем классе добавляю [static contextType = myContext;] а в рендере [const _context = this.context;]. Работать работает, контекст передается и в нем лежит именно то что нужно, но в редакторе (WebStorm) подсвечивает что deprecated... Может я как то неправильно typescript настроил? Или чего то не понимаю...

[@YauhenKavalchuk]

Тогда, возможно, проблемы в настройках

[@user-hw2mo6ty2n]

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

[@YauhenKavalchuk]

Ну в целом, да. По ключевой роли - очень похоже. Хотя думаю, для действительно больших приложений не применимо.

[@dimagolysh]

А если, например, на втором уровне тоже пробрасывается контекст, он не перезапишется? Как его использовать правильно? Тоже врапнуть в ещё один контекст консумер?

[@YauhenKavalchuk]

А зачем вам нужно 2 контекста? Почему не определить все нужные данные в одном? Подход, как в Redux - стор для хранения всего

[@jenyaspace]

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

[@YauhenKavalchuk]

Нет, данные всегда идут сверху вниз, т.е. от родителя к ребёнку. Это однонаправленный поток данных, точно так же, как и в Redux.

[@jenyaspace]

@@YauhenKavalchuk Но как тогда можно что-то сделать в родителе если что-то меняется в ребенке

[@YauhenKavalchuk]

Для этого есть или стейт, или контекст. Эти данные вы пробрасываете в ребёнка в виде пропсов, или контекста. Там их меняете, родитель видит изменения в объекте за которым он наблюдает и обновляется.

[@anastasiiam5429]

Спасибо за видео! А можно через этот метод передавать данные от детей к родителю?

[@YauhenKavalchuk]

Можно. Фактически, это нативная реализация Redux

[@anastasiiam5429]

@@YauhenKavalchuk Можно реализовать передачу на прямую или всеравно использовать коллбек?

[@ineptDev]

Функция внутри TitleContext.Consumer выступает как компонент внутри, без имени, или как? Потому как здесь нету вызова этой анонимной функции... Или я чего-то недопонял?

[@YauhenKavalchuk]

На текущий момент синтаксис "контекста" чуть упростился. Можете посмотреть плейлист React podcast, там есть пример

[@ineptDev]

@@YauhenKavalchuk окей, спасибо.

[@jenyaspace]

что означает синтаксис {title => {title}}? а как можно сделать через контекст если надо от родителя к ребенку просто передать булевое значение что типа ребенок используется в этом родителе или нет?

[@YauhenKavalchuk]

Это синтаксис стрелочной функции: () => {}; Если передать от родителя к ребёнку, то контекст вам вообще не нужен, достаточно пропсов. Контекст используется, когда значениея нужно передавать через несколько уровней, минуя эти уровни.

[@jenyaspace]

@@YauhenKavalchuk Спасибо, так в том то и дело что компонент содержит еще много уровней к ребенку, поэтому не хотелось бы использовать пропсы

[@YauhenKavalchuk]

Я понял, просто звучало по другому, но не суть. Попробуйте повторить пример как в виде, просто заменить значение со строчного на булевое.

[@jenyaspace]

Но что делать если компоненты находятся в разных файлах, родитель и ребенок, как тогда настраивать контекст?

[@YauhenKavalchuk]

Подключать библиотеку для контроля за состояние Redux, MobX. Или всё-равно находить родителя и оборачивать компонент

[@iGotton]

+

[@singlebw4065]

Я вообще не понял прикола существования createContext. С таким же успехом можно создать файл storeContext создать там обычный объект, импортировать его в index положить в него нужные данные, импортировать в нужный компонент и получить эти данные. Работает в точности так же. При всём при этом оборачивать ничего не нужно ни в какие Provider и Consumer. А создать в отдельном файле чтоб не было подключений import export в обе стороны. А ещё использовав Consumer мы не имеем доступа к значениям выше методы render в классах, приходиться использовать специальное свойство класса static contextType = Context. после можем обращаться к объекту context. Но как я и сказал обычный объект это спокойно решает.

[@p_levin]

Разве нельзя импорт сделать с передачей необходимых state или методов?, прослушка событий? Это все выглядит довольно грязно и это норма в React?, где красота)?

[@YauhenKavalchuk]

Контекст - это новое API, которое было добавлено. С версией 16.6 синтаксис немного упростился - нету лишних обёрток. А вообще импорт стейта и методов - это не по канонам React, скажем так). Но в целом API очень полезное, если вы работали с Реакт длительно время, то оно действительно помогает решить Props Drilling, а этого, раньше, и не хватало)

[@sia4281]

useContext

[@YauhenKavalchuk]

👍

[@olezhonnv3215]

А что мешает создать банальный объект и в него положить данные? А там, где нужно, эти данные из объекта считать. По сути, в этом уроке показано сохранение данных в контекст через Провайдер, и извлечение данных через Консумер. Такой себе наворот поверх обычного объекта, который может то же самое. Но тут еще провайдер, консумер, функция для извлечения. Ну мудрят хлопцы - им реально нечем там заняться в Фейсбуке, или где там тот Реакт делают :-)

[@olezhonnv3215]

Скорее всего, есть юзекейсы, где нужен именно такой контекст, а простой объект не подойдет. Мне просто Реакт заходит через силу, потому что по работе надо разобраться. Постоянно ищу в нем недостатки.

[@olezhonnv3215]

Как классно работалось раньше - не было всего вот этого замеса из кучи технологий. На пхп и жквери любой сайт делался.

[@miangel0]

крик души

[@YauhenKavalchuk]

Уж как есть

[@RagazzoKZ]

На react context api можно сделать свой redux. А этот сам redux выкинуть, нах он нужен, он ужасен

[@YauhenKavalchuk]

В целом это возможно, но я знаю осень много людей, которые бы поспорили с вами!

[@user-vv6jx8qg4v]

В redux при изменении стор перерендривается только те компоненты которые подписаны на него, а контекста получается рендрится все начиная с корневого компонента.

[@user-he8ln6ii2y]

Спасибо!

[@YauhenKavalchuk]

Пожалуйста