ZROZUMIEĆ REACT CONTEXT API - Zarządzanie stanem w ReactJS ?

Chcę zrozumieć react context api. Złapałem się ostatnio na tym, że nie rozumiem tej części reacta. Założyłem kanał, by wspomagać mój proces nauki programowania. W filmie staram się wyjaśnić swoimi słowami czym jest react context api. Do czego jest nam potrzebne i jakie problemy rozwiązuje.
Kilka przydatnych linków:
pl.reactjs.org...
www.smashingma...
www.toptal.com...
/ you-might-not-need-redux
FB: / programistafrontend-10...
🎯: www.programist...
IG: / programistafrontend
📧: [e-mail]
-
-

[@Rafa-hz1lr]

Dzięki, za wytłumaczenie, przyda się!

[@danielnoworyta]

Hej Rafał Dzięki za komentarz. Powodzenia w nauce 👍

[@EwelinaKopacz]

Świetnie tłumaczysz! Od razu można załapać i fajne przykłady. 😃 dzięki 😉

[@danielnoworyta]

Cześć Ewelina dziękuję za miły komentarz :) owocnej nauki 👍

[@laponiec]

Bardzo ciekawa forma poszerzania wlasnej wiedzy, chodzi mi o zalozenie kanalu. Osobiscie zaczalem sie uczyc Javascript i React.js, na razie prowadze jedynie dziennki programowania, ale moze kiedys przyjdzie rowniez czas na kanal. Dzieki za tutorial i pozdrawiam.

[@danielnoworyta]

Mi pozwala utrwalać wiedzę jak najbardziej polecam ! :) Dzięki za feedback ✋

[@nihillon2064]

w końcu dobre wyjaśnienie. Wydaje mi się że większość problemów ze zrozumieniem Context API wynika z nazwy propsa "value" w Context Providerze. Gdyby ten props nazywał się np. valuesToPass czy coś takiego to by ludziom zdecydowanie łatwiej zaskakiwało o co chodzi.

[@danielnoworyta]

Zdecydowanie tak :) ja też myślę ze to było kluczowe dla mnie w tym ze tak ciężko to wchodziło do glowy :) dzieki za komentarz !

[@nihillon2064]

Na co dzień korzystam z reduxa w wersji ze sliceami. Fajne było sobie przypomnieć jak Context API działa.

[@silesianguy87]

Świetna metodyka nauczania:) Bardzo dobrze się Ciebie słucha, pzdr

[@danielnoworyta]

Hej Zbigniew Dziękuję Ci za mily komentarz. Mam nadziejeu ze to zgadnienie jest dla Ciebie prostsze :) powodzenia ✋🔥

[@BlacKlyExactly]

Doczekaliśmy się nowych póz do miniaturek. Yay

[@danielnoworyta]

+Black :D nie wiem na jak długo :) dzieki za komentarz ! ✋

[@nexovsec9906]

Ciekawe wprowadzenie do tematu Context API. Materiał dobrze przygotowany i solidnie przekazany. Dobra robota. Tak trzymać

[@danielnoworyta]

Hej Naxov Sec Dzięki za komentarz 💪🚀

[@adamkniec9333]

Hej :) Fajny materiał. Może o tym wspomniałeś i tego nie wychwyciłem ale w przypadku prop drillingu dość sporym problemem jest re-renderowanie się komponentów-dzieci. Tego zazwyczaj chcemy uniknąć - zwłaszcza jeśli dany komponent nie jest zainteresowany konkretną wartością z propa i trzyma ją tylko po to aby przekazać niżej :) Fajnie, że wspomniałeś o tym, że często kompozycja komponentów jest w stanie pozwolić nam uniknąć problemu prop drillingu. Dzięki temu być może nie będziemy musieli korzystać z Contextu. Hint: Jeśli brakuje Ci jakiejś zmiennej w pliku w VSC to możesz ją łatwo zaimportować umieszczając kursor za brakują zmienną i korzystając ze skrótu ctrl + spacja :)

[@kamilniemamnazwiska5047]

Dziekuje ze material!

[@danielnoworyta]

Ja dziękuję za komentarz :)

[@Tomtom-xe2dr]

Fajny materiał, zostaje na dłużej. Sub 👍

[@danielnoworyta]

Dzięki ✋

