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ść za nami sporo pracy włożonej w testy jednostkowe i teraz
przyszła pora na kolejny rodzaj testów czyli testy integracyjne tutaj
tylko zahaczymy jak był ten temat ponieważ kurs jest o react'cie zaawansowanym a nie
o zaawansowanym testowaniu dlatego chciałem ci pokazać tylko kilka takich sposobów na
co trzeba zwrócić uwagę testując więcej niż jeden komponent naszej
aplikacji jak łączyć to ze sobą jak zapewniać dostęp do pewnych danych
i tutaj skupimy się na takich dwóch scenariuszach w jednym pokażę ci jak
testować coś co wykorzystuje kontekst a w drugim przykładzie posłużymy
się axios'em i tym i w ogóle testować zapytanie asynchroniczne
zapytania do api jak sprawdzać czy elementy które
pobieraliśmy wyświetlają się w naszej aplikacji także czeka nas kilka
ekscytujących lekcji ale najpierw zaczniemy sobie od przykładu który tutaj przygotowałem
po pierwsze wywaliłem w ogóle ten poprzedni component input on już nie będzie nam potrzebny
teraz skupimy się na app czyli na naszym głównym komponencie który
stworzyłem w oparciu o klasę i jak widzisz importuje
do niego kontekst który również stworzyłem sobie tutaj w tym pliku eksportuję jego oczywiście
żeby można było go zaimportować jak widzisz kontekst ten dotyczy
bieżącego języka w naszej aplikacji oczywiście w prawdziwych dużych
aplikacjach nie wykorzystuje się tego typu rzeczy pobierane są odpowiednie paczki
do tego żeby zapewniać to wsparcie wielu języków natomiast
wydaje mi się że tutaj w tym przypadku takiego bardzo prostego ułożenia
naszych komponentów bardzo prostej struktury aplikacji tego typu kontekst
na język w zupełności nam wystarczy i możemy sobie tutaj trochę pokombinować z
nimi trochę się nim pobawić więc teraz przejdźmy sobie naszego api sprawdźmy co my tutaj
robimy przede wszystkim pobieramy właśnie nasz kontekst po drugie tworzymy
metodę set language która później dodana jest do state'u i
wewnątrz tego state'u mamy tak naprawdę dwie rzeczy bieżący język i set
language czyli metodę która ustawia nam nowy język to
wszystko później pakujemy do naszego providera który właśnie dostaje this
state jako value przez co którykolwiek z tych komponentów zagnieżdżonych
wewnątrz tutaj tego komponentu będzie miał do tych danych czy
będzie miał dostęp to się właśnie okaże w naszych testach i małe zmiany zaszły też w
headerze ponieważ teraz doszły nam tutaj tak naprawdę dwa buttony które
zmieniają nam język zmieniają się też napisy na angielski i
zaraz sobie to wszystko potestujemy i sprawdzimy czy to będzie działać
aplikacja w tym momencie wygląda tak tutaj mamy te buttony które zmieniają nam języki
tak jak mówiłem napisy są po angielsku ale to będzie się zmieniać względem
właśnie kontekstu który ustawimy więc teraz wróćmy sobie naszej aplikacji i stwórzmy
w folderze components folder tests dlaczego
tak robimy generalnie konwencja nakazuje trzymanie
testów bardzo blisko implementacji i nie chcemy żeby
nasze pliki z testami walały się w każdym folderze ponieważ zaśmieci nam to całą
strukturę zazwyczaj i tak będziemy je odpalać za pomocą command
shift o i po prostu będziemy wpisywać nazwę komponentu to jest najwygodniejsze
ale w razie gdybyśmy chcieli je przejrzeć to będzie mieć wszystko to w jednym miejscu teraz
wszystkie testy będziemy trzymać właśnie tutaj w components ponieważ one będą
dotyczyć właśnie tych komponentów które tutaj się znajdują jeśli mielibyśmy jakieś teksty
związane z widokami to otrzymalibyśmy folder test w folderze view
więc teraz będąc w folderze test wewnątrz components
możemy sobie stworzyć header test js
i podobnie jak w przykładach będziemy sobie
tutaj wykorzystywać tdd czyli najpierw napiszemy testy które failują później
je naprawimy później będziemy rozbudowywać je tak żeby znowu failowały
i tak w kółko aż będziemy mieć działający fajny komponent dobra
zacznijmy sobie od napisania takiego prostego testu powiedzmy
że chcemy sprawdzić czy nasz komponent posiada buttony do zmiany
języka oczywiście
musimy zaimportować sobie header i
to natrafiamy na pierwszą ścianę ponieważ dostaliśmy tutaj błąd że wykorzystujemy
elementy związane z react routerem poza routerem jak to
jest możliwe wykorzystujemy tutaj header a heder w
naszym app opleciony jest w router header wykorzystuje nav
linki które należą do biblioteki react router dom i dlatego
musimy zrobić jeden dodatkowy krok który wyrenderuje nam
nasz header w takim środowisku imitującym router tak
jak mówiłem w pierwszej lekcji o tych testach że to środowisko testowe
to jest takie całe z dykty zrobione całe z kartonu po prostu udawane i
tak samo jest tutaj w tym momencie musimy zmontować sobie stworzenie
routera przez to będziemy mogli dalej testować nasz komponent i na
szczęście w dokumentacji react-testing-library mamy tutaj przykład który
bardzo fajnie pokazuje nam jak możemy stworzyć taki sztuczny router tak naprawdę
skopiuję sobie po prostu te funkcje a dodatkowo będę musiał
zainstalować paczkę która się nazywa history więc
teraz dodam sobie tutaj nowego taba zainstalujemy
history od
razu będę mógł sobie pobrać to z tej paczki i
dodatkowo jeszcze oczywiście musimy zaimportować router z
react-router-dom podobnie jak robimy to w komponencie app i
teraz na szybko co robi ta funkcja ta funkcja będzie działać podobnie
do funkcji render z której możemy sobie wyciągnąć najróżniejsze rzeczy z
tą różnicą że wewnątrz samego render mamy tutaj rauter i
przyjmujemy tutaj ui czyli ten wygląd to co testujemy
w tym przypadku będzie to header to ui mogłoby się nazywać też children
moim zdaniem wtedy będzie to trochę bardziej jakby
czytelne więc zastąpimy może sobie children i dodatkowo jeszcze
funkcja ta pozwala na zmockowanie właśnie przy całej
nawigacji naszej aplikacji w taki sposób że w razie potrzeby
jeśli będziemy musieli się odnieść w jaki sposób do historii czyli do pozycji w której się
znajdujemy albo do lokacji w których byliśmy generalnie do
wszystkiego co dotyczy nawigacji po naszej aplikacji to będziemy mogli to robić właśnie
za pomocą tego zmockowanego środowiska sęk jednak
w tym że w naszym przypadku tego
typu funkcja jest trochę zbyt skomplikowana natomiast wydaje mi się że nie ma
co z niej rezygnować po prostu zróbmy z nimi takiego utils'a który będziemy importować
sobie do naszego kodu przez co nie będziemy musieli jej wrzucać w każdej sytuacji
kiedy będziemy potrzebować routera po prostu będziemy ją importować i ona w razie czego
będzie dysponować elementami które będą mogły nam pomóc w testowaniu routera
ale akurat w tym przypadku będziemy chcieli po prostu uniknąć tych błędów które
przed chwilą nam się wyświetliły więc teraz stwórzmy sobie tutaj w
src nowy plik o nazwie utils js możemy
go nawet przemianować żeby nie mylić z utilsami które mogłyby
pojawić się naszej aplikacji ale dotyczyłyby samej aplikacji może test utils
te funkcje sobie wyciągniemy wrzucimy
do test utils wyeksportujemy i teraz
wrócimy sobie do naszego komponentu tak naprawdę to render możemy
wywalić i zaimportujmy sobie
teraz okej zaimportowaliśmy sobie render with router
i po dodaniu jakby całego tego kontekstu związanego właśnie z routerem
nasz komponent zaczął działać poradziliśmy sobie z pierwszą przeszkodą
jaką był react router który zapobiegał testowaniu naszego komponentu więc teraz skoro
mamy już to za sobą to w następnej lekcji zajmiemy się testowaniem naszego
kontekstu który dopiero musimy dodać do naszego komponentu