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ść po dość obszernych działach dotyczących zaawansowanych
patternów czy też wzorców projektowych w react'cie przechodzimy do kolejnego
działu w którym zajmiemy się długo wyczekiwanym testowaniem które zajawiałem
już w poprzednim kursie react w praktyce natomiast tutaj przejdziemy
już do takiego sedna sprawy pokażę ci wiele przykładów na podstawie których nauczysz
się testować komponenty reactowe oczywiście zrobimy sobie takie małe przypomnienie
czym jest jest i po co w ogóle go używamy ale w samym kursie
skupimy się już teraz tylko i wyłącznie na testowaniu przy pomocy react-testing-library
czyli biblioteki stworzonej przez kent c dodds'a jednego z największych wymiataczy
jeśli chodzi o testowanie aplikacji reactowych więc teraz zróbmy
sobie tylko takie małe rozeznanie co w ogóle mamy w projekcie co możemy wykorzystać i
czego jeszcze nie mamy co musimy wyinstalować więc jak sobie odpalimy terminal
terminal z prawej strony możesz ustawić wybierając sobie view
appearance i wybierając move panel to the right u ciebie będzie
w ten sposób on się pojawi z tej strony i akurat do
testowania będzie to dla nas o wiele wygodniejsze ale jak już jesteśmy
w tym terminalu otwórzmy sobie nową kartę i wpiszmy npm run
test jeśli pojawi się coś takiego to wystarczy że wciśniemy literkę
a i odpali nam się jedyny test który mamy w naszej aplikacji jest
to test stworzony przez create-react-app nie przeze mnie i jest on od
samego początku dostępny tutaj w tym miejscu i dobra wiadomość jest taka że widzimy
że testy przechodzą i że testy w ogóle istnieją i działają to znaczy że takie
podstawowe środowisko do testowania dla nas zostało już dla nas skonfigurowane co jest
naprawdę fajną wiadomością bo kiedyś testowanie w react'cie wymagało
uprzednio skonfigurowania całego środowiska co wcale nie było tak przyjemnym zadaniem oczywiście
do dzoś jeśli chcemy zrobić coś naprawdę customowego to czasami musimy trochę
pogrzebać w konfiguracji natomiast jest to o wiele prostsze niż było kilkanaście
miesięcy temu ale przyjrzyjmy się co to w ogóle za magia skąd się wzięły te
testy i dlaczego to przechodzi jeśli przyjdziemy sobie do package json to
zobaczymy o i właśnie i dlaczego w ogóle jak wpisałem npm run tests to
odpaliły się testy tutaj mamy skrypty w pliku package json
i tak jak wcześniej wpisywaliśmy npm start czy też npm
run start to odpalała się nasza aplikacja to mamy jeszcze trzy
komendy build która przygotowuje aplikację
do deploymentu test która służy do testowania i eject która
służy do jak sama nazwa wskazuje ejectowania czyli wypluwanie na wierzch
całej konfiguracji react a właściwie create react app która za
nas decyduje właśnie o tym jak działają nasze testy jak działa nasz webpack babel
i tak dalej na szczęście dla nas create react app zostało tak stworzone
że większość rzeczy możemy zrobić bez ejectowania naszej aplikacji co też
zresztą nie wydarzyło się w żadnym z kursów i też nie będziemy tej kwestii poruszać ponieważ
mam wrażenie że jest to temat na zupełnie inny kurs który wykracza
nawet poza zaawansowane użycie reacta ale wróćmy sobie do komendy
test ponieważ to nas teraz interesuje normalnie
widzielibyśmy tutaj coś takiego jak na przykład jest ponieważ react
wykorzystuje jest jako domyślną bibliotekę do testowania właściwie
to jest jest nawet nazywany frameworkiem do testowania nie biblioteką ale
tutaj mniejsza o nomenklaturę o jest mówiłem już w poprzedniej części to
co jest właśnie fajne to że nie musimy tutaj nic z tego jest'a konfigurować on
został dla nas skonfigurowany tak żeby po prostu działał jeśli chcemy rozszerzyć o coś
jego działanie to możemy po prostu stworzyć sobie plik który stworzymy w następnej
lekcji natomiast normalnie uruchamialibyśmy nasze testy
poprzez wykorzystanie komendy jest tutaj akurat użyję npx'a ponieważ jest
nie jest zainstalowany tutaj żaden sposób tak żebym mógł go za
pomocą komendy normalnie wywołać więc jeśli wpiszę tutaj npx jest
to on odpali nasze testy ale się wywali ponieważ nie
dogrzebał się do konfiguracji która jest zaszyta właśnie w react scripts czyli w
tej paczce dotyczącej create-react-app która robi za nas wszystko
jeśli chodzi o te konfigurację więc zapominamy o jest w takim
sensie że nie musimy konfigurować będziemy cały czas wykorzystywać sobie
naszą komendę npm test i to tyle jeśli chodzi o taką
podstawową konfigurację testowania czyli właściwie nie zrobiliśmy nic dodam tylko
że pisząc nasze testy będziemy się bardzo intensywnie
posiłkować zarówno dokumentacją jest'a jak i jest dom jak i
react-testing-library uważam że żeby nauczyć się
dobrze testować musimy nauczyć się dobrze korzystać z dokumentacji ponieważ to one
zawierają te wszystkie match'ery metody które nam pomagają w tym żeby
dobrze testować nasze komponenty i też drugiej strony ciężko
nauczyć się ich wszystkich na pamięć więc płynne poruszanie się po dokumentacji będzie
tutaj naprawdę zbawienne jeśli chodzi o wydajność tego jak
szybko piszemy kod związany z testami odpalmy sobie zatem create-react-app
stronę która dotyczy dokumentacji tej paczki i tam
będziemy mieć informacje o tym jak skonfigurować ją żeby wykorzystywać react-testing-library
jeśli przejdziemy sobie zakładki testing running
tests to na samym dole tutaj mamy react
testing library konkurencją dla react testing library jest enzyme od którego
powoli się odchodzi z bardzo wielu względów o tym też
nie jeden artykuł już napisano i nie jeden kurs pewnie nagrano ale
tak w dużym skrócie enzyme pozwalał na pewne metody
testowania komponentów które uznano za złe praktyki i
w ostateczności powoli odchodzi się właśnie od tego sposobu
testowania komponentów ponieważ nie dawały one pewności te testy nie
dawały pewności czy ta komponenty tak naprawdę działają poprawnie czy też nie oczywiście
to nie jest tak że ta biblioteka była beznadziejna i nic nie dało się z nią zrobić natomiast
react testing library przyniosło pewną świeżość do
testowania reacta i też przyniosło nieco inne spojrzenie na to
wszystko co akurat mnie jest obiektywnie bardziej odpowiada dlatego korzystam z tej
biblioteki ale podkreślam to nie jest wybór między dobrym a złym to jest wybór
między narzędziem które daje nam pewność a narzędziem które jest
dla nas mniej wygodne więc jeśli chcesz zapoznaj się z tym jak wygląda enzyme
korzystanie z niego nie jest jakoś radykalnie inne niż react
testing library i po tym kursie spokojnie będziesz mógł korzystać z na
przykład enzyme jeśli wolisz natomiast ja będę pokazywał moje przykłady na react testing library
i teraz właśnie to zainstalujemy żeby to zainstalować musimy wykorzystać
dwie paczki react testing library i jest dom i tutaj
uwaga to co jest napisane tutaj jest już nieaktualne
ponieważ npm paczka npm dotycząca react-testing-library
się zmieniła teraz wygląda nieco inaczej więc przechodząc
do folderu projektowego dla mnie tam będzie folder numer 4 ponieważ
to tutaj mam projekt w którym będę testował muszę
wpisać npm install save-dev i teraz uwaga testing
library z małpą z przodu slash react tak
wygląda ta nowa notacja ta z dokumentacji react create
react app już jest nieaktualna i instalujemy jeszcze jest dom osobno na razie nie przejmujemy
się tym co te biblioteki robią co te paczki robią po prostu
je zainstalujmy a resztę wytłumaczę w kolejnych lekcjach żeby dokończyć
naszą konfigurację zerknijmy jeszcze sobie tutaj bo musimy stworzyć jeszcze
jeden plik w folderze src które nazywa się setup test i
będzie miał takie dwa importy które bardzo nam się przydadzą podczas testowania o
tym też opowiem później wchodzimy do folderu src setup
tests kropka js to
możemy sobie wywalić oczywiście zachęcam do przeczytania tych komentarzy przed
usunięciem i właściwie to tyle jeśli chodzi o konfigurację
a w następnej lekcji przypomnimy sobie tylko jak działa jest zanim
zaczniemy używać react testing library tutaj widzę tylko jeden błąd mamy
jeszcze tę starą notację więc zróbmy tak testing
library oczywiście z małpą na początku
tak jak instalowaliśmy slash react slash cleanup after each
i teraz powinna działać dla pewności
npm test gdyby coś tutaj nie przeszło to oczywiście tego nie wykorzystujemy
jeszcze w testach ale gdyby te importy nie przeszły to mielibyśmy błąd więc wiemy
że działają i to tyle w następnej lekcji zaczynamy od jest