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ść zanim ruszamy dalej z testowaniem komponentów reactowych to przetestujmy
sobie jeszcze takie dwa scenariusze po pierwsze zmusimy nasz input do tego żeby nie mógł
przyjmować cyfr oczywiście moglibyśmy to rozszerzyć na wszystkie znaki specjalne ale
nie będziemy się tutaj z tym bawić to będzie tylko taki przykład jeśli chcesz możesz to rozszerzyć
do wszystkich znaków specjalnych to będzie tylko i wyłącznie kwestia regexa który napiszemy
natomiast chcę ci pokazać jak możemy to przetestować a drugą
rzeczą będzie stworzenie specjalnego komunikatu mówiącego o błędzie w
razie gdyby właśnie ten warunek wpisania jakiejś cyfry nie został spełniony
czyli będą takie dwa różne scenariusze pierwszy to będzie taki że nasz input
po prostu nie będzie przyjmował takich znaków a drugi będzie taki że nasz input
będzie informował nas o tym że mamy niedozwolone znaki w naszym inpucie i
prawdopodobnie z punktu widzenia user experience ten drugi scenariusz jest lepszy ale
ja chcę ci pokazać jak to wszystko możemy przetestować więc teraz najpierw napiszemy sobie
test zgodnie z konwencją którą przyjęliśmy napiszemy sobie tutaj prevents
user from passing numbers i podobnie jak
w poprzednich przykładach wyciągniemy to sobie za pomocą label
text i
teraz wywołamy sobie event on change a właściwie change na
naszym inpucie i podobnie jak wcześniej damy tutaj target
i value i jako value
wpiszemy roman raz dwa trzy a
tutaj wpiszemy expect input to
have value roman i
uwaga nasz test failuje mamy roman raz
dwa trzy a chcemy żeby był roman i teraz co możemy z tym zrobić
możemy sobie w naszym komponencie stworzyć logikę
która nam to wszystko obsłuży
zaimportujemy sobie tutaj do naszego komponentu use state stworzymy
sobie z naszego inputu controlled component
czy też controlled input czyli tutaj musimy podać
input value i
stworzymy sobie jeszcze funkcję handle change która
będzie przyjmować event albo sobie nawet wyciągniemy
od razu zdestrukturyzujemy z eventu
wyciągamy target a z targetu wyciągamy value w ten
sposób możemy podać tutaj tylko value i teraz możemy
sobie podać te funkcje on change tutaj w tym miejscu handle change okej
i to co musimy zrobić to stworzyć sobie regexa w
którym napiszemy że liczby są niedopuszczalne
nie chcemy mieć liczb czyli właściwie
sprawdzamy po prostu czy to co podajemy zawiera liczby
i teraz regexy udostępniają nam takie fajne api
taką fajną metodę która powoduje że jak wpiszemy
regex test i podamy value to
on jeśli będzie jakaś cyfra w
tym stringu który podajemy to on zwróci tutaj true a jeśli nie będzie żadnych
cyfr to zwróci nam false więc jeśli chcemy zrobić
tutaj true i na true żeby wpisywana została wartość
dla naszego inputa to musimy zaprzeczyć temu warunkowi czyli
słuchaj jeśli ty sprawdzasz czy istnieją jakieś liczby czy tam
cyfry to my temu zaprzeczamy czyli jeśli nie istnieją żadne cyfry w
tym stringu to możesz przepuścić set input value i teraz
natrafiliśmy na bardzo ciekawy problem ponieważ normalnie jakbyśmy
wpisywali tutaj roman raz dwa trzy jako ludzie czyli klawisz po klawiszu
to ten test by przeszedł ponieważ po prostu nasza
funkcja tutaj nie puszczała by tego raz dwa trzy ale z racji że podajemy tutaj
na onchange od razu całego stringa to nie przepuszcza całego tego
stringa ponieważ on cały jakby spełnia ten warunek czy
zabrakło wykrzyknika teraz to widzimy czyli on oczekiwał że będzie roman
a jest pusty string nie ma nic co ciekawe jeśli
bym tutaj usunął to raz dwa trzy i
wystrzelił po tym teście kolejny event
który miałby na przykład 12 i jeszcze
raz oczekiwałbym że on będzie miał stringa roman
to ten test przejdzie ponieważ
mój input miał już value roman i dopisałem
do niego tylko 1 i 2 i wtedy faktycznie ta metoda go nie puściła ale
jak chcę to wszystko na raz puścić to wtedy jakby ta metoda nie przepuszcza
w ogóle całego stringa i nie pozwala nam go wpisać więc możemy
do tego podejść jeszcze trochę inaczej wywalając sobie ten warunek
będziemy tutaj trochę sprytniejsi i
użyjemy tutaj metody replace która sprawdza nam regex'a i
zastępuje nam każdą liczbę od
0 do 9 cyfrę każdą cyfrę od 0 do 9 pustym
stringiem a właściwie na niczym wycina je po prostu z tego
stringa i teraz jeśli tutaj podamy raz dwa trzy cztery to uwaga mamy
dwa trzy cztery dlaczego dlatego że tutaj jeszcze muszę dodać plus
co oznacza nie
tutaj tutaj plus oznacza że tych cyfr może być więcej niż jedna jeśli
podajemy coś takiego to on szuka tylko jednej i roman 2 3 4 puszczam a
jak dodamy tutaj plus to znaczy że tych cyfr jednej po drugiej może
być trochę więcej żeby to jeszcze bardziej przetestować możemy zrobić kolejny
event i
teraz powinno być roman roman z wyciętym raz dwa trzy cztery w środku
i nasz test również przechodzi dla
pewności jeszcze jak
podamy wykrzyknik to ten wykrzyknik nie zostanie usunięty i
w ten sposób stworzyliśmy sobie input który nie pozwala nam wpisywać cyfr
do swojej zawartości i to co jeszcze jest ważne w tym teście i co pewnie
widzisz to że ja na siłę próbuję ten input zepsuć to znaczy że na siłę
wpycham te cyfry albo na końcu albo w środku
i sprawdzam czy faktycznie to będzie działać tak jak założyłem bo jakby całą
kwintesencjąjakby myślenia o testach jest to co
można zrobić żeby zepsuć mój komponent co mogę zrobić jako użytkownik żeby
pojawił się błąd bo nie sztuką jest testować w taki sposób żeby tylko ten najprostszy i
najłatwiejsze scenariusze przechodziły właśnie sęk w tym że trzeba
przyjąć taki trochę taką postawę psui
i która po prostu próbuje zepsuć nasz komponent i to jest cała esencja
testowania trzeba przyjąć właśnie taki sposób myślenia a w następnej
lekcji zrobimy coś podobnego tylko zamiast zapobiegać wpisywaniu tych
cyfr będziemy po prostu ostrzegać użytkownika mówić słuchaj użytkowniku nasz
input tego nie toleruje więc masz tego nie wpisywać usuń to szybko