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ę wyseparować tę logikę związaną
z zapadaniem się komponentu do higher order komponentu gdzie
teraz jakby wszystko właśnie jest sterowane z tego miejsca nasze komponenty są oplatane tylko
tym higher order component'em i wszystko wydaje się być w porządku natomiast
jest jedna rzecz o której zapomnieliśmy i ona jest dość ważna ponieważ zazwyczaj
komponenty które używamy gdzieś w innych komponentach dostają jeszcze propsy
nie tylko te które one dostały z higher order component ale też jakieś
propsy na przykład przekazywane od rodzica więc nawet teraz jeśli chciałbym w rodzicu czyli
w komponencie tips właściwie widoku tips dodać tutaj propsa roman
w którym będę wpisywał hello roman to jeśli przejdę sobie
do mojego columns zdestrukturyzuję tego romana
i wrzucę go na przykład tutaj zamiast
treści buttona jak widzisz nie pojawiło się kompletnie nic
mimo że button nadal działa nie pojawiło się nic ponieważ
jeśli wejdziemy sobie naszego higher order komponentu to zobaczymy że do
naszego wrapped component przekazujemy tak naprawdę tylko 2 propsy
is collapsed i toggle ten komponent nie ma prawa wiedzieć o żadnym
innym propsie który został przekazany a z racji że nasz higher
order component zwraca inny komponent to
tak naprawdę w tym komponencie właśnie dochodzi do przekazania tych propsów u rodzica
to tutaj mamy ten obiekt this props do
którego się musimy odwołać więc żeby dodać te pozostałe
propsy które są przekazywane już bezpośrednio
przy użyciu tego komponentu musimy po prostu dodać tutaj
ze spread operator'em this props i wtedy tak jak już mówiłem
w poprzednich kursach jeszcze raz to powtórzę te propsy zostaną rozprowadzone
po tym komponencie i wtedy one faktycznie się pojawią dlatego teraz nasze
row roman jest już na swoim miejscu ten props został po prostu przekazane dalej jeśli mielibyśmy
tutaj komponent funkcyjny który zwracamy tylko tak na szybko to napiszę
ponieważ chcę to wyjaśnić jeśli mielibyśmy taki komponent funkcyjny to
w tej funkcji musielibyśmy podać to props ponieważ to właśnie przy
wywołaniu tego komponentu w rodzicu tak naprawdę wykorzystujemy tę funkcję
create element którą react ma pod swoim
jsx'em ukrytą i tam właśnie przekazujemy te propsy więc
tak jak w funkcjach wyższego rzędu czyli w higher order functions
tak samo w higher order component podajemy jakby do tej drugiej funkcji którą
zwracamy właśnie te propsy które są podawane przy wykorzystaniu naszego komponentu
i wtedy miałoby to taki wygląd
czyli mamy tutaj props i props a w klasie z
racji tego że tutaj w klasie nie mamy żadnej funkcji gdzie podajemy
te propsy jako argument to po prostu odwołujemy się do this props
i wtedy klasę już wie o co chodzi ale to tylko tak w kwestii
wyjaśnienia jaka jest różnica między klasowym a funkcyjnym jeśli chcielibyśmy
zwracać funkcyjny dobra teraz na szybko wrócę dobra
więc zostawiamy tak jak było z tymi this props ale tutaj usunę tego propsa
roman on jest nam niepotrzebny w tej chwili więc możemy się go pozbyć
tutaj również okej i
teraz załóżmy że mamy jeszcze jakiś inny higher
order component który robi coś innego i chcielibyśmy połączyć je ze
sobą zamienię sobie tego propsa is collapsed na true
tak żeby one zawsze były ukryte możemy je nadal widzieć
i teraz zróbmy tak że columns będzie
dostępne tylko jeśli pewien inny
warunek będzie spełniony i teraz ten inny warunek to może
być na przykład że użytkownik jest zalogowany i dopiero wtedy może zobaczyć
sobie zawartość tego co tutaj się znajduje więc stwórzmy
sobie nowy higher order component nazywa się with auth od
authorize można skopiować sobie nawet wszystko co tutaj mieliśmy
ponieważ będzie to dość podobny
komponent tutaj będzie is authorized domyślnie
będzie to false i teraz tutaj oczywiście zrobimy sobie toggle
auth czyli
jak będziemy coś klikać to będziemy się albo logować albo wylogowywać dobra
i stworzyłem nowy higher order component który teraz chcemy zaimplementować
sobie w naszym columns teraz dodam tutaj drugi button damy
mu jakiś inny kolor dla odróżnienia na
razie na onclick nic tutaj nie damy i teraz chcemy
zaimportować sobie ten higher order component który przed chwilą stworzyliśmy without
okej
i co możemy zrobić żeby dodać jeden
do drugiego no jest to w miarę proste natomiast
robi się dość skomplikowane jeśli chodzi o wygląd tego musimy po prostu dodać
kolejny higher order component w ten sposób i
to będzie działać natomiast nie będzie super piękne jeśli teraz sobie
zdestrukturyzujemy tutaj jeszcze is authorized i toggle
auth i teraz
dodajmy sobie jeszcze nad
tymi elementami na przykład tutaj title
żebyśmy wiedzieli czy jesteśmy zalogowani czy nie ojej
ale nie w tym miejscu i nie takie wielkie może
niech to nie będzie h tylko będzie zwykły p okej
teraz jak klikam na login tam
mamy albo truo albo false możemy jeszcze zrobić taki nawet feature tutaj
okej
teraz mamy login logout i teraz tak jeśli chcemy
zobaczyć coś ale nie jesteśmy zalogowani to nie zobaczymy
tutaj nic musimy być zalogowani żeby móc to zobaczyć więc
nie dość że tutaj mamy ten warunek decydujący o klasie to możemy
sobie jeszcze zrobić coś takiego że cały ten komponent z klasą row class
możemy po prostu wrzucić do takiego condistional'a że is authorized
jeśli tak to zwracamy tutaj to
co mamy w tym miejscu natomiast jeśli nie
to zwracamy p albo
h2 dodamy tutaj tytuł is warning
dobra
a widzę że ta
klasa nie działa na napisy na to nic więc
teraz jeśli klikam collapse to oczywiście nic się nie dzieje muszę najpierw
zrobić login żeby móc oglądać sobie ten content
więc jest to takie całkiem sprytne i
teraz faktycznie jeśli zrobimy to w ten sposób to nawet te div'y nie są
renderowane tutaj do naszego drzewka dom więc jeśli ktoś nie jest zalogowany to
po prostu nie podejrzy tego contentu musimy się zalogować i wtedy nam
się pojawia to co mamy w tym miejscu i możemy je dopiero wyświetlać więc
w taki sposób możemy łączyć ze sobą higher order komponenty żeby dokładać jeszcze
jakąś logikę związaną właśnie z czymś co nie jest do końca związane z tym komponentem
ale chcielibyśmy żeby ten komponent korzystał z takich możliwości natomiast
samo rozwiązanie tutaj na dole na którym chciałem się skupić nie wygląda
najlepiej więc w następnej lekcji pokażę ci co możemy z tym zrobić żeby zrobić
z tego nieco bardziej estetyczne bardziej czytelne rozwiązanie