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ść mamy za sobą już kilka lekcji w których testowaliśmy sobie
nasz komponent napisaliśmy naprawdę kilka takich porządnych testów i teraz
czas na to żeby to trochę zoptymalizować bo jak widzisz mamy tutaj mnóstwo powtarzającego kodu i
to nigdy nie jest dobry pomysł żeby tego typu rzeczy robić pomijając te wszystkie
warunki testy tutaj które napisaliśmy to jest taka jedna rzecz która naprawdę ciągle
się powtarza jest ten setup tutaj ten render który mamy w
każdym tekście generalnie są do tego dwa podejścia kent c dodds
w jednym ze swoich artykułów który się nazywa test isolation with react
pokazuje takie podejście w którym ustawie to tylko raz
a później robi tylko expect'y robi testy z odpowiednim komentarzem nad
każdym testem jest to spoko pod warunkiem że
nie robimy czegoś takiego jak tutaj że mamy na przykład trzy razy coś pozmieniane moim zdaniem
wtedy to trochę traci na czytelności i wydaje mi się że ten output
z konsoli jest ładniejszy mimo wszystko kiedy mamy te odseparowane w ten sposób to znaczy
to jest tylko moje zdanie nie chcę tutaj dywagować i kłócić się z kent c dodds'em
wiadomo że on jest dużo większym autorytetem natomiast pokazuje on też taki drugi
sposób który mówi że również jest dobry i on do mnie zupełnie przemawia który mówi
że tworzymy sobie funkcję setup'ową a dopiero później w testach
używamy tej funkcji więc teraz ją sobie napiszemy od podstaw bez podglądania co
tam się dzieje to jest naprawdę bardzo proste wystarczy że na
samej górze naszego testu to znaczy pliku testowego właściwie stworzymy sobie coś
co nazwiemy na przykład render input to będzie funkcja strzałkowa która
będzie przyjmować propsy które będziemy podawać ewentualnie do naszego komponentu jeśli
taka potrzeba zaistnieje później tutaj wewnątrz
tej funkcji musimy sobie stworzyć consta utils ponieważ
to on będzie zawierał te wszystkie rzeczy które do tej pory wyciągnęliśmy tutaj z render
w postaci restrukturyzacji użyjemy po prostu render i
nadamy naszemu komponent'owi wymagane topsy
i nic więcej nie podajemy tutaj placeholdera
a dodatkowo w niemal
każdym teście wyciągamy sobie input w ten sposób i myślę że równie
dobrze możemy to zrobić właśnie w tym miejscu z tym wyjątkiem że tutaj
nie mamy zdestrukturyzowanego tego get by label text ponieważ wszystko kryje się pod
postacią tego utils musimy zatem wyciągnąć z tego obiektu
utils i na samym końcu zwrócimy
sobie nasze utils i osobno nasz input w
ten sposób jeśli podamy na przykład jakieś nowe propsy do naszego do
naszej funkcji w tym miejscu tutaj nie
napisałem tego props jeśli będzie
potrzeba dodania jakichś nowych propsów do naszego komponentu to możemy
podawać to jako argumenty do tej funkcji render input i one zostaną przekazane tutaj w tym
miejscu i teraz spróbujmy zastąpić sobie na przykład
ten test właśnie tym sposobem właściwie nie cały test
tylko ten setup który tutaj mieliśmy więc w
tym momencie jeśli zobaczymy co tutaj potrzebujemy potrzebujemy pobrać
sobie input element mamy go tutaj w tym miejscu więc wystarczy
że wpiszemy const wyciągniemy sobie input
za pomocą destrukturyzacji i wskażemy na render input jako
na metodę która nam to zapewni i teraz w tym miejscu zamiast
używać get by label text to użyję po prostu input i nasz test przechodzi
jeśli zrobimy tak żeby mieć tylko
pewność to widzimy że ten input tam się znajduje także super
przyszła kolej na następny test tutaj będzie najwięcej problemów ale
również sobie z nimi poradzimy z racji że użyliśmy tutaj spread operatora to możemy sobie wyciągać
do woli wszystkie utilsy wszystkie narzędzia które mieliśmy do tej pory pod
funkcją render właśnie z naszej nowej funkcji którą stworzyliśmy
więc to że tutaj mamy get by placeholder text i rerender to
nic jeśli tutaj wpiszemy render input to
ten test nadal będzie działał możemy
tutaj troszkę uprzątnąć tylko i w tym miejscu
z racji że rerenderujemy nasz komponent ponieważ musimy mu podać nowego
propsa to niestety musimy tutaj użyć również
właśnie pozostałych propsów ponieważ są one wymagane przez
nasz komponent mamy tu zresztą wypisane w naszych prop types'ach więc to jest
takie miejsce gdzie niestety już więcej chyba nie wskóramy natomiast
jeśli przejdziemy sobie tutaj to tutaj również możemy troszkę sobie
ułatwić sprawę jeśli
wpiszemy tutaj input zauważ
jak łatwo przychodzi nam refakturowanie naszego kodu w
ostatnim teście zrobimy dokładnie to samo tutaj dodatkowo wyciągamy
sobie jeszcze container i
to tyle stworzyliśmy sobie funkcję taką setup'ującą tak
naprawdę nasz test a właściwie przygotowująca nasz komponent do
wyrenderowania w naszym testowym środowisku przez co zredukowaliśmy
takie zatłoczenie tutaj takie zagmatwanie tego kodu właśnie przez to że
w każdym tak naprawdę w pierwszej linijce zawsze ten setup związany z renderowaniem
naszego elementu więc teraz z racji że sobie przerzuciliśmy
do jednego miejsca nasze testy są na pewno dużo czytelniejsze nie musimy się
aż tak wiele razy powtarzać i to tak właściwie tyle jeśli chodzi o takie podstawowe
testy jednostkowe wydaje mi się że na podstawie tych kilku przykładów które tutaj
ci pokazałem wszystko stało się jasne wykorzystaliśmy tutaj
tak naprawdę wiele metod związanych właśnie z testowaniem takich podstawowych komponentów a
w następnej lekcji zajmują się już bardziej skomplikowanymi przykładami testów