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ść w poprzedniej lekcji wyjaśniłem ci podstawy tego jak tworzyć render
propsy ale zanim przejdziemy jeszcze do jakiś praktycznych przykładów chciałbym
ci jeszcze pokazać taki jeden sposób który można tutaj zastosować ponieważ możemy
tutaj wykorzystać faktycznie propsa który nazywa się render i do niego wrzucić jakieś
dane następnie przy pomocy tego propsa tutaj
w tym my component wyciągnąć sobie te dane i zwrócić właśnie jsx'a
wzbogaconego o te dane natomiast możemy jeszcze zrobić to na jeden sposób i często
pojawiają się też takie przykłady w sieci jeśli zrobimy sobie my component
w ten sposób i tutaj wykorzystamy tak naprawdę
propsa children czyli to co wrzucimy do wnętrza tego
komponentu to na pewno już wiesz z poprzednich moich kursów więc
tutaj w tym miejscu jeśli podamy props children tutaj
wrzucimy hello destrukturyzowanym propsy więc
nie muszę już pisać props children wystarczy children mamy to hello
i teraz możemy też zrobić coś takiego do tego children podamy
również jakieś argumenty to znaczy wykorzystamy tak zwane children
as a function czyli zrobimy to w ten sposób stworzymy po prostu z tego children
funkcje raczej wywołane funkcje i tutaj podamy argument na przykład
roman tak jak w poprzednim render propsie i teraz nic
tam się nie wyświetli ponieważ wywołujemy tutaj funkcje i musimy sobie teraz te
funkcje zadeklarować wewnątrz naszego komponentu otwierając
wąsy i podobnie jak w przypadku otwierania tych wrót do kontekstu
jak ja to nazywałem możemy zrobić coś takiego tutaj
wpiszemy na przykład hello tutaj
oczywiście nawiasy okrągłe a nie wąsy okej
i teraz z racji że wywołujemy
tutaj children z jakimś argumentem to możemy sobie ten argument podobnie
jak w przypadku tego render propsa wyciągnąć możemy go nazwać data
a możemy go nazwać roman możemy go nazwać jak chcemy chodzi
tylko o to że teraz możemy sobie to co podaliśmy w tym miejscu wykorzystać
właśnie wyciągając z tej funkcji jest to schemat niemalże
idealny do tego jak korzystamy z kontekstu więc
to jest taki drugi sposób na render propsy i on też się pojawia w sieci z
takiego rodzaju render propsów korzysta na przykład biblioteka
downshift jest to biblioteka stworzona przez
Kent C. Dodds'a czyli tego samego gościa co stworzył react testing library
i pozwala nam ona na zarządzanie naszymi inputami to znaczy dodawania do nich
pewnych funkcji pewnych możliwości które normalnie musielibyśmy pisać sami a
tak korzystamy sobie z komponentu downshift i jak widzisz tutaj wyciągamy
sobie najróżniejsze rzeczy i następnie dodajemy jej już w naszych inputach normalnie
jako propsy więc jest to bardzo fajna biblioteka my
teraz sobie napiszemy jakiś własny przykład który wykorzystał
właśnie 1 i 2 schemat i zobaczysz który będzie dla ciebie wygodniejszy więc
teraz to sobie zamkniemy ten komponent możemy już sobie wyrzucić i
to co zrobimy to przekształcimy sobie nasze higher order komponenty właśnie na render
propsy pokażę ci jak możemy to zrobić uporządkujmy
sobie najpierw trochę nasze widoki wywalmy może te kolumny z
docs'ów one wtedy zostają tylko w tipsach okej
najpierw przekształcimy sobie ten prostszy higher order component czyli ten
który znajduje się w docs'ach mamy tutaj items list
ten import możemy sobie usunąć zobaczmy sobie na komponent items list on wykorzystuje
hoc'sa with collapsed więc teraz sobie do
niego przejdziemy i spójrzmy co on tutaj ma tak
naprawdę on zwraca nam komponent i teraz
możemy sobie wykorzystać już tylko ten komponent klasowy nie
musimy zwracać komponentu z komponentu ten
render cały sobie na razie wywalimy nazwiemy
to jakoś inaczej może po prostu
collapse i mamy tutaj funkcję i state
więc teraz wykorzystamy sobie funkcję render i
z niej zwrócimy this props render
wywołamy funkcję i
teraz tutaj wewnątrz funkcji render
i teraz uwaga funkcja render nijak się ma do propsa render to
jest props po prostu który nazywa się render on mógłby się nazywać jakkolwiek
kangur na przykład i też by działało więc to że akurat
się zdarzyło że ta funkcja nazywa się tak samo jak render props ponieważ
tak taka jest konwencja po prostu tego patternu to w żaden sposób nie
wpływa jedno na drugie nie mylmy tego ze sobą i teraz wewnątrz naszej
funkcji render stwórzmy sobie obiekt który podamy
tutaj do naszej funkcji w propsie render nazwijmy
go render props i wrzucimy sobie
tutaj is collapsed oraz
te funkcje toggle w taki sposób
teraz możemy te render propsy podać sobie tutaj
oczywiście wszystko nam się zepsuje ale tym się na razie nie
przejmujemy przejdźmy sobie teraz do items list wywalmy
tego hoc'a z tego miejsca zmienimy sobie jeszcze nazwę pliku
i przeniesiemy go do innego folderu ten
folder może nazywać się na przykład providers czyli właśnie to będą komponenty
które coś zapewniają które dostarczają jakieś dane i teraz w tym
folderze providers przeniesiemy sobie ten with collapsed i zmienimy
mu nazwę na collapse dobra
teraz tutaj w items list importujemy
już tak jak trzeba collapse z providers
dobra i teraz wewnątrz naszego komponentu wykorzystamy
sobie ten collapse weźmiemy sobie propsa render tutaj
mamy teraz błąd wynikający z tego chyba że nasz
inny komponent korzysta sobie z tego with collapsed więc
na razie po prostu zwróćmy tutaj columns
wywalmy też te higher order komponenty i
tak teraz tylko się czepia do tego widoku który naprawimy sobie w kolejnej lekcji więc
mamy collapse oczywiście tutaj nic nie działa jeszcze
bo póki co tylko przenieśliśmy sobie nasz render props tutaj
musimy jeszcze z tej daty wyciągnąć dane które
podaliśmy czyli jeśli sobie zobaczymy na provider mamy
tutaj obiekt w którym mamy is collapsed i toggle więc
mamy tutaj dwie opcje które możemy sobie wykorzystać albo możemy zdestrukturyzować
w tym miejscu is collapsed i toggle albo możemy podać tutaj data
i tutaj po prostu zrobić data
kropka toggle i data kropka
is collapsed i teraz ku naszemu zdziwieniu oczywiście
data tutaj jest niezdefiniowana bo podajemy ją dopiero tutaj więc musimy
coś zrobić żeby ten conditional tutaj miał dostęp
do tej daty i możemy to zrobić najprościej po prostu z tego list class
tworząc funkcję która zwraca nam tego tx'a i ona przyjmuje
data którą z kolei podajemy tutaj w
ten sposób czyli zrender propsa data idzie do naszego list class jako
argument tutaj jest ona parametrem z którego wyciągamy
sobie is collapsed ale możemy też to zrobić prościej po prostu
wyciągnijmy sobie is collapsed i
toggle wtedy możemy usunąć sobie to data a
tutaj możemy przekazać tylko is collapsed do
naszego list class w tym miejscu podać również do zdestrukturyzowane is collapsed wyciągnąć
sobie to is collapsed jeszcze raz tutaj w list class i podać je po prostu w tym
miejscu żeby warunek działał i teraz oczywiście coś
się zepsuło zaraz zobaczymy to
ciekawe odpalmy sobie collapse
i zobaczmy czy funkcja toggle nam się w ogóle odpala
ta funkcja toggle nam się odpala sprawdźmy
jeszcze w takim razie przy każdym odpaleniu jak
wygląda nasze this state is collapsed dobra
tu się wszystko zmienia więc coś zepsułem tutaj
w naszej klasie w naszym items list w
tym miejscu do
list class podajemy is collapsed być
może niepotrzebnie robiłem tutaj
destrukturyzację dokładnie ta
destrukturyzacja tutaj w tym miejscu była zupełnie po nic możemy
po prostu nazwać parametr tak samo jak argument który podajemy wtedy
po prostu będziemy widzieć że to jest to samo czyli jeszcze raz
ostatni raz przejdźmy sobie przez cały ten cykl w tym komponencie
tutaj akurat mamy jakiś problem z kluczem
którego nie podawałam ale tym się na razie nie przyjmujemy na razie nic się nie psuje nic
tutaj nie nie zmieniamy więc to jest w porządku później się tym zajmiemy
odpalmy sobie provider stworzyliśmy właśnie stworzyliśmy komponent
który wykorzystuje render propsy wrzuciliśmy go do providerów nazwaliśmy
go collapsed a właściwie collapse nie czas przeszły on
ma state tak samo jak ten poprzedni hoc ma toggle tak samo jak w poprzedni hoc i
wewnątrz funkcji render nie zwracamy żadnego jsxa zwracamy tylko propsa
który nazywa się render i do tego propsa wykorzystujemy
go jako funkcję i podajemy jako argument dwie rzeczy podajemy
stan naszego komponentu collapse i funkcję która pozwala ten stan
zmieniać i teraz ten komponent wykorzystaliśmy sobie
w items list z propsa render destrukturyzujemy
sobie te dwie rzeczy które podawaliśmy w komponencie collapse czyli is collapsed
toggle wyciągając je możemy je podać normalnie
tutaj jako funkcję po kliknięciu buttona ta funkcja faktycznie
działa i jest collapsed czyli nasz boolean decydujący o tym
czy lista się wyświetla czy też nie został wykorzystany do tego żeby
sterować naszymi klasami żeby móc dostać
się do tego scope'u do tej wartości po prostu
która się znajduje w scope'ie tutaj w tej funkcji musieliśmy podać
w list class is collapsed jako argument
a z samego list class zrobić po prostu funkcję która zwraca nam dopiero tego
cx'a czyli te class names'y mam nadzieję że ta ścieżka jest dla ciebie dość
prosta ponieważ w następnych przykładach zrobimy sobie jeszcze trochę bardziej skomplikowane rzeczy
w takim razie lecimy