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
Okej przyszła pora na zwieńczenie naszych trudów związanych z hook'ami
i na stworzenie naszego customowego hooka to jest właśnie fajne w react
że póki to nic innego jak po prostu funkcje które przyjmują różne argumenty i
na podstawie tego zastosowują jakąś po prostu logikę którą tam mają
pod sobą i równie dobrze my możemy takie hooki tworzyć po prostu tworząc
funkcje które później za importujemy do naszego komponentu i wykorzystamy tak
żeby po prostu dzielić jakąś logikę między poszczególnymi komponentami
w sposób który do tej pory nie był właściwie dostępny w react i w react
będziemy rozwijać sobie naszego hook'a to za pewne
rzeczy które wcześniej robiliśmy za pomocą render propsów albo za pomocą higher
order components nagle będziemy mogli robić właśnie za pomocą hooks'ów i to dużo bardziej
elegancki sposób więc mam wrażenie że ci się to spodoba teraz sobie właśnie coś takiego
stworzymy najpierw pokażę ci potrzebę która spowoduje
że będziemy musieli tego hook'a stworzyć a następnie pokażę ci jak możemy do tego problemu podejść
żeby właśnie to rozwiązać i żeby stworzyć własnego hook'a do współdzielenia jakiejś
logiki oczywiście do przygotowania komponentów jak zwykle skorzystamy
sobie na z naszej niezawodnej bulmy i tutaj będziemy potrzebować tak naprawdę
dwóch komponentów które są zupełnie inne ale będą
współdzielić jeden pewien element między sobą więc weźmiemy sobie
modal po prostu kopiując to co mamy tutaj pamiętając błędy
z poprzednich lekcji od razu podmienimy sobie class na class name modal
w bulmie żeby się pojawił musi być is active tutaj ten komentarz wywalimy okej
już wiemy że to jest tylko na razie nic jeszcze nie zawiera więc może weźmy
sobie na przykład message które również skopiujemy i
wrzucimy do div'a który ma klasę modal
content i żeby tak bardzo nam się ten kod nie rozwlekał to może
skróćmy trochę ten tekst który jest wewnątrz zobaczmy czy nam się pojawiło
okej mamy nasz modal tą klasę is active na razie sobie wywalimy
żebyśmy mogli operować na naszej stronie i
w drugim widoku na przykład w tips stworzymy sobie jakiś inny komponent który powiedzmy
że będzie buttonem który będzie odpalał
taki tooltip czyli powiedzmy taki modal tylko bez tego całego
zaciemnienia i tak dalej więc pierwsze co to stworzymy sobie button który
będzie miał klasę button is large
is primary nazwiemy
go open tooltip okej mamy i
teraz pod nim stworzymy sobie taką
prostą modyfikację nawet
możemy z niej wywalić ten button bo nasz button
będzie po prostu trigger'ował otwarcie i zamknięcie tego elementu nawet
jest w tym samym kolorze nazwijmy że to będzie taki brzydki tooltip
on może powinien być krótszy i tak dalej ale jest w tym samym kolorze więc
to wygląda faktycznie jakby te elementy były ze sobą w jakiś sposób połączone więc możemy teraz
wziąć taką imitację tooltip'a na potrzeby tej lekcji i teraz
stwórzmy sobie logikę która pozwoli nam na otwieranie i zamykanie tego tooltip'a
więc na pewno będziemy potrzebować tutaj use state i
z tego use state wyciągniemy sobie open tooltip is set
tooltip visibility albo
tak możemy to tak nazwać możemy
do tego use state i oczywiście na początku będzie false
żeby manipulować widocznością
tego tooltipa to musimy sobie jeszcze tutaj stworzyć takie
renderowanie warunkowe oczywiście tu zrobiłem błąd to
pierwsze to będzie is tooltip open
przepraszam ponieważ tutaj będzie ten boolean który właśnie będzie decydował o tym
czy nasz tooltip jest otwarty czy nie jeśli jest to
zwracamy to co mamy w tym miejscu okej
i teraz nasz button będzie po prostu on
click wywoływał funkcję która będzie odpalać nasz
tooltip więc tutaj dajemy sobie on click przekazujemy
funkcję strzałkową ponieważ do naszej funkcji set tooltip
visibility będziemy podawać argument który w tym przypadku
będzie przeciwnością tego czym teraz jest
is tooltip open czyli jeśli jest zamknięty to go otwieramy i odwrotnie
i oczywiście
to działa a teraz wrócimy sobie do naszego widoku z modalem
i zróbmy dokładnie to samo trochę przyspieszę tutaj
żeby nie zajmować czasu bo to
jest po prostu rutynowe możesz to wykonać samodzielnie lub razem ze
mną tutaj
oczywiście musimy zaimportować jeszcze class names wynika
to z faktu że tutaj modal akurat korzysta z is active
żeby się pojawić moglibyśmy tutaj wpisać is active na zawsze i robić to dokładnie
tak jak tutaj renderowaniem warunkowym ale umówmy się że nie byłoby to
najlepsze wyjście więc żeby zachować
poprawność to teraz wykorzystamy sobie class names i
oczywiście musimy jeszcze dodać jakiś button który będzie otwierał nam
modal i tutaj nie będziemy zaprzeczać poprzedniemu
stanowi ponieważ button będzie zawsze będzie otwierał modal natomiast
tutaj mamy drugi button który będzie go zawsze zamykał więc
tutaj po prostu podany set moda visibility false i wtedy
one się będą wzajemnie jakby wykluczać jeden otwiera drugi zamyka temu
button'owi jeszcze tylko nadamy jakąś klasę żeby to faktycznie wyglądało jak button
okej
modal się otwiera klikam na krzyżyk modal się zamyka teraz to
co odzyskać to co chciałbym tutaj współdzielić między tymi dwoma komponentami
to to żeby po kliknięciu gdzieś poza te
elementy również żeby to się zamykało zarówno tooltip który
teraz się zamyka tylko jak kliknę na button co w przypadku user
experience gdzie ten tooltip faktycznie jakby miałby coś podpowiadać powiedzmy że pod spodem
mielibyśmy jakiś input i chcielibyśmy go zamknąć to domyślnie zawsze
kliknięcie poza ten element sprawia że on się zamyka natomiast on się nie zamyka co
byłoby pewnie frustrujące podobnie jak nasz modal musimy wycelować ten malutki
button co jest nie do końca wygodne i teraz normalnie musielibyśmy
zrobić to albo właśnie higher order componentem albo jeszcze jakoś inaczej albo
po prostu napisać dwa osobne elementy logiki które
zamykałyby te komponenty natomiast przy użyciu hook'a
który zaraz stworzymy będziemy mogli współdzielić tę logikę i będzie
to naprawdę bardzo fajnie rozwiązane