React: Czym jest Context API
od Podstaw
4 godz. 55 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorCzego się nauczysz
- Doglebne wyjasnienie zasad rzadzacych Reactem
- Stworzenie aplikacji wykorzystujacej potencjal Reacta
- Wykorzystanie React Router i jego komponentów w praktyce
- Przygotowanie do pracy w nowych projektach i z legacy code
- Stworzenie struktury aplikacji w oparciu o najlepsze praktyki
- Rozwiazania pochodzace z prawdziwej pracy nad wieloma projektami
Wszystkie tresci podzielilem na piec rozdzialów, w których bedziemy rozwijac wymyslona przeze mnie aplikacje sluzaca do kolekcjonowania najciekawszych artykulów, notatek oraz kont twitterowych znalezionych w sieci.
Twoje pierwsze kroki w React
Zaczniemy od prostych widoków, na podstawie których wyjasnie Ci, co stoi u podstaw Reacta – dowiesz sie czym jest JSX, oraz poznasz pojecie komponentu funkcyjnego. Dzieki temu oswoisz sie ze skladnia Reacta, która poczatkowo moze wydawac sie nieco obca.
Witaj w swiecie komponentów
W React niemal wszystko opiera sie o komponenty. Czym one sa? Dowiesz sie tego w drugim rozdziale. Opowiem Ci jak je tworzyc oraz jak tworzyc relacje miedzy nimi. Wyjasnie Ci bardzo szczególowo jak dzialaja propsy oraz w jakich sytuacjach nalezy je wykorzystywac. Zobaczysz tez, jak w Reactcie pracujemy z danymi, jak mozemy je przetwarzac a nastepnie stosujac kilka strategii stylowania komponentów, wszystko wyswietlic w atrakcyjny sposób.
Komponenty z klasa
W trzecim rozdziale poznasz sposób konstruowania komponentów klasowych, posiadajacych wlasny stan, dzieki któremu stworzysz miedzy innymi dynamiczny, inteligentny formularz, a takze wiele innych interaktywnych elementów. Dzieki temu szybko zrozumiesz róznice miedzy komponentami funkcyjnymi a klasowymi.
Wytyczamy nowe sciezki
Kiedy juz poczujesz sie dosc pewnie budujac komponenty, dodamy tzw. routing w rozdziale czwartym, który pozwoli nam na stworzenie wielu podstron, które urozmaica nasza aplikacje – dowiesz sie dzieki temu jak integrowac dodatkowe narzedzie w naszym projekcie, oraz jak budowac bardziej skomplikowana strukture aplikacji.
Odkryj potencjal Reacta
Na sam koniec zostaimy sobie tzw. state managment, czyli zarzadzanie informacjami wspóldzielonymi przez wiele komponentów i podstron. Nie wykorzystamy jednak ani Reduxa ani Mobxa, poniewaz chce Ci pokazac, ze w samym Reactcie kryje sie ogromny potencjal nawet przy tak kompleksowych zadaniach. W tym przypadku uzyjemy Context API, który w latwy sposób pozwala nam teleportowac dane z jednego miejsca naszej aplikacji do drugiego. Podczas rozbudowywania naszej aplikacji o Context API dopracujemy tez wszystkie inne jej elementy, aby na samym koncu kursu wydeployowac nasz gotowy produkt w serwisie Netlify – zobaczysz, ze wypuszczenie aplikacji Reactowej do sieci i udostepnienie jej innym, jest niezwykle proste.W tym kursie skupiamy sie wylacznie na Reactcie z uzyciem jedynie niezbednych narzedzi. Wierze, ze doskonale opanowanie fundamentów, na których opiera sie ta technologia pozwoli Ci pózniej latwiej wkroczyc w swiat setek pluginów i paczek dostepnych w jego ekoystemie.
Dlaczego wybrac wlasnie ten kurs?
- Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, bys caly czas mógl go sledzic z zainteresowaniem i zaangazowaniem, a takze czerpac satysfakcje ze zdobytej wiedzy!
- Wiedza, która otrzymujesz w tym kursie, to nie tylko sucha teoria, ale równiez wskazówki od praktyka z wieloletnim doswiadczeniem, dzieki którym duzo latwiej bedzie Ci opanowac material.
- Uczysz sie na praktycznych przykladach. Kurs, który masz przed soba to esencja praktycznej wiedzy i doswiadczenia a takze wzorów, które oszczedza Ci godziny pracy i poszukiwan.
Dla kogo jest ten kurs?
Ten kurs powstal z mysla o osobach chcacych zaczac swoja przygode z frameworkami JavaSript. Zaklada on wiedze na temat podstaw JavaScript (w tym ES6), jednak przy bardziej skomplikowanych rozwiazaniach zawsze pojawia sie slowo wyjasnienia. \n\nPoziom kursu zostal dopasowany do osób, które maja za soba juz kilka projektów w czystym JavaScript i chca wejsc na wyzszy poziom, przygotowujac sie tym samym do pracy z ta technologia.
Cześć! Witaj w kolejnym dziale tego kursu. Przed nami najbardziej ekscytująca,
ale też najbardziej zaawansowana część tego kursu o podstawach React. Jeśli
jesteś w tym miejscu, to prawdopodobnie już bardzo dobrze ogarniasz komponenty klasowe,
funkcyjne, props'y, przekazywanie tych props'ów w dół, przekazywanie funkcji
w górę, do rodziców i wiele, wiele innych rzeczy, które tutaj ogarnęliśmy, ale
nie ma co ukrywać, że React w zanadrzu ma jeszcze kilka niespodzianek, którymi
teraz się z Tobą podzielę, w tym dziale. Będziemy tutaj głównie opowiadać o Context API,
ale żeby dobrze zrozumieć, czym jest Context API, najpierw warto zrozumieć, z
jakimi problemami mierzylibyśmy się w tej aplikacji, jeśli dalej poszlibyśmy
tym tokiem, że przekazujemy wszystkie props'y w dół, do dzieci od rodziców.
Bo na przykład, jeśli spojrzysz sobie na nasz modal,
który zawiera formularz, to zauważ, że modal dostaje
od rodziców tylko funkcję closeModalFn, która odpowiada za zamykanie modala. W
tym miejscu. Ale, jeśli dobrze pamiętasz, to nasz form miał
też swoją funkcję, która nazywała się add new item. Jest
ona w tym miejscu, ale w żaden sposób nie jest przekazywana do naszego
modala, więc teraz, jeśli nawet dodalibyśmy cokolwiek tutaj, to
ta funkcja nie zostanie wykonana - nasz formularz się zamknie, co
prawda, ale jak widzisz strona została odświeżona i wszystkie
parametry, które wpisaliśmy do formularza, zostały przekazane jako query string, do
naszego paska adresu. Tego nie chcemy, więc to co musielibyśmy
zrobić, to najpierw przekazać @function do modala, a później w modalu,
jak go sobie otworzymy, przekazać tę funkcję
dalej, do naszego form'a i dopiero w tym formie, moglibyśmy
ją wykorzystać. Tego typu podawanie props'ów niżej, jest dość
skomplikowane, a przede wszystkim bardzo podatne na błędy - bardzo łatwo o tym zapomnieć.
Więc, w takiej sytuacji zazwyczaj ratujemy się albo globalnym
state'em, czyli wykorzystaniem takich narzędzi jak MobX czy Redux
albo wykorzystaniem właśnie Context API, które poniekąd zastępuje
ten globalny state, przynajmniej do pewnego stopnia, ale na pewno do takiego stopnia, który
wystarczy nam tworzeniu tej aplikacji. I jak zaraz zobaczysz, stworzenie samego
kontekstu i wrzucanie go do aplikacji, jest naprawdę banalne. Dużo
więcej czasu poświęcimy na implementowanie tego kontekstu w poszczególnych podstronach,
tak żeby wszystko wyświetlało się tak, jak należy, bo pamiętaj, że to jest ostatni
dział. Zanim wytypujemy naszą aplikację, zanim ona wystrzeli w
internet i po prostu będzie można z niej korzystać, więc teraz przystępujemy do
działania i zaczynamy tworzyć context. Pierwsze, co chcemy zrobić, to
stworzyć tak naprawdę plik, który będzie łatwo dostępny i który będzie zawierał nasz context. Nie
bój się, kontekst nie będzie zawierał wiele i zaraz zobaczysz. Zróbmy go
sobie w naszym folderze SRC. Nazwiemy go, uwaga, context. W
nim zaimportujemy React'a. Następnie
stworzymy sobie AppContext i tutaj
wykonamy metodę React.createContext. Następnie
wyeksportujemy to, co stworzyliśmy i już nasz
context jest gotowy do działania. Tak, w podstawowej
wersji context, to są tylko trzy linijki. Teraz
wróćmy sobie naszego root'owego widoku. Zaimportujmy sobie nasz context w tym miejscu
i teraz przyszła pora na wyjaśnienie
pierwszego kluczowego elementu naszego context'u. Kluczowych
elementów będzie dokładnie dwa i teraz jest pierwszy. Pierwszy polega na tym,
że żeby dowolny element, znajdujący
się w naszym drzewku i dowolny element zagnieżdżony, czyli na przykład form,
który jest zagnieżdżony później w modalu. Żeby on mógł mieć dostęp,
do rzeczy, które udostępniamy mu w context'cie, to wszystko
to, wszystkie te elementy, które mają mieć dostęp do context'u, muszą
być oplecione w provider, provider wygląda następująco - czyli
bierzemy ten context, który stworzyliśmy, a następnie po kropce podajemy,
że ten tag będzie provider'em dla wszystkich tych elementów,
które się tutaj znajdują i prawdopodobnie słowo provider
jeszcze nie za wiele Ci mówi, ale tym nie przejmuj, bo zaraz poznasz
drugi kluczowy element context'u i nagle wszystko powinno
stać się jasne. Generalnie, nasz provider, żeby najłatwiej zrozumieć czym
on jest, można pomyśleć, że to jest taki teleport. Jeśli zdarzyło
ci się oglądać Star Trek albo inne tego typu film, to dobrze wiesz jak działa teleport. Pozwala
nam przenosić się z jednego miejsca do drugiego, w bardzo prosty sposób i to
właśnie zapewnia nam context, z tym tylko wyjątkiem, że żeby teleportować
się do któregoś miejsca, musimy jeszcze zaznaczyć to miejsce
w naszym komponencie, ale zanim do naszej teleportacji dojdzie, to najpierw
musimy coś do tego teleportu wsadzić i do tego właśnie służy props - value. To
do niego wrzucimy nasz ładunek, który później będziemy wykorzystywać w innych
komponentach. W tym przypadku, do naszego value w późniejszym etapie docelowo,
będziemy wrzucać nasz state. Natomiast teraz wrzućmy jakąś tylko pojedynczą
wartość z naszego state'u. Powiedzmy, że stworzymy sobie name -
nazwiemy Roman i to
właśnie Romana chcemy przeteleportować do innego komponentu, więc tutaj wpisujemy this.state.roman,
this.state.name. React się na nas obraził. Szybki
restart. Okej, nasz Roman jest już gotowy
i czeka w teleporcie, więc teraz powiedzmy, że wejdziemy sobie do ArticlesView i
chcemy, żeby on się pojawił w tym miejscu. To co musimy
zrobić, to zaimportować nasz context. Podobnie
jak robiliśmy to w naszym root'owym widoku i można
pomyśleć, że to jest taki drugi koniec naszego teleportu. Użyjemy
tutaj właśnie AppContext, ale zamiast Provider, nazwiemy go Consumer
i Consumer to jest właśnie ten drugi, kluczowy element naszego
context'u, bo Consumer pozwala nam, jak sama nazwa wskazuje, na konsumowanie
tego context'u, na pobieranie niego odpowiednich rzeczy, które akurat w danym
komponencie są nam potrzebne. Akurat my, do naszego teleportu wsadziliśmy jedną
rzecz i tylko jedną rzecz możemy z niego wyciągnąć i teraz właśnie to zrobimy. Tutaj
małe utrudnienie - Consumer w przeciwieństwie Providera, który
po prostu dostawał wszystko między tagi, w ten sposób. Consumer
musi mieć funkcje, która zwraca nam nasz JSX, czyli
tutaj, w tym miejscu, po prostu, robimy funkcje strzałkową, która
zwróci nam ten tag. Nie to jakieś ogromne utrudnienie, nie
mniej trzeba to zrobić, ponieważ do tej funkcji podajemy context. Jeśli
już jesteśmy przy tych metaforach teleportu, to można powiedzieć, że ta funkcja
pozwala nam na otworzenie tego teleportu, na drugim końcu naszego
świata, w którym się poruszamy i to z niego wyjdzie ten
element, który wrzuciliśmy do tego teleportu - po stronie provider'a. Więc
teraz z racji, że pod hasłem context kryje się tylko jedna
wartość, ponieważ tak jak tutaj widzisz, value jest
przypisany tylko do jednego string'a, to możemy
zrobić coś takiego. I to
jest cała magia context'u - popatrz, nasz Roman został poprawnie przeteleportowany
z naszego root'owego widoku, do naszego komponentu ArticlesView,
bez żadnego podawania props'ów, bez niczego takiego. Po prostu, poprzez
stworzenie Consumer'a, otwarcie funkcji, która może ten context z
Consumer'a wyciągnąć i wrzucenie naszej zmiennej context w
to miejsce. Sprawiliśmy, że Roman pojawił się na swoim miejscu,
tam gdzie chcieliśmy. Oczywiście pamiętaj, że context
jest tutaj tylko parametrem, który podajemy do funkcji. To mogłaby się nazywać jakkolwiek, na
przykład name. I to również by działało. Chodzi
tylko o to, że jest to po prostu dobra praktyka i taka konwencja,
która się przyjęła, że jeśli korzystamy z context'u wewnątrz komponentu, to
nazywamy to context, a nie na przykład props, ponieważ wtedy mogłoby się to bardzo, bardzo
mylić. Jeśli mielibyśmy tutaj na przykład jakieś props'y podane, to wtedy wiemy,
co jest context'em, a co jest props'em. I to na tyle, jeśli chodzi o wstęp do
tego czym jest Context API. Dalszą częścią wprowadzania
tego do naszej aplikacji, już wykorzystywania tego na takich prawdziwych przykładach, zajmiemy
się od kolejnej lekcji.