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ść w poprzedniej lekcji stworzyliśmy sobie pierwszy prosty test
który sprawdza czy input który wrzucamy do naszego widoku jest w ogóle
wyświetlany i sprawdzamy to za pomocą placeholdera który jest domontowany
do tego inputu ponieważ tak jak już mówiłem react-testing-library zakłada
że testy które przeprowadzamy imitują zachowanie użytkownika
to znaczy nie wchodzimy w insepct'orze jako użytkownik i
nie sprawdzamy czy w htmlu jest napisane input tylko sprawdzamy czy jest pole
do którego możemy wpisać swoje imię ale przyszła pora na jakieś urozmaicenie wiadomo
że react nie jest od tak prostych rzeczy możemy zrobić dużo dużo więcej i teraz
może właśnie spróbujmy sobie coś tutaj wykombinować na przykład spróbujmy podać
placeholder z innego miejsca które zostanie
przekazany jako props w to miejsce przez co będziemy mogli przetestować
w naszym teście czy placeholder który podajemy jako
props jest wyświetlany i możemy go sobie złapać za pomocą właśnie tej metody
teraz zacząłem test ale tak jak już mówiłem będziemy tutaj
stosować tdd czyli test driven development i
zanim napisze komponent to napiszę sobie test który się zepsuje
więc podam propsa placeholder w którym podam
name a tak naprawdę to mógłbym go sobie tutaj
wpisać jako placeholder text właściwie to mogę zrobić let
za chwilę powiem ci dlaczego niech to będzie string name w
tym miejscu możemy podać placeholder text i
teraz w tej metodzie która wcześniej zbierała nam po prostu name które było case-insensitive czyli
nie sprawdzało wielkości liter możemy podać placeholder text jako naszą
zmienną i w tym momencie dwa razy tego samego stringa wpisywać bo mamy to
wszystko w jednym miejscu więc tak się powinno to robić i teraz oczywiście spróbujmy
zrobić coś takiego co zepsuje nasz test żebyśmy mogli to naprawić w naszym komponencie
więc podajmy tutaj na przykład first name okej i
teraz dostaliśmy błąd że nasz placeholder ma name a nie first name przez co musimy
naprawić nasz komponent i moglibyśmy tutaj wpisać po prostu first name ale
to nie spełnia tego wymogu podawania propsa więc musimy to po
prostu wpisać w ten sposób podając
placeholder jako to co ma zostać wpisane w
naszym komponencie i teraz wszystko się zgadza ale
wyobraźmy sobie że nasz input będzie miał jakąś domyślną wartość w placeholderze
w razie gdybyśmy nie podali żadnego propsa to wtedy będzie miał
po prostu default props żeby to zrobić możemy na przykład wyciągnąć
sobie z tego miejsca metodę rerender która
pozwoli nam wyrenderować na nowo nasz element ale z nowymi propsami w tym przypadku będzie
brak propsów jest to metoda którą można znaleźć sobie tutaj też
w dokumentacji jeśli wejdziemy sobie w
reacta do api znajdziemy funkcje rerender
i tutaj widzimy właśnie przykład który pozwala nam na wyrenderowanie
naszego komponentu z jakimś tam propsem więc teraz wejdźmy sobie tutaj
wpiszmy rerender bez żadnego propsa
i załóżmy że masz placeholder text
to będzie value albo na przykład your value
to niech będzie taki domyślny tekst który ma się pojawić i teraz skopiujemy
sobie to więc
tak nie podajemy żadnego placeholdera i spodziewamy
się że ma się pojawić to w naszym dokumencie i
oczywiście nasz test fail'uje ponieważ nasz
input nie ma placeholdera ponieważ nie zdefiniowaliśmy tutaj żadnego
default value dla naszego placeholdera więc
teraz zaimportujmy sobie prop types żebyś przy okazji zweryfikował
sobie te propsy które ma nasz komponent podajmy input prop types
placeholder okej
i teraz podajemy default props place
holder your value i
nasz test przechodzi problem jest tylko taki że mimo że testujemy tutaj
dwie rzeczy to wychodzi nam tak naprawdę jeden test
w naszym w naszej konsoli a te rzeczy nie są ze sobą do końca
powiązane to znaczy że my nie sprawdzamy czy przy rerenderze czy przy zmianie plate
holdera wyświetla się poprawnie tylko czy przy niepodaniu placeholdera wyświetla
się jakikolwiek placeholder który podaliśmy tutaj w tym miejscu więc zamiast używania
rerender i zamiast używania tutaj leta
którego będziemy podmieniać możemy zrobić to inaczej skopiujmy
sobie cały ten test i powiedzmy it
displays default placeholder w
tym miejscu oczywiście wpiszemy your value nazwiemy
to sobie default placeholder text
placeholder w tym miejscu wywalamy ponieważ nie będzie nam potrzebny nie podajemy żadnego
placeholdera jako props wywalamy sobie też funkcję rerender nie
będzie nam jest potrzebna po prostu chciałem ci pokazać jak to wygląda i
w ten sposób napisaliśmy dwa osobne testy które testują dwie różne rzeczy mamy
je wyświetlone tutaj więc wszystko się zgadza nasz komponent przechodzi a
w następnej lekcji pokażę ci co możemy zrobić żeby weryfikować zawartość wartość
właściwie naszego inputa