[@TheGielda]

Cześć Daniel, kiedy w swojej nauce Java Scriptu zacząłeś uczyć się programowania obiektowego? Chodzi mi między innymi po jakim czasie i co już umiałeś. Czy możesz polecić jakiś kurs na temat programowania obiektowego albo może masz jakieś rady jak się go uczyć. Będę bardzo wdzięczny za odpowiedź. Dzięki za dotychczasowe filmy i wykonaną pracę.

[@danielnoworyta]

Hej Gm Dzięki za komentarz i za to, że oglądasz moje filmy :) Ja sam jestem owocem kursów Samuraja i Colta Steela głównie. Do tego pomoc mojego przyjaciela Kamila też była nieodzowna. Szczerze Ci powiem, że programowanie obiektowe ciągle jest moją kulą u nogi. Sam ciągle się tego uczę. Ale robiłem odcinek o wszystkich kursach, które przerobiłem przed zdobyciem swojej pierwszej pracy link poniżej: kzbin.info/www/bejne/fnvTY2ubqcimgbs Mam nadzieję, że jakoś pomogłem. Jak po obejrzeniu filmu powyżej będą jeszcze jakieś pytania pisz śmiało 🖐

[@maciej3789]

A czym w takim razie jest sens używania Conext'u do stylowania elementów? Co z Global Styles/ThemeProvider ze Styled Components?

[@danielnoworyta]

Nie zrozumiałem pytania. Przeważnie theme providers pod spodem używają context api do dostarczenia informacji o aktualnie uzywanym theme w aplikacji.

[@maciejmikoajczak9850]

Daniel nie myślałeś o stworzeniu jakiś kursów np. z Reacta ? Jeżeli jeszcze nie masz tego w planach, to jako odbiorca uważam, że przekaz informacji masz bardzo dobry. To kiedy premiera ? :)

[@danielnoworyta]

Maciek dzięki za fajny komentarz. Poki co jak najlepiej chcę stworzyć trzy serie na moim kanale zrozumieć html zrozumieć css i zrozumieć JavaScript :)

[@maciejmikoajczak9850]

@@danielnoworyta Jasne również je śledzę, lecz tu miałem na myśli projekt raczej dostępny odpłatnie w formie kursu poruszający poszczególne aspekty danej technologii. Dzięki

[@danielnoworyta]

@@maciejmikoajczak9850 być może kiedyś :)

[@GrazikPL]

Czemu w 11:50 mówisz, że tak nie możesz przekazać tego propa `theme` do `Article`? AFAIK, to w Twoim przykładzie możesz tak zrobić.

[@danielnoworyta]

Zgadza się mialem bardziej na mysli pokazanie zagnieżdżonych komponentów. Masz rację w tym wypadku jak najbardziej moglem przekazać propsem w dół. 👍 Dzieki za komentarz ✋

[@GrazikPL]

@@danielnoworyta Spoko, tak myślałem. Tylko dla osób wchodzących w świat React'a może to być odrobinę mylące :(

[@spodenkitu]

Załóżmy, że mamy rozbudowaną aplikację, w której jedną z części jest rozbudowany komponent tabeli z różnymi możliwościami edycji, filtrowania, sortowania, zaznaczania wierszy itp (coś typu komponent GridData z biblioteki MUI). Czy w przypadku takiego komponentu tabeli context api będzie dobrym rozwiązaniem dla przechowywania np. tablicy z zaznaczonymi rekordami czy też stanem filtrów lub "sorterów"?

[@danielnoworyta]

Nie sądzę ze bedzie potrzebny do tego context. Zwykły state powinien wystarczyć do zaznaczania selekcji itp.

[@bartoszludera2604]

Czy obecnie (początek 2024 roku) context api jest w daalszym ciągu używane i optymalne?

[@danielnoworyta]

Wiele bibliotek korzysta pod spodem z context api więc znajomość jak dla.mnie to must have dla react deva.

[@FIFAcepalm]

Zastanawia mnie jedynie czy nie lepszej możliwości podania obiektu theme w zależności od isDarkMode. Czy nie da się tego warunku ustawić w jednym miejscu w App coś w stylu value={isDarkMode ? themeDark : themeLight} zamiast powielać tę logikę w każdym dziecku?

[@danielnoworyta]

