Techniki Zaawansowane
6 godz. 6 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorJeden z pierwszych i najbardziej popularnych wzorców w React, który przez lata był traktowany jako najlepszy sposób na wydzielanie logiki z komponentów i współdzielenie jej w wielu miejscach aplikacji. W kursie na przykładzie dowiesz się w jaki sposób można wykorzystać HOC, a także jak łączyć je ze sobą tworząc bardziej zaawansowane struktury.
Obecnie Render Props jest jedną z najczęściej wykorzystywanych praktyk pozwalającą, podobnie jak HOC, na tworzenie abstrakcji, z których możemy czerpać dane lub zachowania potrzebne w naszych komponentach. Na pierwszy rzut oka Render Props mogą przerażać, ale spokojnie – zaczniemy od prostego przykładu, który pozwoli Ci zrozumieć, że nie ma się czego bać.
Hooks to temat niezwykle ciekawy i populary, ale rzadko poruszany w sposób bardziej zaawansowany. W tym kursie dowiesz się nie tylko jak używać takich hooków jak useState, useReducer, useEffect, useContext czy useRef, ale też jak napisać swoje własne hooki, które niesamowicie uprzyjemnią pracę z Reactem.
Compound Components to prawdziwa "ciężka artyleria" Reacta – stosowana w zadaniach wymagających sporej złożoności. Ewoluowała przez lata i kiedyś zawsze spotykana była w formie klas, natomiast w tym kursie proponujemy nieco lżejsze podejście. Dowiesz się jak wykorzystując hooki możesz stworzyć Compound Component wyłącznie przy użyciu komponentów funkcyjnych.
Testy to hasło, które potrafi wzbudzić lęk u osób uczących się Reacta, lub jakiejkolwiek innej technologii. Rzadko kto jednak mówi to głośno – testy są przyjemne! Wystarczy tylko zrozumieć w jaki sposób środowisko testowe działa i jakimi rządzi się zasadami. Przerobimy to wszystko wspólnie, a na koniec kursu przekonasz się, że to faktycznie ciekawe i przyjemne zagadnienie.
W kursie przygotowana jest też garść dobrych praktyk, które pozwolą Ci spojrzeć krytycznie na niektóre fragmenty kodu i ulepszać je w taki sposób, aby stanowiąc część większej całości miały więcej sensu i wdzięku. Dowiesz się czym jest Single Responsibility Principle, jak wydzielać odpowiednio logikę z komponentów i paru innych ciekawych wskazówek.
Ten kurs został stworzony z myślą o programistach swobodnie poruszających się po podstawach i nieco bardziej skomplikowanych partiach Reacta, ale nadal czujących, że brakuje im czegoś, aby wynieść swoje aplikacje na jeszcze wyższy poziom. Rzeczy związane z zaawansowanym JavaScriptem będziemy tu wykorzystywać intuicyjnie, bez zbędnego tłumaczenia, dlatego zanim przystąpisz do tego kursu, upewnij się, że treści React od Podstaw oraz React w Praktyce są dla Ciebie jasne i zrozumiałe.
16.8.x
Cześć skoro już stworzyliśmy sobie takie podwaliny pod nasz compound
component to teraz możemy zacząć w końcu wdrażać tutaj jakąś logikę
która pozwoli nam na przykład na przełączenie stron za pomocą tych guzików więc pierwsze
co powinniśmy zrobić to wyposażyć nasz komponent w kontekst
właśnie który będzie podawany dalej do dzieci dziećmi oczywiście jest page
i controls to one muszą wiedzieć co się dzieje w tym komponencie więc teraz stworzymy
sobie po prostu kontekst możemy nazwać wizard context i
podamy sobie w nim domyślną zawartość tego co
on powinien przechowywać ponieważ będziemy się odwoływać do wartości
tego kontekstu w dzieciach i podanie tu tego argumentu obiektu
właśnie z tymi elementami uchroni nas przed pewnymi błędami więc to
co na pewno nasz wizard powinien zawierać to current page
i oczywiście będziemy zaczynać od strony pierwszej i
będziemy też potrzebować funkcji next page która
nie robi nic ponieważ tylko zmockowana funkcja ona prostu musi istnieć w tym domyślnym
stanie możemy nazwijmy to change page kolejną
rzeczą którą musimy zrobić to oczywiście stworzyć sobie provider w naszym kontekście który
pozwoli nam przekazać dalej te wszystkie elementy które chcemy wykorzystać
więc teraz w naszym wizardzie zwrócimy sobie
po prostu wizard context
provider a wewnętrz niego
wrzucimy children czyli wszystko to co znajdzie się wewnątrz naszego wizarda
i teraz pamiętając że provider
musi dostać jakieś value pewnie zastanawiasz się skąd je weźmiemy otóż
to wizard będzie trzymał cały state naszego compound component co prawda
tutaj mockujemy sobie zawartość tego co może zawierać nasz wizard context
natomiast to właśnie ten komponent będzie odpowiedzialny za przekazywanie właściwych
informacji do tego kontekstu który później będzie wykorzystywany przez dzieci więc
wykorzystamy sobie teraz hook use state do tego
żeby stworzyć state w naszym wizardzie i patrząc na kształt naszego wizarda możemy
się domyślić co my będziemy musieli tutaj wsadzić przede
wszystkim current page drugą funkcją
będzie set current page zaczynamy
od strony pierwszej podobnie jak tutaj sobie zrobiliśmy i
teraz jeszcze to co jest istotne to ta funkcja będzie
musiała zostać podana do value i to ta funkcja będzie wykorzystywać to set
current page więc musimy zrobić funkcję która w taki sposób i
tutaj jako parametr zrobimy sobie new page index i
teraz skoro mamy już teraz te dwie rzeczy czyli current page i change page to możemy
je podać jako value w
naszym kontekście z racji że klucze
nazywają się tak samo jak wartości które im przypisujemy czyli mam tutaj current
page to nie musimy dawać rzeczy po dwukropku
to znaczy że jakbyśmy napisali to w ten sposób to było wyszło na to samo
więc nie musimy tego robić możemy podać tylko klucze i wtedy javascript
się domyśli o co chodziło okej więc pierwszy krok za nami wyposażyliśmy
nasz wizard w informacje dotyczące tego jaką mamy bieżącą
stronę i co możemy zrobić żeby ustawić kolejną stronę aby
dostać się do tych danych z naszych dzieci musimy po prostu wykorzystać hooka use
context o którym już wcześniej mówiłem i
na przykład w przypadku naszych butttonów stworzyć tutaj tego
typu consta z contextem który następnie wykorzystamy właśnie w naszych
buttonach a
będzie to działać w taki sposób że on click na previous stworzymy
sobie wykorzystamy sobie metodę
change page która sprawdza jaką mamy
obecną stronę i odejmiemy od tego 1 czyli cofniemy
się z naszym indeksem o jeden tutaj oczywiście też musimy wyciągnąć to z kontekstu okej
tutaj mam błąd wizard context źle wpisany
i
tutaj w tym on click oczywiście nie zrobiłem funkcji strzałkowej więc ta funkcja się wywołuje
cały czas możemy sobie też wyciągnąć zdestrukturyzować current
page z naszego kontekstu po prostu wyciągając je stąd
w ten sposób nasz kod zostanie
troszkę uproszczony okej od razu ładniej
czyli mamy funkcję która sprawdza jaką mamy bieżącą
stronę odejmuję od tego jeden i w ten sposób będziemy
się przemieszczać na naszych stronach analogicznie do tego drugi button będzie
po prostu przesuwał index o jeden do przodu z
kolei w naszym page musimy
stworzyć logikę która będzie mówić że jeśli ta strona jest aktywna to ma się wyświetlać
jeśli nie to ma zwracać null'a w ten sposób tylko zawsze jedna
strona będzie widoczna tutaj również użyjemy sobie use context wyciągniemy
od razu change page i current page i
teraz żeby to zadziałało to nasza page musi mieć też jakiś
props którym możemy przeciwstawić temu current page
żeby sprawdzić czy current page i index z tej strony są identyczne
więc jeśli przejdziemy sobie teraz do naszego widoku mamy
to users to
myślę że możemy sobie tutaj stworzyć coś takiego jak page index jest
to dość imperatywne programowanie w tym momencie oczywiście można by było to pewnie
zrobić lepiej natomiast na potrzeby tego przykładu
i tego kursu myślę że możemy zatrzymać się przy czymś tak prostym teraz
wyciągniemy sobie z tego page page index i
powiemy że jeśli current page jest
równy page index wtedy ma zwrócić dzieci
natomiast jeśli nie to ma zwrócić null'a i w ten
sposób jak widzisz zniknęły nam pozostałe strony mamy tylko stronę pierwszą a z racji
że lubię jak coś wygląda ładnie to zróbmy tutaj jeszcze coś takiego że
dodajmy tutaj faktycznie coś co będzie przypominało chociaż jakąś
stronę okej
mamy taką super prostą strukturę ale jest to w jakimś tam boksie zamknięte wygląda to ciut
lepiej jak już tak
się bawimy w bulmę to myślę że jeszcze możemy zmienić tutaj nasze buttony żeby
wyglądały też dobrze okej
wygląda to już dużo lepiej oczywiście jak zwykle nie wpisałem class name
tylko class jakieś dziwne przyzwyczajenia tutaj
w page właściwie tylko current page czy możemy wyciągnąć okej
i teraz uwaga chwila prawdy nasz
multi-step form działa oczywiście nie przechowuje stanu
między jednym a drugim przejściem i tym w ogóle nie będziemy się zajmować
tutaj w tym dziale ponieważ to już jest jakby część która jest mocno poza
tym co oferuje compound component to znaczy że można to oczywiście wprowadzić
natomiast to nie jest coś co sprawi że lepiej zrozumiemy jak działa compound
components że będę w stanie to lepiej wytłumaczyć a zajęłoby to tylko czas więc
zajmiemy się tylko tym żeby zaimplementować tutaj logikę związaną
właśnie z reużywalnością tych elementów i z pewną taką swobodą wpływania
na to co gdzie ma się renderować problemem który teraz napotykamy jest oczywiście
to że jak sobie przeskoczymy o kilka oczek w lewo
czy w prawo to nam to znika ponieważ jesteśmy albo na minusie albo jest ten indeks za wysoki
więc powinniśmy jakoś zacząć wykrywać ile tych stron
tak naprawdę w naszym wizardzie w naszym multi-step formie żeby
na przykład zablokować wysyłanie albo tak jak mówiłem na początku żeby wyświetlić submit
button i włączyć disable na ten button next
żebyśmy nie mogli tego przeskakiwać ale tym zajmiemy się już w następnej lekcji