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ść witaj w drugim rozdziale tego kursu w którym opowiem ci nieco
więcej o zaawansowanych wzorcach projektowych wykorzystywanych w
reakt'cie chciałbym żeby ten dział pokazał ci że te wszystkie
wzorce które są wykorzystywane często są przedstawione w takim
bardzo skomplikowanym świetle to znaczy ludzie
często przedstawiają je w taki sposób że naprawdę trudno jest je
zrozumieć ja sam kiedy uczyłem się react'a to często kiedy widziałem takie rzeczy jak render props
albo higher order component to włosy stawały mi dęba na głowie
jak jeszcze miałem włosy dopiero z czasem okazywało się że te
wzorce tak naprawdę brzmią groźnie tylko z nazwy i jak się je tak rozłoży na czynniki pierwsze
to okazują się wcale nie tak skomplikowane więc i ja chciałbym
tutaj w tym dziale przedstawić to w taki sposób że będziemy zawsze zaczynać od takich
zupełnych podstaw od takich naprawdę prostych przykładów i jeśli będzie taka
potrzeba to wtedy przejdziemy sobie do czegoś bardziej skomplikowanego po
prawej stronie mamy edytor w którym mamy taką super czystą aplikację react'ową
to znaczy mamy tutaj właściwie tylko napis i nic więcej mamy też zaimportowaną
bulmę o której mówiłem w poprzednim rozdziale i scss
modules właściwie css modules z dodanym scss
a także z class names który pozwala nam komponować wiele różnych nazw
klas w razie potrzeby i to właściwie cała taka podstawowa
konfiguracja na razie zostawiamy nasz kod w spokoju i to co
chciałem zrobić to pokazać ci na diagramie czym są higher order components
załóżmy więc że w naszej aplikacji mamy jakiś komponent ten komponent nie
jest tutaj w żaden sposób reprezentowany wizualnie to znaczy że on nie musi tak wyglądać chodzi
mi tylko o to że ten klocek reprezentuje jakiś komponent i
wewnątrz tego komponentu znajduje się jakiś fragment kodu który
odpowiada za pewną czynność na przykład załóżmy że jest to
zwijanie i rozwijanie listy jaka to jest lista
załóżmy że jest to lista komentarzy na naszym forum i
teraz ten niebieski klocek symbolizuje właśnie ten kod który odpowiada
za rozwijanie i zwijanie tej listy i teraz piszemy sobie naszą aplikację
i w pewnym okazuje się że mamy jakiś zupełnie inny
komponent który
dotyczy zupełnie czegoś innego ale na przykład też ma listę albo inaczej ma
jakieś elementy które również można zwijać i rozwijać i nagle w naszej
aplikacji musimy zduplikować dużą część kodu który już mamy napisany tylko
dlatego że jakiś inny komponent wyglądający zupełnie inaczej i działający
nieco inaczej ma właśnie też taką funkcję zwijania
i rozwijania własnego content'u i teraz co zrobić
w takiej sytuacji kiedy tak naprawdę mamy dwa różne komponenty ale
logikę którą coś łączy to znaczy ona jest w jaki sposób do
siebie podobna moglibyśmy tutaj właśnie wykorzystać podejście higher
order component czyli stworzyć tak na prawdę komponent który
będzie takim kontenerem który będzie zapewniał tę logikę która
dotąd znajdowała się w tym i w tym miejscu i teraz ten
kontener będzie wykorzystywany dowolnie
w momencie kiedy będziemy potrzebować tego w jakimkolwiek komponencie więc nawet jeśli pojawi
nam się jakiś trzeci komponent który jest zupełnie inny ale również musi korzystać z
tej możliwości to teraz możemy sobie brać nasz higher order component
i oplatać
te komponenty właśnie w niego bo higher order component jest
niczym innym jak funkcją która zwraca nam komponent więc
jeśli opleciemy sobie jakikolwiek komponent w naszą funkcję to
uzyskamy właśnie taki efekt takiego providera
dla pewnych funkcji pewnych możliwości naszej aplikacji jeśli
brzmi to dla ciebie skomplikowanie to pora najwyższa żeby usiąść do kodu
i coś napisać ale to już zrobimy w następnej lekcji