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 zrobiliśmy sobie mały wstęp do compound components
a teraz już czas żeby zająć się prawdziwym kodowaniem i stworzyć sobie właśnie
taki pierwszy compound component który będzie po prostu komponentem udostępniającym
nam logikę która pozwoli nam na tworzenie multi step form'ów
czy też po prostu multi-step czegoś bo to nie muszą być formy i zaraz
ci pokażę dlaczego to nie muszą być formy jaką mamy dowolność w tworzeniu tak naprawdę rzeczy
które zawarte zostaną w naszym compound component tutaj jeszcze zanim zaczniemy
tylko chciałem podkreślić że tego rodzaju rozwiązanie jak compound component to
nie jest coś co stosujemy codziennie w każdej aplikacji w react'cie raczej
jest to rozwiązanie które jest wykorzystywane przez twórców na przykład bibliotek
do tworzenia jakiś formularzy albo innych
komponentów które są reużywane w wielu projektach przez wielu deweloperów natomiast bezpośrednio
w projektach raczej rzadziej można to znaleźć niemniej jest to kurs
zaawansowany react'a o czym ciągle przypomina nam ten napis i dlatego chcę
ci pokazać kolejnypo prostu zaawansowany pattern który możesz wykorzystywać
w aplikacjach lub nawet w open source'ach jeśli zaczniesz je tworzyć
więc pierwsze co sobie stworzymy to folder multi-step który
umieścimy w folderze components multi-step i
to w nim będziemy trzymać wszystkie komponenty należące do tego compound component pierwszy
który sobie stworzymy to oczywiście multi-step czyli taki mózg całej operacji i
tam będzie przechowywał całą logikę która odpowiadać będzie za sterowanie
pozostałymi elementami naszego multi-step zaimportujemy sobie
reacta stworzymy sobie tutaj na razie bardzo prosty komponent funkcyjny wyciągniemy
sobie od razu children z propsów i zastosujemy
ten komponent jak go tylko wyeksportujemy zastosujemy
go w widoku users tutaj w tym miejscu sprawdzimy
czy on działa okej mamy children
w naszym multi-stepie czyli wszystko jest okej działa tak jak należy i
skoro mamy już ten pierwszy główny komponent to teraz możemy przejść do wyjaśnienia w jaki
sposób będziemy tworzyć pozostałe komponenty jak one będą współgrać z
tym naszym komponentem który znajduje się w tym miejscu i zanim stworzył jakąkolwiek logikę
która będzie współdzielona między tymi komponentami to pokażę ci właśnie jak komponować
compound components i jak później wykorzystywać w praktyce ale
na razie bez żadnej logiki więc stwórzmy sobie na przykład tutaj kolejny komponent
który chcemy żeby był częścią tego zespołu komponentów on będzie zależny w
późniejszym etapie od tego multi-step powiedzmy że będzie to na przykład page
tak go sobie nazwiemy czyli to będzie pojedyncza strona naszego multi-stepa
on będzie zawierać jakieś informacje na temat tego
co sobie tam wrzucimy tak naprawdę ponieważ właśnie ta strona będzie miała
dużą swobodę jeśli chodzi o wyświetlanie danych ona po prostu będzie wyświetlać
to co my jej już w całej implementacji w widoku włożymy
po prostu do środka drugim takim komponentem który na pewno będziemy wykorzystywać jest
controls czyli właśnie te buttony które będą nam pozwalać na przełączanie slajdów
tutaj akurat żadnego children nie będziemy podawać natomiast
będzie to zespół faktycznie trzech buttonów previous
next i submit
i submit będzie pojawiał się tylko i wyłącznie w jednym
scenariuszu jak już nie będziemy mieć nic jako następny slajd ale to
sobie wdrożymy za chwilkę i teraz to co musimy zrobić to oczywiście wyeksportować sobie
te komponenty które są takimi modułami takimi częściami naszego większego
compound component stały się teraz częścią tego zespołu i na razie
zrobię to w sposób nie wiem czy niepoprawny ale na pewno nie do końca optymalny
to będzie dziwacznie wyglądało ponieważ zaimportujemy sobie multi-step a obok
tego zaimportujemy sobie jeszcze page i controls jako osobne komponenty
i wykorzystamy teraz właśnie w tym miejscu toples
to p sobie wywalimy i
dodamy jeszcze controls ach tutaj oczywiście zrobiłem błąd
button napisałem przez jedno
t dlatego nie wygląda jak button okej i
w ten sposób mamy taką podstawową strukturę compound component
jest to zespół komponentów które w przyszłości będą wpływać na siebie oczywiście
na razie nie możemy tego nazwać compound component no bo nic nie robią
tak naprawdę po prostu wyświetlają się jeden w drugim i to jest tyle natomiast
to co możemy już teraz zauważyć to że mamy sporą dowolność jeśli chodzi na przykład o kolejność
renderowania tych elementów na przykład w taki sposób oczywiście te
strony page one two i three nie będą widoczne wszystkie naraz
więc to nie ma za bardzo znaczenia ale na przykład możemy zrobić to w taki sposób że buttony
są na górze albo że na przykład mamy jeszcze jakąś informację która
na przykład w jednym miejscu aplikacji powinna się wyświetlać w innym nie więc to
też jest całkiem fajne że możemy coś takiego wrzucić i to będzie widoczne na każdym widoku
na każdej podstronie naszego multi-step form'u natomiast to co dla
mnie jest dziwaczne i co nie podoba mi się w tym compound component to
to że musimy importować to w taki sposób moim zdaniem inna
notacja jest tutaj bardziej przyjazna programiście i też
to jest notacja którą właśnie wykorzystuje kent c. dodds do są
też programiści którzy nie wykorzystują tej notacji natomiast dla mnie ona jest po prostu bardziej
przemawiająca i co prawda ona w tej pierwotnej wersji wynikała z nieco
innej rzeczy ponieważ wcześniej compound components
były klasowe i wtedy w klasie mogliśmy ustawiać takie pole jak static
które pozwalało nam na uzyskanie bardzo podobnego wizualnie
efektu jaki uzyskamy łatwiej będzie to wytłumaczyć jak już to napiszę natomiast
teraz zrobimy to w nieco inny sposób i po prostu wyeksportujemy sobie
wszystkie nasze komponenty które mamy w tym miejscu jako jeden obiekt
a następnie
zaimportujemy to w
taki sposób wpisując import gwiazdka as multistep
i teraz możemy zrobić coś takiego zaimportowaliśmy
obiekt który eksportujemy z tego pliku i nazwaliśmy go multi-step z
racji że jest to obiekt możemy przez kropkę dostać się do jego kluczy więc możemy dostać
się właśnie do komponentów które wyeksportowaliśmy razem z tym obiektem i
w ten sposób widzimy że wszystkie te komponenty należą tak naprawdę do jedenj grupy komponentów
które czemuś mają służyć w ten sposób staje się to dużo bardziej czytelne
jedyne co mi się tutaj nie podoba to fakt że mamy tutaj komponent który się nazywa multi-step
multi-step czyli trochę masło maślane i moim zdaniem możemy go spokojnie
zamienić albo na przykład wrapper ale wydaje mi się że tutaj akurat bardziej
trafna będzie nazwa wizard ponieważ to on jest jakby tym kreatorem
tym komponentem który będzie zarządzał całą stanym naszego compound
component i w ten sposób mamy page controls i wizard
mamy to wszystko w jednym miejscu i wygląda to
całkiem fajnie zupełnie jak jakaś biblioteka którą byśmy pewnie zaimportowali z npm
i jeszcze dosłownie na koniec tej lekcji wrócę do tego co mówiłem o komponentach
klasowych pokażę ci o co mi z tym chodziło nazwijmy to jakkolwiek
na przykład my component stworzymy sobie po prostu komponent
klasowy i teraz jak sobie wykorzystamy
ten komponent w
tym miejscu to oczywiście
widzimy go mamy siema możemy też wrzucić coś do środka ponieważ
on też przyjmuje children okej
to nam się wyświetli i to o co mi chodziło z tym static
i jak wyglądały wcześniej compound components jak były konstruowane to po prostu mogliśmy
tutaj w tym miejscu stworzyć sobie static przykład page
które byłoby funkcją które zwracałaby coś
takiego i teraz jeśli w tym komponencie
wpisalibyśmy my component page to dostalibyśmy
się właśnie do tej funkcji która zwraca nam to czyli
zapis jest jakby bardzo podobny tylko
sposób konstruowania tego był zupełnie inny static właśnie w kontekście reacta
zazwyczaj był konstruowany po to aby tworzyć
tu jakieś takie podkomponenty zwłaszcza właśnie widziałem to w przypadku
utworzenia compound components możemy tutaj nawet podawać propsy które
będą indywidualne dla tego statica więc tutaj jak wpiszemy
sobie props children i wpisalibyśmy tutaj o
więc jakby one mogły mieć też swoje
indywidualne propsy więc jeśli kiedyś spotkasz taki
zapis compound component który będzie miał static w klasie i dodatkowo
gdzieś tutaj pewnie pojawi się kontekst ale jeszcze ten właśnie ze starym zapisem nie
jest hookiem jest kontekst który oczywiście możemy używać tylko w komponencie funkcyjnym to
niech cię to nie zdziwi natomiast sposób działania który ja pokażę będzie na pewno bardzo
podobny do tego jak to działało wcześniej więc taka jest różnica między tym
co my robimy a tym jak to robią wcześniej czy po prostu jak się
to robiło przy komponentu klasowego