Как ПРАВИЛЬНО передать данные между компонентами React?

#React #reactjs
👉 Текстовая версия: it-dev-journal.ru/articles/ka...
В‌ ‌этом‌ ‌видео‌ рассмотрим способы передачи данных между React компонентами - от дочернего компонента к родительскому, от родительского компонента к дочернему, между соседними компонентами, между компонентами на разных уровнях иерархии. Здесь вы найдете ответы на вопросы и на такие кейсы как: Обмен данными между компонентами React JS, Поднятие состояния в React, Передача данных между компонентами в React, Способы передачи данных между компонентами в React, Подъём состояния выше по иерархии, Как передать данные от одного компонента к другомy?
Мы в соцсетях:
👉 Сайт: it-dev-journal.ru
💻 Telegram: t.me/devmagazinechannel
💻 Twitter: / _devmagazine
💻 GitHub: github.com/vadimkorr
☕️ Поддержать: www.donationalerts.com/r/devm...
Плейлисты и курсы:
📃 Исходный код: t.me/devmagazinechannel/142
💡 Все о ReactJS: • 📘 ReactJS
💡 Как пройти ReactJS собеседование: • 🚀 Собеседование React ...
💡 ReactJS хуки: • 🐠 React хуки
💡 Redux: • ☕️ Redux курс
💡 Redux Saga: • 🍏 Redux Saga курс
💡 Как создать слайдер на ReactJS: • 🎪 Как создать СЛАЙДЕР ...
💡 Svelte: • 🌴 Svelte курс
💡 Sass: • 📔 Sass курс
💡 GraphQL: • 💪 GraphQL
💡 JavaScript: • 📜 JavaScript
00:00 - О примере
02:32 - Parent to child
04:23 - Child to Parent
07:01 - Sibling to Sibling (между соседними компонентами)
10:38 - Parent to Grandchild c пробросом пропсов (prop drilling)
13:09 - Parent to Grandchild с контекстом (React Context API)
19:50 - Еще раз о передаче данных в React
#devmagazine #devmagazinechannel

