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 napisaliśmy sobie kolejny test który sprawdza
nam czy podane propsy które podajemy do naszego inputa faktycznie
są wyświetlane chodziło o placeholder i czy jeśli nie podajemy żadnego
placeholdera to wyświetla się default'owy folder który ma wartości your value
a w tej lekcji sprawdzimy sobie co możemy zrobić żeby weryfikować
wartość którą podajemy do naszego input'u więc myślę
że możemy sobie schować te dwa testy żeby nam nie przeszkadzały
i napiszemy sobie kolejny niech będzie it displays
proper value jak
zwykle funkcja strzałkowa i może żeby trochę urozmaicić nasz komponent i dodać
mu jakiś kolejny element to będziemy teraz sobie to pobierać za pomocą get
by label text label text działa w taki sposób że
co prawda łapiemy input ale za pomocą play belki która
będzie nad tym inputem ponieważ normalnie jak na stronie jak klikamy sobie w label
jeśli ona jest poprawnie zrobiona czyli jeśli ma atrybut for który łączy się
z id naszego inputa to po kliknięciu w label również focusujemy
się na inpucie więc
teraz wyrenderujemy sobie nasze input i teraz pierwsze co możemy zrobić to
podać tutaj get by label text spróbujmy
na przykład name to be in the document i
oczywiście nasz test failuje ponieważ nasz komponent w ogóle nie ma czegoś
takiego jak label więc tym bardziej nie możemy sobie nic
tutaj po nim targetować i teraz stworzymy sobie tutaj fragment
który pozwoli nam na dodanie label i
wypadałoby żeby to co podajemy tutaj do for i id było również propsem
myślę że to samo możemy podać też dla name więc
nazwijmy sobie tego propsa name będzie też label od razu wpiszemy okej
teraz to nam na razie wystarczy jeśli podamy teraz tutaj propsa name w
którym podamy name wielką literą okej
pierwszy błąd powinienem podać html for to
się często zdarza w react'cie że się o tym zapomina a
druga rzecz jest taka że my pobieramy sobie ten nasz input za pomocą label text
a label text mamy pusty co z resztą widzimy tutaj ponieważ
nie podaliśmy propsa label do naszego komponentu w tym miejscu
jeżeli teraz padamy tutaj name to nasz komponent zostanie znaleziony okej
więc pierwsze koty za płoty naprawiliśmy nasz komponent i
tak naprawdę jak sobie spojrzymy to nasz komponent ewoluował zrobił
się trochę bardziej skomplikowany i ten test właściwie spełnia
bardzo dobrze warunek który mamy tutaj renders input element ponieważ ten input element
stał się dość zaawansowany więc możemy w sumie zastąpić ten pierwszy
test tym co napisaliśmy teraz on lepiej to sprawdza niż po prostu sprawdzanie
czy mamy placeholder bo to czy mamy default placeholder mamy w tym miejscu przy
okazji możemy tutaj zrobić mały refractor wywalając słowo default wracając
do tego pomysłu żeby podmienić tutaj też ten placeholder
tekst możemy
sprawdzić teraz już za jednym razem czy się wyświetla domyślny
placeholder i nowy placeholder jeśli
podamy propsa czyli
wykorzystujemy rerender podajmy input
z placeholderem już tym razem nasz
test się nie zepsuł co znaczy że wszystko działa jak trzeba teraz możemy sobie ten zamknąć
ten sobie zamknijmy i wracamy teraz do naszego gagatka tutaj
w tym miejscu i wracamy do tego co założyliśmy sobie tutaj czyli displays
proper value więc jak zasymulować event pisania czegoś w
naszym komponencie jak sobie zerkniemy tutaj to mamy coś takiego jak firing events
więc jeśli sobie tutaj zobaczymy to możemy na przykład
zauważyć że mamy coś takiego
jak fire event change i mamy nawet dla właściwie idealnie
dla naszego komponentu czyli robimy event change łapiemy
sobie za pomocą label text nasz komponent i
podajemy co ma być w nim zawarte przejdźmy
sobie do naszego widoku to jest dobry pomysł co tutaj
mamy że zamienić to name na po prostu regex'a
w ten sposób i
z racji że fire event to jest coś co nie wyciągamy z render'a to musimy
to wyciągnąć bezpośrednio tutaj z naszej biblioteki okej
wpiszmy sobie tutaj roman
i teraz zakładamy że
to co mamy tutaj czyli nasz input
to have value roman albo
nie najpierw zrobimy fava i
teraz jak sobie zobaczymy expected element to have value fava
czyli tego oczekiwaliśmy a to mamy wpisane i mamy to
nawet tutaj więc jeśli wpiszemy sobie roman to
wszystko się zgadza i pierwsze usprawnienie jakie przychodzi mi tutaj
do głowy mamy trzy razy powtórzone to samo to jest skandal więc
wycinamy to tworzymy
sobie consta input i
podajemy go wszędzie tam gdzie był potrzebny i tutaj
jeszcze słowo wyjaśnienia bo może cię zastanawiać skąd się wzięło to target value
jak sobie przypomnisz jakąkolwiek funkcję którą
pisaliśmy na przykład handle input ona
zawsze była tutaj w komponencie wpisana i ona zawsze przejmowała event właśnie
i później z tego event wyciągaliśmy sobie
event target value tak wyglądało to co potrzebowaliśmy
żeby dostać się do wartości inputa do którego coś zostało
wpisane i właśnie to tutaj robimy imitujemy tutaj event change
który tak naprawdę przekazuje obiekt czy też którego działaniem
wynikiem jest stworzenie obiektu w którym między innymi znajduje
się pole target czy też obiekt target w którym z kolei znajduje się pole value i
z racji że tylko to testujemy to nie musimy tworzyć sobie całego tego obiektu ze
wszystkimi innymi polami potrzebny nam jest tylko to target i value i właśnie dlatego symulujemy właśnie
stworzenie takiego eventu w którym podajemy value
właśnie w taki sposób identyczny jak byśmy wyciągali z tego eventu rzeczy
które będą potrzebne w naszym komponencie okej i
w ten sposób napisaliśmy kolejny test a w następnej lekcji trochę udziwnimy
sobie sposób podawania wartości do naszego inputa i będziemy również to testować to będzie
mega ciekawe