ZROZUMIEĆ REACT CONTEXT API - Zarządzanie stanem w ReactJS ?
HTML-код
- Опубликовано: 8 ноя 2024
- 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
📧: daniel@programistafrontend.pl
-
-
![Kodak Black - Catch Fire [Official Music Video]](http://i.ytimg.com/vi/A4ch-olIuZo/mqdefault.jpg)
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.
Mi pozwala utrwalać wiedzę jak najbardziej polecam ! :) Dzięki za feedback ✋
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.
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 !
Na co dzień korzystam z reduxa w wersji ze sliceami. Fajne było sobie przypomnieć jak Context API działa.
Świetnie tłumaczysz! Od razu można załapać i fajne przykłady. 😃 dzięki 😉
Cześć Ewelina dziękuję za miły komentarz :) owocnej nauki 👍
Dzięki, za wytłumaczenie, przyda się!
Hej Rafał
Dzięki za komentarz. Powodzenia w nauce 👍
Doczekaliśmy się nowych póz do miniaturek. Yay
+Black :D nie wiem na jak długo :) dzieki za komentarz ! ✋
Ciekawe wprowadzenie do tematu Context API. Materiał dobrze przygotowany i solidnie przekazany. Dobra robota. Tak trzymać
Hej Naxov Sec
Dzięki za komentarz 💪🚀
Świetna metodyka nauczania:) Bardzo dobrze się Ciebie słucha, pzdr
Hej Zbigniew
Dziękuję Ci za mily komentarz. Mam nadziejeu ze to zgadnienie jest dla Ciebie prostsze :) powodzenia ✋🔥
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 :)
Dziekuje ze material!
Ja dziękuję za komentarz :)
Fajny materiał, zostaje na dłużej. Sub 👍
Dzięki ✋
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ę.
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:
ruclips.net/video/HJp28etcsKY/видео.html
Mam nadzieję, że jakoś pomogłem. Jak po obejrzeniu filmu powyżej będą jeszcze jakieś pytania pisz śmiało 🖐
A czym w takim razie jest sens używania Conext'u do stylowania elementów? Co z Global Styles/ThemeProvider ze Styled Components?
Nie zrozumiałem pytania. Przeważnie theme providers pod spodem używają context api do dostarczenia informacji o aktualnie uzywanym theme w aplikacji.
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 ? :)
Maciek dzięki za fajny komentarz. Poki co jak najlepiej chcę stworzyć trzy serie na moim kanale zrozumieć html zrozumieć css i zrozumieć JavaScript :)
@@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
@@maciejmikoajczak9850 być może kiedyś :)
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?
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.
@@danielnoworyta A czasem wciąż jakakolwiek zmiana w Contex'cie nie powoduja rerenderu wszystkich dzieci Provider'a?
@@GrazikPL zgadza sie dlatego o tym napisalem wszystkie komponenty zagnieżdżone w providerze beda rerenderowane przy zmianie contextu
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ć.
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 ✋
@@danielnoworyta Spoko, tak myślałem. Tylko dla osób wchodzących w świat React'a może to być odrobinę mylące :(
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"?
Nie sądzę ze bedzie potrzebny do tego context. Zwykły state powinien wystarczyć do zaznaczania selekcji itp.
Czy obecnie (początek 2024 roku) context api jest w daalszym ciągu używane i optymalne?
Wiele bibliotek korzysta pod spodem z context api więc znajomość jak dla.mnie to must have dla react deva.
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.
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 RUclips :) @Malewicz
A co to znaczy "rozsmarować w stylach" ?
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.
"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
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 :) ✋👍
@@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.
@@benekex2 To zależy co masz namyśli mówiąc "sporych" 😏
Lepiej byłoby pokazać tylko trzymanie stejtu bo myślę że mało kto używa tego do stylów
Zgadza się Kacper ale chciałem pokazać na szerszej perspektywie co można zrobić z tym API
Dzięki za wyjaśnienie!!😀
Proszę i dziękuję za komentarz 👍