myślę, że da się coś takiego zrobić. Tylko wtedy pamiętaj, że rerenderujesz wszystkie komponenty zagnieżdżone w tym providerze. Przy theme ma to jak najbardziej sens ale jakbyś miał context związany z bardziej lokalną funkcjonalnością aplikacji, może być to zachowanie nieporządane. Styled components rozwiązuje to przez przekazywanie propsów do styli.

[@GrazikPL]

@@danielnoworyta A czasem wciąż jakakolwiek zmiana w Contex'cie nie powoduja rerenderu wszystkich dzieci Provider'a?

[@danielnoworyta]

@@GrazikPL zgadza sie dlatego o tym napisalem wszystkie komponenty zagnieżdżone w providerze beda rerenderowane przy zmianie contextu

[@molszzz549]

Ja taki mały offtop. Niedawno w jakimś komentarzu natknąłem się na pewną pozycję, którą polecałeś jaką najlepszą ever dla UI/UX (książka lub kurs). Chciałem polecić ją znajomej osobie, która zaczyna działać w tym temacie, ale gdzieś mi to umknęło.. byłbyś w stanie napisać o co wtedy mogło chodzić? :D Jeśli znasz więcej takich źródeł to byłbym wdzięczny, bo z tego co udało mi się dowiedzieć to w UI/UX dużo trudniej o dobry praktyczny kurs, książkę, która prowadzi "za rękę" jak na front-endzie.

[@danielnoworyta]

Hej dzieki za komentarz ✋ Tak polecam jak najbardziej designingui.com/ Książka mistrzostwo świata jeżeli chodzi o praktyczne podejscie do uiux designu. Do tego polecam kanal Michala Malewicza na polskim KZbin :) @Malewicz

[@Tomtom-xe2dr]

A co to znaczy "rozsmarować w stylach" ?

[@danielnoworyta]

Spread operator . . . Jakoś tak potocznie mi się przyjelo. Używając tego operatora trzech kropek niejako rozsmarowujemy obiekt tak by móc dodawać kolejne wlasciwosci w tym przypadku styli. Polecam poczytać o spread syntax w jsie.

[@benekex2]

"Zrozumienie Context API pozwoli wam lepiej używać Reduxa" .... wszystko super ale po co używać Reduxa skoro się umie Context API ? To właśnie Context API wyparło Reduxa, który generuje mnóstwo niepotrzebnego kodu i już umarł właściwe albo dogorywa sobie gdzieś z boku. Reduxa dzisiaj używa się tylko jak idziesz do projektu gdzie on jest i nie ma czasu na refaktor

[@danielnoworyta]

Na pierwszy rzut pewnie ze powinnismy uzyc contextapi. Przy sytuacjach typu zmiana theme, logowanie uzytkownika czy zmiana w lokalnych plikach context api bedzie wystarczajace. Ale przy większy ch aplikacjach, gdzie drzewko komponentów nie wyglada prosto i jest duzo zagnieżdżen zmuszanie reacta do przeliczania i szukana zmian w stanie komponentów zagniezdzonych w api moze byc kosztowne. Wtedy warto sięgnąć po reduxa. Takie mam odczucia :) ale oczywiscie dzieki za opinie :) ✋👍

[@benekex2]

@@danielnoworyta Korzystam z Context APi w sporych projektach i nie ma z tym żadnego problemu jeśli się dobrze przemyśli strukturę. No i hooki są tu mega pomocne i rozwiązują problemy o których piszesz.

[@marekw448]

@@benekex2 To zależy co masz namyśli mówiąc "sporych" 😏

[@kacperkepinski4990]

Lepiej byłoby pokazać tylko trzymanie stejtu bo myślę że mało kto używa tego do stylów

[@danielnoworyta]

Zgadza się Kacper ale chciałem pokazać na szerszej perspektywie co można zrobić z tym API

[@dickdong3599]

No dobra wrzuciłeś stany do Providera a jeśli będę chciał gdzieś w children zmienić stan? Jak przekazać setCoś tam niżej?

[@danielnoworyta]

Jako props niżej ?:) Tzn eksponujesz settery tak samo jak stany

[@matteod1571]

Dzięki za wyjaśnienie!!😀

[@danielnoworyta]

Proszę i dziękuję za komentarz 👍