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
Zatrzymaliśmy się w momencie kiedy mamy już taki podstawowy compound component
jednak nie robiłam żadnych spektakularnych rzeczy ponieważ po prostu przeskakujemy
ze strony na stronę ale tak naprawdę ten stan który mamy zawarty w naszym compound component
nie jest jakoś w pełni wykorzystywany i tutaj pomyślałem o tym żeby stworzyć właśnie
dodatkowy warunek który sprawia że na przykład previous w momencie kiedy będziemy na pierwszym
slajdzie będzie wyłączony i kiedy będziemy na ostatnim slajdzie podobnie będzie
z next i przy okazji pojawi nam się button submit więc teraz tym
się zajmiemy i to jest jeden z takich problemów który można by było rozwiązać na
kilka sposobów jak sobie pomyślimy o ten sposób przekazywać informacje
do komponentu o tym ile posiadamy stron to to z jednej strony można by było zrobić
to w sposób taki bardzo inwazyjny imperatywny i po prostu powiedzieć temu
głównemu komponentowi słuchaj liczba stron
który będzie zawierał to cztery z tym że jest to naprawdę
takie nieeleganckie i tak naprawdę mamy tutaj już w tym momencie dwa takie
elementy o których musimy pamiętać a tutaj wpisałem cztery a mamy trzy nieważne ale
z jednej strony mamy tutaj page index
który musimy podawać z ręki i tego nie przeskoczymy akurat w tym momencie myślę
że spokojnie można by było na to znaleźć jakieś rozwiązanie ale zostawmy
to na potrzeby kursu nie chcę tutaj komplikować tego kodu chcę pokazać po prostu jak to
wszystko działa natomiast to moglibyśmy sobie odpuścić i zastanowić się w jaki sposób
można policzyć te strony w naszym komponencie jedną
z rzeczy która mogłaby nam w takim przypadku przyjść do głowy to na przykład wykorzystać sobie metodę
react children
map która pozwala nam na iterowanie po dzieciach
w naszym komponencie wygląda to w taki sposób
możemy sobie nawet wylogować każde dziecko
tutaj myślę że to możemy zastąpić child
żeby to było bardziej czytelne i teraz jak sobie zobaczymy to
każdy z wylogowanych dzieci każde z wylogowany dzieci posiada
posiada propsy wszystko co posiada właśnie komponent i możemy
sobie na przykład sprawdzić ile dzieci posiada propsa page index więc
zróbmy na przykład coś takiego że nazwijmy to sobie page number albo
żeby było żeby było dokładnie total page number
i z tej metody map która nie jest co
prawda taką zwykłą metodą map którą możemy stosować na tablicach działa
ona trochę inaczej tam jest trochę magii ale można o niej myśleć w taki właśnie sposób że
jest to taki map ale do dzieci w naszym komponencie i
teraz załóżmy że chcemy zwracać z tej z tego map tylko
dzieci które posiadają propsa page index więc
pytamy czy child props page index
istnieje jeśli tak to zwracamy dziecko
jeśli nie zwracamy null i na końcu tego
dodajemy length czyli sprawdzamy długość tablicy która nam pozostanie
po tej operacji i nawet sobie możemy wpisać tutaj po prostu total
page number i widzimy że jest liczba 3 więc teoretycznie coś
takiego działa ale z drugiej strony jeśli sobie opleciemy na przykład
któraś z tych stron diva a przecież właśnie jest to
jedna z korzyści jakie daje nam jakie daje nam compound
component że możemy sobie właśnie oplatać jakieś elementy w dodatkowe
elementy i tak dalej w momencie kiedy metoda
map leci przez nasz komponent sprawdza co my tutaj mamy mamy stronę
mamy stronę mamy diva mamy
kontrolki i teraz on nie sprawdza co jest
w tym divie to nie jest tak że on to robi rekursywnie on po prostu zagłębia
się w każdy element i sprawdza co tam jeszcze jest dalej on leci tylko po tej zewnętrznej
warstwie jeśli sprawdzi że ten komponent nie ma akurat element
ten element nie ma propsa page index tego po prostu oleje i nie
doda go do naszej liczby więc jest to rozwiązanie dość proste ale
na pewno zawodne myślę że można by było tu trochę odwrócić logikę i
zrobić coś innego zaraz zobaczymy czy to będzie działać to
sobie wywalimy jakby tak pomyśleć
o tym w inną stronę czyli co mógłby robić page żeby
powiedział rodzicowi że on w ogóle istnieje i
od razu nasuwa nam się skojarzenie że wypadałoby użyć do tego use effect
z którym może na zamontowaniu naszego komponentu powiedzieć
coś naszemy rodzicowi albo context'owi na przykład więc co on
mógłby mówić na przykład mógłby mówić jaki ma page index i na
razie oczywiście do niczego nam się to nie przyda ale widzimy że mamy tutaj wylogowany
każdy pojedynczy indeks naszych stron które
mamy tutaj podane w tym miejscu to jest ten props więc co
moglibyśmy z tym zrobić moglibyśmy stworzyć sobie na przykład tablice która nazywa się
page indexes na przykład i ona będzie
zbierać te wszystkie indeksy które będą się dodawać podczas
zamontowania do tej tablicy wtedy ta tablica będzie miała swoją długość i
po tej długości będziemy mogli sprawdzać ile mamy stron w naszym komponencie
myślę że ma to sens i można spróbować sobie właśnie
takiego podejścia nie mówię że to jest najbardziej optymalne generalnie w react'cie
to jest jego jakby przekleństwo a zarazem zaleta że on daje
nam pełną swobodę jeśli chodzi o działania takie w javascripcie możemy tutaj wymyślić sobie co chcemy
i będzie to działać lepiej lub gorzej wydaje
mi się że to będzie dość czytelne i takie optymalne
rozwiązanie więc teraz spróbujmy sobie przygotować mamy page indexes i
na pewno będziemy mieli jeszcze jakąś funkcję która będzie nazywać update
page indexes i to
oczywiście będzie zmock'owana funkcja i
teraz wszystko rozegra się naprawdę tak naprawdę tutaj w rodzicu wydaje mi się że
musimy sobie użyć do tego po prostu use state moglibyśmy użyć
use reducer i po prostu złączyć to wszystko w jedno ale wydaje mi się że dwa to jeszcze
jest okej zwłaszcza że te dwa use use state'y będą zajmować się zupełnie innymi rzeczami
więc to jest takie rozgraniczenie nazwijmy
to sobie page indexes funkcje możemy
nazwać zgodnie z konwencją set page indexes i
tutaj oczywiście use state gdzie podamy pustą tablicę
podobnie zresztą jak podaliśmy ją w tym miejscu no to będzie jakby ta sama wartość tutaj
jest po prostu zmock'owana i teraz do naszego context'u nie będziemy podawać
set page indexes tylko stworzymy sobie tutaj całą logikę która będzie odpowiadać właśnie
za to co ma się wydarzyć z tym state'm czyli tutaj sobie stworzymy tak
naprawdę te funkcje update page indexes ona będzie przyjmować page index i
będzie sprawdzać czy page indexes zawiera page
index jeśli tak to wywala nas z funkcji
bo załóżmy że na przykład jakiś komponent zamontuje się
przypadkowo dwa razy czasami react potrafi takie rzeczy zrobić bez
skonsultowania tego z nami więc warto się przed tym zabezpieczyć żeby po prostu jakiś
indeks nie dodał się dwa razy wtedy mielibyśmy trochę problem bo mielibyśmy wartość
większą niż tak naprawdę istnieje więc jeśli istnieje już taki indeks tablicy to
po prostu go nie dodawaj z tej funkcji natomiast jeśli taki indeks
jeszcze się nie pojawił w naszej tablicy page indexes to stwórzmy
sobie set page indexes które przyjmie page
indexes które do tej pory istniało a do tego doda jeszcze jeden page index warto
to tutaj przypomnieć sobie że używamy spread operatora
do tego żebyśmy nie mieli po prostu później tablicy zamkniętej w tablicy wyglądałoby
to w taki sposób i tutaj mielibyśmy ten nowy page index więc tego nie chcemy przy
użyciu spread operatora te wszystkie rzeczy które były dotychczas w tablicy zostały
rozsmarowane po tej nowej tablicy na równi z naszym nowym argumentem
który podaliśmy po przecinku to tak gwoli przypomnienia chcociaż
zakładam że jest to dla ciebie w stu procentach jasne skoro jesteś już na kursie react zaawansowany
dobra i skoro to mamy to możemy sobie to teraz podać
do naszego contextu i podajemy page indexes czyli naszą tablicę która
zawiera wszystkie indeksy które się zamontowały do naszego compound
component a do tego jeszcze dodajemy sobie update page indexes czyli funkcję
która pozwoli nam dodać te nowe i teraz tego
consol loga tutaj w tym miejscu możemy właśnie z zastąpić funkcją
update page indexes którą sobie zdestrukturyzujemy z naszego
contextu podobnie jak robiliśmy to z current page jedyne
co tutaj musimy podać to nasze page index okej tutaj mój błąd
set page indexes ustawia wartość
tego co daliśmy tutaj ale ona nie wie że tu jest
tablica w sensie ona może tutaj wrócić cokolwiek jeśli podamy tutaj stringa
o nazwie grażyna to będzie tutaj grażyna zamiast tablicy więc tego nie
chcemy zapomniałem tutaj dodać tablicy ponieważ
ta funkcja set page indexes przyjmuje jakby cały kształt tego
co będzie zawarte pod postacią tego page indexes i
tutaj oczywiście jeszcze jeden błąd page index jest na tej variable czyli w tym przypadku musimy
to rozumieć tak że page index nie jest tablicą oczywiście roman bo nie
podałeś tej zmiennej co trzeba i teraz żeby przetestować
czy to działa na przykład w buttonach wyciągnijmy sobie nasze
page index page indexes tak
i na przykład na
samym końcu tutaj pod buttonem next wpiszmy
sobie page indexes kropka length wrzućmy
to w jakiś paragraf uwaga powinniśmy
zobaczyć trójkę obok naszego nexta i
tak się właśnie stało więc można tutaj założyć że nasza
funkcja działa i nasze strony się meldują że
istnieją więc możemy sobie na podstawie tej liczby którą teraz przechowujemy pod
pod postacią page indexes kropka length sprawdzić
ile mamy stron i na tej podstawie zbudować jakąś logikę na przykład
taką że jeśli
current page jest równa 1 to
nasz buttono będzie wyłączony to oczywiście mogliśmy zrobić wcześniej tutaj niepotrzebne było
nam to co teraz zrobiliśmy ale ten drugi będzie
już się porównywał do current page page
indexes length i teraz faktycznie to nie
działa page indexes length z racji że mamy trzy strony wynosi
3 a ostatnia strona też wynosi 3 więc
current page jeśli jeśli bieżąca strona jest stroną ostatnią to
wyłączamy nasz button podobnie jeśli chcemy warunkowo wyświetlić nasz button
submit na ostatniej stronie możemy zrobić do tego specjalny warunek który
mówi że jeśli current page jest równa page
indexes length wtedy
ma zwrócić nasz button submit jeśli
nie to ma zwrócić nulla i tyle w temacie i
mamy nasz button submit oczywiście z błędem dlatego nie wygląda jak button tylko nazwę
mu damy button okej nasz baton się wyświetla
oczywiście nic nie robi ale w ten sposób stworzyliśmy sobie logikę która
pozwala nam na sprawdzanie ile mamy stron w naszym
komponencie ile zostało stworzonych więc jest to całkiem przydatna wiedza w
w następnej lekcji pokażę ci co jeszcze możemy z tym zrobić