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 udało nam się stworzyć dropdown
który póki co jest totalnie niefunkcjonalny ponieważ nie jest dropdown'em tylko
po prostu listą którą możemy sobie klikać i inputem który w żaden sposób nie jest powiązany
z tym wszystkim ale zaraz do tego dojdziemy ponieważ teraz zainstalujemy
sobie w naszym projekcie downshift więc pierwsze co trzeba zrobić to oczywiście właśnie
zainstalować korzystając z npm
albo z yarna jeśli wolisz okej
i po zainstalowaniu tego możemy zaimportować sobie teraz downshift do naszego
komponentu a właściwie widoku i
wykorzystać go po prostu jako komponent w tym miejscu oplatając
wszystko inne właśnie w niego i
wewnątrz wyciągając sobie niektóre rzeczy jako
render propsy właśnie tutaj tak jak na tym przykładzie więc na
razie chcemy tylko właściwie is open input value
i get input props oczywiście
ja zgaduję nie mam pojęcia czy dobrze robię is
open potrzebuję do tego żeby wyświetlać dropdown'a input value potrzebuję
do tego żeby wiedzieć co wpisuję w input i get input props mam wrażenie
że jest spięte właśnie z input value ale zaraz to się
okaże tak wynika z tego przykładu więc
teraz wkleiłem sobie to wszystko tutaj get
input props podam do mojego inputa i
teraz gdzieś nad tym inputem sprawdzimy czy input
value faktycznie przejmuje to co dostaje ten input więc
teraz jak tutaj wpiszę na przykład apple tak czyli input value
dokładnie wie co dostaje input z tego względu że input dostał odpowiednie
propsy zamknięte tutaj w tej funkcji ta funkcja zwraca nam
po prostu wszystkie potrzebne props'y które musielibyśmy podać normalnie do inputa ale
downshift ładnie to pakował właśnie w taką funkcję która dba
o to żeby on po prostu to wszystko miał więc z racji że wiemy
już co zawiera input to teraz
możemy zrobić coś takiego że oprócz map zrobimy
sobie jeszcze items filter item i
wydaje mi się że możemy zrobić tutaj item value contains
input value includes
zawsze zapominam która to jest metoda chyba includes dobra
tylko teraz tak
właściwie to jest tak jak chciałem czyli wpisuje coś i od razu pokazuje
mi czy jest taka opcja do wyboru więc to
już mamy załatwione no i teraz jeszcze zostaje nam
to żeby faktycznie ten dropdown się pojawiał w momencie kiedy zaczynamy coś
wpisywać i tutaj mamy ten tę klasę is active jak
ją wywalamy to nam to znika więc moglibyśmy zrobić to na dwa sposoby albo zostawić
ją tutaj na zawsze i po prostu to dropdown menu wyświetlać na
podstawie tego propsa is open jeśli on jest prawdą jeśli
jest true to wtedy wyświetlamy naszą listę
i teraz jeśli wpiszę apple na przykład okej to mamy to faktycznie
ale możemy to zrobić to inaczej może trochę w bardziej elegancki sposób
też wydaje mi się że to będzie działać czyli zaimportujemy sobie
tutaj cx from class names i
następnie tutaj użyjemy
sobie cx i
użyjemy is active tylko wtedy jeśli is
open to prawda zaraz zobaczymy czy to będzie działać teraz
zaczynam wpisywać tak dokładnie czyli to faktycznie działa
is open zadbał o to żeby po prostu ten dropdown wyświetlał
się w momencie kiedy zaczynamy coś wpisywać kiedy usuwamy coś albo
kiedy nie mamy nic fajnie więc to nam działa ostatnią
rzeczą którą musimy zrobić to faktycznie dostawać informację że wybraliśmy
coś w momencie kiedy kliknęliśmy na jakiś item więc
wybieram sobie myszką grape i dostajemy informację że wybraliśmy grape więc
w dalszym ciągu będę posługiwał się logiką z tego przykładu tutaj wszystko
jest w miarę intuicyjnie rozpisane więc z tego co widzę to
żeby downshift wiedział co wybrałem to muszę podać zarówno
menu props jaki item props i do item props widzę że muszę podać
kilka jeszcze rzeczy więc teraz to zrobię tylko sobie wyciągnę
stąd get menu props get item props i
coś jeszcze potrzebuję selected
item może zobaczymy czy coś mi to da selected
item będzie włączone w momencie kiedy coś wybiorę
i tutaj też będę miał taką klasę is active z tego co pamiętam
z bulmy więc zaraz się tym zajmę tylko najpierw tak tutaj
muszę dodać funkcję get menu props tutaj
muszę dodać get item
props tutaj podaję obiekt z opcjami i
teraz muszę wyciągnąć sobie dobra to zrobimy tak value
a oprócz tego jeszcze index do czegoś ten index
widzę że jest mu potrzebny i key to będzie value index
to będzie index i item to będzie u nas value
gdyby item nazywało się item po prostu
to mógłbym to wpisać tak samo jak indeks
w sensie teraz jakbym tutaj index to mógłbym
wpisać równie dobrze index index ale z racji że item u nas tak naprawdę
jest value które przekazujemy z item'u bo każdy
item ma value w postaci stringa to chcemy podać jako item value
bo jak już coś klikniemy jak już coś wybierzemy to chcemy żeby to był
string a nie obiekt pewnie to nabierze sensu jak
zaraz to poustawiamy sobie zobaczmy
tylko co się teraz dzieje okej fajnie
jak kliknę grape to wybiera mi się tutaj grape ale
super więc jeszcze jedna rzecz została
class name te class name
zarówno tutaj gdzie używałem tego cx jak i
tutaj powinny być w constach w tym komponencie przed
słowem return ale z racji że robimy to teraz tak trochę na
szybko to nie będziemy się przejmować tym więc mogę sobie to spokojnie wrzucić
wąsy cx i teraz tak
podajemy dropdown item
button is
white oraz obiekt w którym powiemy
że is active jeśli value
jest równe selected item
coś chyba źle tu okej selected
item w tym miejscu w tym miejscu jest
git to wywalam i zaraz zobaczymy czy faktycznie
bulma zadziała z czymś takim tutaj chyba logika jest taka sama tak dobra
wybieram sobie grape tak
więc teraz wybrałem pear i
nawet jak to usunę to to pear jest zaznaczone jest na
takim ciemniejszym tle więc to znaczy że ona jest jakby selected item dostaje
te klasy active więc tak tak to wyglądało stworzyliśmy
sobie prosty dropdown dzięki któremu możemy sobie wybierać różne
opcje oczywiście tutaj można by było to jeszcze jakoś powalidować
jeszcze jakieś inne rzeczy porobić żeby to było bardziej funkcjonalne
żeby można było na przykład przeklikiwać się klawiaturą przez
poszczególne opcje natomiast to są już takie rzeczy które są
specyficzne dla danego komponentu i teoretycznie nie potrzebują tego robić
bardziej chciałem ci pokazać jak wykorzystać render propsy podawane
przez downshift to jest taki klasyczny przykład tego właśnie jak można te render propsy
wykorzystać jeśli jakaś biblioteka dostarcza tego typu rozwiązanie więc
mam nadzieję że teraz już wszystko jest dla ciebie jasne w jaki sposób możemy czerpać korzyści
właśnie wykorzystując render props w naszych komponentach zrobiliśmy
tutaj no już całkiem taki zaawansowany komponent można go oczywiście rozbudować
zachęcam cię do tego żeby trochę się jeszcze nim pobawić natomiast my w następnej lekcji przechodzimy
już do kolejnej rzeczy czyli do hooks'ów