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 udało nam się przerobić naszego pierwszego hoca
a teraz zajmiemy się przerobieniem drugiego zanim przejdziemy do takiego praktycznego
wykorzystania render propsów to znaczy praktycznego wybierzemy
sobie po prostu jakąś bibliotekę która wykorzystuje render propsy i pokażę
ci jak to wszystko zintegrować w naszym projekcie ale zanim do tego przejdziemy
jeszcze w ramach ćwiczenia zróbmy sobie ten drugi hoc który nam
został mamy tutaj with auth możemy
go sobie przerobić na przykład na authorization
tak naprawdę to nie ten komponent możemy
sobie wyrzucić bo klasa nam tylko potrzebna więc tutaj to
ten komponent się musi tak nazywać is authorized toggle auth
tu się w nic nie zmienia to
oczywiście wywalamy i zamiast tego wrzucamy sobie
this props render i podobnie
jak w przypadku poprzedniego komponentu możemy sobie
zrobić tutaj render props to
możemy wyrzucić tutaj sobie po prostu to podamy explicit okej
i te render propsy podajemy w tym miejscu oczywiście
komponent również musimy zmienić mu nazwę nazwałem
go authorization i również przeniosę go do providerów w
ten sposób możemy wywalić sobie folder z higher order komponentami
już nam nie będzie potrzebny i mając już ten
komponent możemy teraz sobie przejść do columns ponieważ to on zawierał te dwa
higher-order komponenty i to on potrzebuje tutaj zarówno is authorized
jak i is collapsed do tego żeby działał więc musimy
to zrobić w taki sposób że zaimportujemy sobie jeden i drugi komponent
wykorzystujący render propsy nazwijmy je po prostu providerami okej
i teraz pierwsze damy collapse a drugi damy authorization
to znaczy powiedziałem jakby to było takie oczywiste musi je po
prostu zagnieździć w sobie więc pierwszy damy collapsed tak jak powiedziałem tutaj
wewnątrz niego damy render wyciągniemy
sobie is collapsed i toggle i
przy pomocy funkcji strzałkowej zwrócimy sobie jsx'a to sobie
skopiujemy i teraz wewnątrz tego collapse'a musimy
wykorzystać jeszcze authorization który również dostaje
propsa render i on również
daje nam coś w tym przypadku daje nam is authorized i
toggle auth i teraz mając
te dwa zagnieżdżone render propsy możemy sobie zwrócić
w końcu nasz ostateczny jsx więc mamy tak is collapsed toggle
is authorized i toggle off zaraz zobaczymy
czy wszystko
mamy tutaj toggle to się zgadza row class
musi być funkcją w której podamy
sobie is collapsed to jest tutaj
i wydaje mi się że ten komponent powinien
działać zaraz sobie przejdziemy do tipsów row class is not a function
okej mamy błąd tutaj
ten nawias jest niepotrzebny a tutaj musi być strzałka żeby to była funkcja dobra
to nam działa i
to również nam działa więc w taki sposób zagnieżdżając w sobie render
propsy możemy dostać po prostu dwie rzeczy znaczy
właściwie cztery rzeczy z dwóch różnych komponentów z dwóch różnych providerów wiem
że jest to składnia która nieco komplikuje sprawę widziałem
też projekty w których tych render propsów tych providerów było zagnieżdżonych na przykład 4
i wtedy naprawdę robi się niezła kabała natomiast jest
to też jeden z patternów i chcę po prostu ci pokazać jak to działa można też
korzystać z innych patternów właśnie takich jak higher order components jeśli akurat
w tym przypadku byłoby to wygodniejsze a wydaje mi się że w przypadku takich zagnieżdżonych
używając właśnie recompose'a łatwy przeczytać niektóre
rzeczy można by było też tutaj wykorzystać na przykład kontekst w jakiś pewnie sposób
tych możliwości jest naprawdę sporo a w następnym dziale pokażę
ci też jak wykorzystać hooks'y żeby w ogóle pozbyć się tego wszystkiego i
zrobić to jeszcze jeszcze czyściej ale na razie skupmy się na tych render
propsach więc wygląda to właśnie tak jak teraz oczywiście
można by było też to zrobić tak jak mówiłem na początku czyli zamiast
propsa render zrobić po prostu children as a function i wtedy ten komponent
kończył by się tutaj tutaj otwieralibyśmy sobie te wrota naszego komponentu nie wiem
czemu tak lubię to sformuowanie i to z niego wyciągalibyśmy
sobie to is collapsed is authorized więc różnica
jest tutaj nieznaczna tak naprawdę nie wiem czemu chyba z przyzwyczajenia jednak
wolę ten rodzaj zapisu chociaż na przykład w bibliotece którą
zaraz użyjemy jest ten drugi zapis no to jest kwestia po prostu konwencji
ważne żeby być spójnym żeby po prostu zachowywać sekwencje
w kodzie i jeśli zdecydujemy się na jedną opcję to po prostu z nią iść
z nią brnąć i być konsekwentnym oczywiście nie chodzi o to żeby teraz w
całym projekcie używać tylko render propsów nie to mam na myśli jeśli użyjemy na
przykład konwencji gdzie użyjemy render propsa właśnie w taki sposób no to
już się tego trzymajmy więc teraz w następnej lekcji pokażę ci jak wykorzystać
downshift i zrobimy sobie jakiś taki fajny formularz właśnie wykorzystując render propsy
z tej biblioteki