Пікірлер: 54

  • @DevMagazineChannel
    @DevMagazineChannel2 жыл бұрын

    Текстовая версия 👉 it-dev-journal.ru/articles/kak-peredavat-dannye-mezhdu-komponentami-v-react-js Вопросы, которые точно зададут на собесе по React 👉kzread.info/dash/bejne/c2SA0pqNfaasmKQ.html Еще вопросы с собеседований по React 👉‌kzread.info/dash/bejne/X2p5z9qAlbytcdo.html Все хуки ReactJS 👉‌kzread.info/dash/bejne/ZaZ4ztFtXbzapdo.html

  • @nerofighter472
    @nerofighter472 Жыл бұрын

    Это лучший туториал спасибо!!!! За труд Ваш хочу пожелать Вам много самого прекрасного: чтобы здоровье было крепким, иммунитет сильным, чтобы удача была постоянной спутницей, а душа переполнена теплом и счастьем! Желаю вам благополучия и достатка в доме, чтобы ваше финансовое положение было крепким и вы могли позволить себе все, что пожелаете, чтобы близкие всегда радовали, дарили любовь и заботу! Пусть каждый новый день будет окрашен яркими событиями, новыми интересными знаниями, приятными встречами и впечатлениями!

  • @user-cw6xh4nv9t
    @user-cw6xh4nv9t2 жыл бұрын

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

  • @MrPahan252
    @MrPahan252 Жыл бұрын

    Только начал изучать Реакт и столкнулся с проблемой передачи состояний. Часа два гуглил и на русском и на английском, по итогу нашёл это видео и за 10 минут решил проблему. Спасибо большое! Однозначно добавлю это видео в избранное и буду периодически обращаться к нему на первых парах

  • @VitalyKuznetsov-kd7wp
    @VitalyKuznetsov-kd7wp8 ай бұрын

    Хочу поблагодарить вас за грамотное объяснение материала. Очень помогло.

  • @avel8965
    @avel89652 жыл бұрын

    Работаю фронтом меньше месяца, но вот эти схемы я, пожалуй, отработаю, потому что очень часто используются. Спасибо автору )

  • @igormaksymiv113

    @igormaksymiv113

    Жыл бұрын

    Дружище, как успехи в работе?)

  • @avel8965

    @avel8965

    Жыл бұрын

    @@igormaksymiv113 да все норм)

  • @igormaksymiv113

    @igormaksymiv113

    Жыл бұрын

    @@avel8965Красава) у тебя стек JS -> React?

  • @avel8965

    @avel8965

    Жыл бұрын

    @@igormaksymiv113 react typescript mobx

  • @user-xq9zt4os5h
    @user-xq9zt4os5h Жыл бұрын

    Спасибо за ваше видео, очень помогло на начальном этапе разобраться в этих дебрях!

  • @murcha5899
    @murcha5899 Жыл бұрын

    Роскошь!!!невероятно понятное иструктурированное видео! У вас таллант❤

  • @timurkoretskyi2153
    @timurkoretskyi21532 жыл бұрын

    Просто потрясающий урок, автор гений) Жаль, что так мало подписчиков, просмотров, лайков, как по мне, заслуживаете на большее) Продолжайте, отлично получается!!!

  • @DevMagazineChannel

    @DevMagazineChannel

    2 жыл бұрын

    Спасибо!)

  • @user-hk5wf7wk2o
    @user-hk5wf7wk2o4 ай бұрын

    Просто отличное видео, спасибо

  • @sergeyvladimirov9994
    @sergeyvladimirov99942 жыл бұрын

    Спасибо тебе большое. Я долго искал эту информацию. Отдельное спасибо за главы в видео

  • @fellenyoup305
    @fellenyoup3052 жыл бұрын

    Наконец то я нашёл, как это делать с помощью функциональных компонентов! (я пока ещё начинающий в React)

  • @garag1763
    @garag1763 Жыл бұрын

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

  • @liberty_concord4157
    @liberty_concord4157 Жыл бұрын

    Очень хорошее объяснение и примеры

  • @user-lm6ch4zi7y
    @user-lm6ch4zi7y5 ай бұрын

    Бро, Context помог решить проблему Спасибо!

  • @daimonkor
    @daimonkor2 жыл бұрын

    Как всегда на высоте

  • @DevMagazineChannel

    @DevMagazineChannel

    2 жыл бұрын

    Благодарю!)

  • @makarryzhko7997
    @makarryzhko7997 Жыл бұрын

    Брат от души спасибо, выручил❤❤

  • @user-fy7dc7sc6v
    @user-fy7dc7sc6v2 жыл бұрын

    как по мне лучших урок

  • @user-sv1ze9gk3b
    @user-sv1ze9gk3b2 жыл бұрын

    Круто!

  • @zakiro4277
    @zakiro42772 жыл бұрын

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

  • @DevMagazineChannel

    @DevMagazineChannel

    2 жыл бұрын

    Спасибо)

  • @sergeyvladimirov9994

    @sergeyvladimirov9994

    2 жыл бұрын

    Офф документация у реакта вообще мусорная. Документация ни разу мне не помогла. Что то нужно? Туда можно даже не смотреть.

  • @jupiterunone
    @jupiterunone Жыл бұрын

    лучший

  • @user-ve4jo6ep9j
    @user-ve4jo6ep9j11 ай бұрын

    спасибо

  • @user-mo6tl6is1q
    @user-mo6tl6is1q2 жыл бұрын

    Пушка

  • @VitalyKuznetsov-kd7wp
    @VitalyKuznetsov-kd7wp8 ай бұрын

    Можете пожалуйста выложить свежее видео о Redux Toolkit?

  • @user_k.alex_
    @user_k.alex_2 жыл бұрын

    Bидео очень понравилось, спасибо. Xотелось бы узнать как передать данные между классовыми компонентами!

  • @DevMagazineChannel

    @DevMagazineChannel

    2 жыл бұрын

    Спасибо! Для классовых компонентов - принцип такой же: пропсы, события и контекст (но работа с ним немного отличается)

  • @nazarlevchuk7773
    @nazarlevchuk77732 жыл бұрын

    Подскажи пожалуйсто у меня в консоле ругается на onChange(event.target.value) в консоле пишет undefiend а когда что то ввожу кидает ошибки(пример когда от Child to Child)

  • @tomioka1331
    @tomioka133111 ай бұрын

    А можно true false стейты тоже передать по name? к Child компоненту

  • @user-op8uo9wo9f
    @user-op8uo9wo9f Жыл бұрын

    Доброго времени суток у меня такая ошибка "Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component." Документацию я читал но там используется классовый метод а мне нужен функциональный и у меня глобальный state. Подскажите пожалуйста как это решитью

  • @user-op1oi8hx4z
    @user-op1oi8hx4z Жыл бұрын

    Про 2 случай хотелось бы подробнее , он сложен для понимания , с колбэк. onChange который приходит в props в компоненте Children и onChange внутри это один и тот же onChange

  • @neobulk3761

    @neobulk3761

    11 ай бұрын

    Ты вопросительные знаки ставил бы, а то непонятно, утверждаешь или же спрашиваешь.

  • @jenyaspace
    @jenyaspace9 ай бұрын

    Подскажите как передать данные Parent to child, если child пишется в parent не как компонент, а передается через children

  • @kuna1990
    @kuna19902 жыл бұрын

    День добрый, а как передавать введенное значение в поле на другую страницу?

  • @DevMagazineChannel

    @DevMagazineChannel

    2 жыл бұрын

    Добрый! 1. через контекст, тогда нужно самый корневой элемент обернуть в Provider; 2. через стор; 3. через метод push в библиотеках роутера; ...

  • @VasiliyKolpaxidis
    @VasiliyKolpaxidis Жыл бұрын

    Отличное видео. Один вопрос. 2 пример передача данных от Child к Parent. Можно ли передать пропсы в Child и при этом обратно передавать колбэк в Parent? Если по другому можно ли совместить 1 и 2 пример??? Заранее благодарю за ответ.

  • @DevMagazineChannel

    @DevMagazineChannel

    Жыл бұрын

    Спасибо! Имеется ввиду реакция на изменение пропса? не совсем понял, но наверно вот так const Parent = () => { const value = setState() const handle = () => { /**/ } return ( ) } const Child = ({ value, onEvent }) => { useEffect(() => { onEvent() }, [value]) return ( ) }

  • @VasiliyKolpaxidis

    @VasiliyKolpaxidis

    Жыл бұрын

    @@DevMagazineChannel Я ещё в процессе обучения поэтому задаю такие вопросы. С родительского компонента я тяну массив с объектами в дочерний а из дочернего в родительский компонент хочу отправить .target.value. можно ли такое сделать? То есть отправка данных и туда и обратно? Слышал о 2 way bounding думал что это оно и есть

  • @DevMagazineChannel

    @DevMagazineChannel

    Жыл бұрын

    .target.value наверно имеется ввиду из инпута - тогда навесить обработчик ввода на инпут и вызывать в этом обработчике проп onEvent const Child = ({ array, onEvent }) => { return ( onEvent(event.target.value)} /> ) } в реакте 2 way bounding нет, вместо этого явно передаем проп и callback функцию

  • @VasiliyKolpaxidis

    @VasiliyKolpaxidis

    Жыл бұрын

    @@DevMagazineChannel даже не мог подумать что так можно. Спасибо за ответ завтра тестить буду

  • @bezbezov8867
    @bezbezov88672 жыл бұрын

    Спасибо большое! Было бы хорошо если скинули код🙏🏼

  • @DevMagazineChannel

    @DevMagazineChannel

    2 жыл бұрын

    t.me/devmagazinechannel/142

  • @bezbezov8867

    @bezbezov8867

    2 жыл бұрын

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

  • @jenerly-liasinjuaru2643
    @jenerly-liasinjuaru264310 ай бұрын

    А useContext подходит ли для обмена данными между соседними компонентами?

  • @DevMagazineChannel

    @DevMagazineChannel

    10 ай бұрын

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

  • @johnbaretty9725
    @johnbaretty9725 Жыл бұрын

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

  • @johnbaretty9725

    @johnbaretty9725

    Жыл бұрын

    но всё равно спасибо ,освежил знания