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ść przechodzimy do ostatniej części związanej z testowaniem w tym kursie
mam nadzieję że do tej pory ci się podobało przed nami najbardziej ekscytująca część związana
z zapytaniami asynchronicznymi które będziemy testować czyli tutaj
w naszym komponencie users będziemy wykorzystywać axios'a do tego żeby pobierać
sobie niektóre dane z api i teraz sprawdźmy tylko upewnijmy się czy axios
jest jest zainstalowany w naszym projekcie jest mamy tutaj w package json jeśli
go nie masz to zainstaluj go przy pomocy npm install dash dash save
czy tam myślnik myślnik save zawsze mówię tak jak mają na angielski kursach
dash dash brzmi lepiej dash dash save axios i
to tyle jeśli jednak masz go zainstalowanego to super możemy
teraz przejść do pisania naszych testów i komponentu a właściwie widoku users
tutaj tylko jeszcze jako wstęp powiem że będziemy korzystać
z mocky.io z którego już chyba raz korzystaliśmy nie w
tym kursie ale chyba w poprzednim w każdym razie powinno to być do ciebie znane narzędzie
napiszemy sobie tutaj zwrotkę czyli jakby
treść odpowiedzi którą będziemy dostawać z naszego api którą
właśnie będziemy wyświetlać sobie później w naszym widoku ta też będzie zawierać tablice
z obiektami w której będą nazwy użytkowników
każdy użytkownik będzie miał imię i wiek żeby
ułatwić ci zadanie treść tego json'a znajdziesz w folderze assets
tam będzie plik users json wystarczy
że go skopiujesz i przykleisz do mocky a reszta już będzie prosta okej
a teraz wróćmy sobie naszego komponentu i napiszmy pierwszy test który
znajduje się tutaj w folderze test w folderze views i
stwórzmy sobie test który zakłada że nasz komponent wyświetla jakieś loading
indicator jakiś wskaźnik tego że treść jest ładowana asynchronicznie oczywiście
jak zwykle weźmiemy sobie tutaj metodę get by text okej
i nasz pierwszy test się zepsuł więc teraz go naprawimy
przechodząc do naszego komponentu users stworzymy
sobie tutaj diva w którym zawrzemy zwykły
napis w którym wpiszemy loding i nasz
test został naprawiony więc najprostsze za nami teraz pora na test
który będzie sprawdzał czy wyświetlamy użytkowników i
żeby to musimy się do tego testu trochę przygotować i zrozumieć jak
mockować axios'a w testach może żeby lepiej to zrozumieć porzućmy
na chwilę sobie ideały o testowaniu w postaci test driven development zaimportujmy
sobie axios'a do naszego komponentu zaimportujmy
sobie use effect który nam się przyda i use state który
również będzie nam potrzebny i pierwszą rzeczą którą będziemy
potrzebować są nasi użytkownicy stworzymy sobie więc
users data które będzie przechowywać tablice z obiektami z użytkownikami
i metodę która będzie pozwalała nam to wszystko stworzyć na
razie będzie mieć tutaj pustą tablice jako inicjalny state natomiast w naszym use effect
stworzymy sobie logikę która odpowiada za to żeby pobierać
użytkowników najłatwiejsze sposoby na szybkie rezerwowanie
zapytań asynchronicznych jest użycie async await więc tutaj będziemy się tym posługiwać
jeśli nie wiesz do końca jak działa async await serdecznie odsyłam cię do kursu
javascript w którym będzie to wyjaśnione ten kurs nie jest temu poświęcony
i z racji że jest to react zaawansowany to oczekuje że ta wiedza już u ciebie się
znajduje jeśli nie to szybko je nadrób ponieważ async await to jest na prawdę świetna
możliwość na szybkie właśnie rozwiązywanie problemów
z asynchronicznością w javascript'cie więc teraz stworzymy sobie wewnątrz use
effect funkcje fetch users której
stworzymy funkcję asynchroniczną zadefiniujemy przez dodanie
tutaj async następnie weźmiemy sobie data
które wiem że jest stworzone przez axiosa jako właśnie ten obiekt w którym znajdują się wszystkie
nasze odpowiedzi tutaj wpisując await axios get
możemy dostać się do naszego jsona i
żeby było jeszcze ciekawiej to dodamy sobie do naszego zapytania
mocky delay 100 milisekund albo nawet może więcej daj mi tutaj 300
milisekund czekamy czekamy i jest i teraz oczywiście żeby
ta funkcja doszła do skutku to musimy
ją jeszcze wywołać ale jeszcze zanim to zrobimy to po dostaniu się do
tego data po wyciągnięciu go tak naprawdę z axios get poprzez właśnie
await nie musimy zauważ że nie musimy w tej chwili resolve'ować tego jak
promise'a przy użyciu then i catch ponieważ mamy tutaj właśnie
await który robi to za nas jeśli chcemy chronić się
przed błędami możemy tutaj stworzyć jeszcze taki blok który wygląda
w taki sposób i wtedy jeśli jakikolwiek
błąd się pojawi to zostanie on wylogowany w tym miejscu spróbujmy sobie
wylogować data odpalimy
sobie naszą aplikację widzę że jakiś mamy błąd nie
został przeniesiony ten plik scss teraz powinno być okej a
no tak nie loguje nam się nic bo nie wywołaliśmy naszej funkcji i
teraz mamy naszą odpowiedź mam tutaj naszą tablice z naszymi obiektami więc
zamiast tego console loga tutaj możemy sobie stworzyć set users
data i wrzucić tutaj po prostu data kolejny
genialny błąd nie stworzyłem tutaj use state dobra
i skoro to wszystko już mamy zrobione to pozostaje nam ten ostatni etap który
po prostu będzie miał pozwalał na renderowanie jednego albo drugiego w zależności czy
dane już zostały zaczytane więc teraz jeśli users data length
jest większa od zera wtedy chcemy zwrócić loader
natomiast jeśli już users data będzie dostępny to
chcemy zwrócić map tutaj
ten warunek będzie spełniał to o czym mówię i
tak faktycznie mam najpierw się ładują później się wyświetlają wszystko jest okej więc
skoro po stronie komponentu jakby to zapytanie leci poprawnie to teraz w końcu
możemy przejść do testu który sprawdzi czy faktycznie ten komponent poprawnie
się zachowuje względem jakby tych zapytań asynchronicznych i teraz to
co jest najbardziej istotne w tym wszystkim to zrozumienie że testy
mogą polegać na api to znaczy że nasze środowisko testowe musi
być odseparowane od api przynajmniej to środowisko w którym tutaj
się obracamy czyli testy jednostkowe testy integracyjne powinny
tak naprawdę mockować w jakiś sposób api dlatego
że api czasami może na przykład nie wiem nie działać może zwracać jakieś
błędy i wtedy nasze środowisko testowe uzależnione jest od innego środowiska
które jest tak naprawdę zawodne natomiast jeśli stworzymy
sobie taką imitacje taką osobą instancje jakby tego
jak zachowuje się nasze api jeśli uda nam się zmockować to w taki
sposób że będziemy wiernie odwzorować to jak to api powinno
działać wtedy nie potrzebujemy de facto samego api ponieważ nasz komponent
będzie się zachowywał dokładnie tak jakby pobierał nasze dane z serwera i
dokładnie tym zajmiemy się w następnej lekcji