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ść spora część zaawansowanych wzorców projektowych
w react'cie już za nami i nie bez powodu pojawił się teraz po lewej stronie ekranu kent c dodds
ponieważ będziemy mówić o compound components czyli komponentach złożonych jest
to poniekąd pattern jego autorstwa on pierwszy przedstawił
tego typu pomysł i jak można konstruować komponenty które następnie
nazwano właśnie compound components i najpierw wyjaśnię ci do czego one służą jaki
problem rozwiązują a później pokażę ci jak możemy je zaimplementować w
nowy sposób ponieważ to co jest ważne to sposób w jaki kiedyś
stworzyliśmy compound components nieco się zmienił przez to że mamy teraz dostępne hooksy
i wydaje mi się że ten nowy sposób jest łatwiejszy do zrozumienia dlatego przedstawię
tylko ten jeden nowy sposób nie będziemy używać klas wydaje mi się że to
w jaki sposób pokazywane to było na samym początku może budzić sporo wątpliwości co
do tego jak tego właściwie używać dodatkowym argumentem jest tutaj też to
że sposobów na tworzenie compound components w stary jest
pokazanych naprawdę mnóstwo w sieci można znaleźć sobie naprawdę dużo tutoriali które
o tym mówią natomiast nie wydaje mi się żeby było dużo materiałów które tłumaczą to
właśnie w ten nowy sposób dlatego wydaje mi się że warto na nim się skupić jest on prostszy
przede wszystkim czytelniejszy i po prostu wykorzystuje
nowy sposób tworzenia tego wszystkiego który jest preferowany też przez twórców
react'a którzy tak powoli powoli nakłaniają do tego żeby
coraz więcej tych hooks'ów używać i powoli odchodzić od komponentów klasowych oczywiście
na raz tego wszystkiego nie zastąpimy hooks'ami natomiast jest jakiś taki trend który
wydaje mi się że warto się wpisać tak żeby po to żeby ten kurs jak najdłużej pozostał
aktualny i wyjaśnienie czym są compound components zaczniemy
sobie od schematu który przygotowałem ponieważ wydaje mi się że na nim najłatwiej
będzie to wszystko wytłumaczyć bo w dużym uproszczeniu compound components
to jest zestaw komponentów które możemy wykorzystywać w naszej aplikacji w
taki sposób że współdzielą one jakiś rodzaj stanu który
jest znany każdemu z komponentów w taki sposób że mogą wzajemnie
wpływać na ten stan mogą go zmieniać mogą też wymieniać
się informacjami między sobą ale to co ciekawe w tym wszystkim to to że zastosowanie tych
wszystkich komponentów na stronie daje nam naprawdę sporą swobodę ponieważ możemy te
komponenty czyli ten zestaw komponentów z compound component układać
w taki sposób w jaki chcemy możemy je dowolnie stylować możemy dodawać
odpowiednie treści wewnątrz na przykład niektórych komponentów za
pomocą właśnie children możemy też czasami wykorzystywać niektóre
elementy a czasami się ich pozbywać jeśli ich niepotrzebujemy ja wiem że to wszystko na
razie brzmi bardzo enigmatycznie ale zaraz zobaczysz że jestem całkiem proste
i wyobraź sobie że mamy właśnie taki multi-step form w którym przechodzimy
sobie przez jakiś formularz i mamy tutaj tak naprawdę trzy
rzeczy dwa inputy i zestaw kontrolek które pozwalają nam
na sterowanie w przód i w tył zależnie od tego na jakiej stronie się znajdujemy tutaj pierwsze
ciekawa uwaga nasz komponent ten główny który
będzie jakby sterował całą logiką wie że jesteśmy na pierwszej stronie i nie możemy się cofnąć
natomiast jak będziemy na ostatniej stronie to będzie też to wiedział i pokaże
nam button submit który pozwoli na wysłanie naszego forma i taki
use case czyli przykład z życia który wyobraża mi się właśnie kiedy
patrzę na ten komponent to jeśli mamy w naszej aplikacji kilka takich multi-step
form'ów ale na przykład każdy wygląda nieco inaczej każdy zawiera
nieco inne rzeczy w poszczególnych stronach może czasami to nie są
tylko inputy ale też masz jakieś informacje może to w ogóle będą informacje
a nie będzie tam inputów ponieważ taka opcja też się może zdarzyć czyli
tak naprawdę ten komponent który tutaj widzimy bo tak naprawdę ten compound
component ten główny komponent jest tym wszystkim co tutaj mamy pokazane udostępnia
nam pewną logikę którą możemy wykorzystać na bardzo różne sposoby i
daje nam bardzo dużo swobody ja nadal wiem że to jest dość
enigmatyczne dlatego zaraz przejdziemy do kodu i stworzymy sobie pierwsze takie
podwaliny pod to żeby stworzyć compound component i krok po kroku wyjaśnię
ci po co to robimy i jak to możemy zrobić i do czego nam się to
przyda zanim jednak zaczniemy kodzić nasz compound component
to krótkie przypomnienie czym jest context w react'cie ponieważ mówiłem
o tym w poprzednich kursach ale dla przypomnienia warto powiedzieć jak
to działa ponieważ będziemy to używać dość intensywnie przejdźmy
sobie zatem do jednego z naszych widoków i stwórzmy tutaj sobie jakiś kontekst
przy pomocy metody react create
context to może być naprawdę cokolwiek chodzi
tylko o to żeby zastosować ten context tutaj w tym miejscu oczywiście
wykorzystujemy provider do zapewnienia tego contextu komponentów
które będą znajdowały się poniżej żeby mogły z niego korzystać możemy
tutaj podać jakieś walił i to będzie
obiekt z kluczem name i
teraz stwórzmy sobie jeszcze jakiś podkomponent niech
to będzie user na przykład i
z kolei tutaj wykorzystamy sobie my
context consumer i tak ja to mówiłem otwieramy
wrota naszego kontekstu podajemy właśnie kontekst
następnie możemy
zwrócić sobie to
co mamy w nim zawarte w naszym przypadku będzie to context name i
teraz ten komponent spokojnie możemy sobie wykorzystać tutaj okej
czyli stworzyliśmy sobie context który
założyliśmy tutaj w jednym komponencie jako
provider w drugim jako consumer pobraliśmy sobie wartość którą podawaliśmy w providerze
i tak właściwie ten kontekst działa możemy to oczywiście wykorzystywać w wielu plikach
na wielu poziomach zagnieżdżenia o tym mówiłem już w poprzednich
kursach natomiast tutaj skupimy się na tym że pojawił się nowy
hook wiem że już jesteśmy w dziale po hook'ach akurat
tutaj nie stwierdziłem że jego zastosowanie będzie miało sens więc warto teraz go wprowadzić
ten hook nazywa się use
context jest naprawdę bardzo przyjemny ponieważ
pozwala nam wywalić consumer który zawsze był takim powiedzmy nie
do końca wygodnym rozwiązaniem teraz możemy stworzyć sobie coś takiego że w komponencie
funkcyjnym będziemy zwracać
sobie dokładnie to samo co mieliśmy wcześniej czyli
user name i tutaj podany sobie context
name to
oczywiście wywali błąd się na razie nie przyjmujemy ponieważ teraz stworzymy
sobie const context i do hook'a use context
podajemy po prostu context który stworzyliśmy za pomocą metody react create
context w ten sposób ten komponent otrzyma
dostęp do tych informacji które zawarte są w tym kontekście więc jest to super wygodne a
nie ukrywajmy że ten kod stał się bardziej czytelny kiedy nie ma tej funkcji strzałkowej i mamy
po prostu hook'a który nam zaciąga ten context i później już możemy sobie z niego śmiało
korzystać więc to takie przypomnienie jeśli chodzi o context i
małe wprowadzenie jeśli chodzi o hook'a use context jak widzisz jest to banalne więc nie
ma sensu się nad tym dłużej pochylać po prostu chciałem wprowadzić tutaj kolejny hook który bardzo
nam się przyda przy tworzeniu compound components ale tym zajmiemy się już w następnej lekcji