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
Skoro poradziliśmy już sobie z naszym routerem to teraz przyszła pora na testowanie
kontekstu i przykład z poprzedniej lekcji w sumie dobrze że się wydarzył ponieważ
dzięki niemu zrozumieliśmy jedną rzecz cokolwiek pobieramy sobie w naszym
komponencie a jest on opleciony na przykład jakimś rodzicu wewnątrz
aplikacji w jakiś inny komplement który dostarcza mu danych w tym przypadku na przykład router
to wewnątrz testów musimy jakoś zmockować to środowisko albo zastąpić
je czymś żeby faktycznie to działało tak jak trzeba i podobnie jak rauter musieliśmy
zmockować wewnątrz naszej funkcji render with router tak samo
nasz kontekst będziemy musieli również dodać do naszych testów aby on
był dostępny ale może tak się zdarzyć tak że w jakiś sposób provider
nie zostanie podany w naszej aplikacji zapomnimy o nim coś się zepsuje i wtedy
dobrze jest taki przypadek który mówi że komponent
wyświetla domyślne wartości dla naszego kontekstu
zawarte w funkcji create context którą mamy tutaj w naszym pliku
context więc załóżmy że w naszym komponencie będzie
informacja taka bardzo wprost o tym że bieżący
język to angielski
okej skoro zepsuliśmy już nasz czas to teraz należy go naprawić oczywiście
moglibyśmy zrobić tutaj coś takiego może dodajemy ten napis na przykład
w tym miejscu nie przejmujemy się tym jak to będzie wyglądać w tej chwili moglibyśmy
stworzyć coś takiego i nasz test wtedy przejdzie acha nie przejdzie bo mamy teraz
dwa elementy które mają en jedyne co musimy zrobić żeby to
naprawić bo tutaj ten en i pl mają się mają
być samodzielne więc dodamy tutaj daszki i wtedy przechodzi oczywiście
nie chcemy tego tak zrobić chcemy żeby tutaj był context więc pierwsze
co sobie pobierzemy to hook'a
use context zaimportujemy sobie lang
context i teraz to co
chcemy zrobić to wyciągnąć sobie
z kontekstu current language ponieważ
domyślną wartością dla current language jest en i
w tym momencie jeśli nasz test zakłada że ma być tutaj current
language en i w naszym headerze to
spełnia warunek to znaczy że nasz test przechodzi ponieważ ma dostęp
do domyślnych wartości w naszym kontekście kolejny test który sobie napiszemy
będzie zakładał że nasze buttony które mamy w naszym komponencie
tutaj wywołują funkcje set language z poprawnymi argumentami
więc teraz wpiszemy sobie language
control buttons calls proper
function with proper arguments strasznie
długi opis ale przynajmniej wiadomo o co chodzi zaimportowałem
tutaj do tego naszego pliku fire event i lang context i teraz pierwsze
co musimy zrobić to właśnie wykorzystać lang context do
tego żeby opleść w niego nasz header ale to nie wystarczy ponieważ
tutaj jeszcze musimy dopisać provider ponieważ ten provider musi
mieć value i to value musi zostać
zmockowane więc teraz stworzymy sobie tutaj obiekt
mocked context w którym będziemy mieć current language to
będzie struktura odzwierciedlająca ten bieżący stan który mamy
normalnie w aplikacji z tą różnicą że tutaj będziemy wykorzystywać
bardzo ciekawy element jest'a jest to funkcja którą
możemy śledzić co się z nią dzieje jak została wykorzystana i ta
funkcja nazywa się jest kropka fn zapisujemy
ją w taki sposób i to
jest taka funkcja atrapa która pozwoli nam na sprawdzenie czy buttony
które mamy wewnątrz naszego komponentu faktycznie wywołały ją ile
razy ją wywołały i z jakim argumentem ją wywołały różnica
jest taka że ta funkcja została podana tutaj jako właśnie taka zaślepka
jako taka atrapa i ona nie będzie zmieniać naszego języka ale
jeśli sprawdzimy czy button wywołuje te funkcje z odpowiednim argumentem to
tak naprawdę nie musimy sprawdzać czy język w naszym komponencie został
zmieniony ponieważ wiemy że nasz komponent poprawnie czyta
kontekst więc teraz dodajmy sobie
jako value to nasze mocked context może
trochę tutaj ulepszymy wygląd
tego wszystkiego żeby był bardziej czytelny i wykorzystując
fire event click pobieżemy sobie
get by text nasz button ma
text en i pl więc
najpierw sprawdzimy sobie en i teraz mówimy expect
sprawdzamy
czy ta funkcja została
wywołana jeden raz i czy została wywołana z
argumentem en i jak
widzisz tutaj nic na razie nie działa ponieważ nasz button nie wywołuje jeszcze żadnej
funkcji więc teraz sobie to naprawimy i
powiemy że on click ma wywołać funkcję która zawiera się w
kontekście nazywa się set language i
ma podać tutaj argument en i nasza
funkcja została wywołana raz i z poprawnym argumentem
ponieważ nasz czas przechodzi teraz zróbmy to samo
dla naszego buttona który ma pl
i kopiując sobie tę metodę podajemy
odpowiedni argument problem tylko polega na tym że do tego
momentu nasza funkcja została wywołana już dwa razy tu
był pierwszy raz tu był drugi raz i mamy tutaj tak naprawdę dwa wyjścia możemy
albo skopiować sobie to tutaj wywalić jedno to założenie
i spodziewać się że funkcja zostanie wywołana dwa razy
i sprawdzać czy wywołana została z jednym
i z drugim argumentem drugim sposobem byłoby
zresetowanie wywołań tej funkcji przed jakby odpaleniem
drugiego eventu możemy to zrobić za pomocą mocked context
set language mock
reset on wtedy resetuje
jakby wszystkie właściwości tej funkcji atrapy między innymi informacje
o tym ile razy została wywołana i w ten sposób nasz test również przechodzi ale
wydaje mi się że ten sposób który przed chwilą wpisałem był
ładniejszy i krótszy więc myślę że możemy to
zostawić właśnie w taki sposób okej w ten sposób udało nam się
przetestować nasz context a w następnej lekcji zajmiemy się czymś nieco bardziej
skomplikowanym czyli axios'em