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ę stworzyć higher order component które
włożyliśmy do naszego komponentu columns z tego na prawdę opletliśmy
go właśnie w dwa hoc'e nazwijmy to hoce niech to będzie skrót
bo nie ukrywam że higher order component to jest dość trudne do wymówienia
więc od teraz będę posługiwał się skrótem hoc mamy
tutaj dwa hoce i chcielibyśmy żeby to wyglądało nieco lepiej
wygląda to w ten sposób że łatwo się w tym pogubić jeśli
doszedłby nam tutaj trzeci albo czwarty hoc no to wtedy mielibyśmy tutaj naprawdę duży
problem bo mielibyśmy okropny kod na szczęście z pomocą przychodzi
nam coś co jeszcze parę lat temu było dużo bardziej popularne
i zaraz wyjaśnię ci dlaczego natomiast teraz jego popularność czy
właśnie popularność tego rozwiązania nieco spadła ponieważ większość rzeczy
które ono oferowało pojawiła się po prostu w react'cie i pewnie
jeśli powiem ci że chodzi o bibliotekę recompose to być może coś już ci świta
natomiast teraz przejdziemy sobie właśnie do repozytorium tej
biblioteki i chciałbym ci powiedzieć czym właściwie recompose jest jeśli w ogóle nie
masz pojęcia o co tutaj chodzi recompose jest to biblioteka
która pozwala na wykorzystywanie hooks'ów w react'cie na
przykład with state o których opowiem ci w dalszej części tego kursu
jak wiesz hooks'y już weszły na dobre do react'a i możemy ich używać bez żadnych
problemów natomiast ta biblioteka oferowała jeszcze coś co bardzo
się przydaje właśnie podczas komponowania komponentów w
kilka hoc'y które musimy opleść więc jeśli mielibyśmy
ich 3 albo 4 albo chociaż 2 tak jak teraz tutaj to właśnie
ta biblioteka bardzo nam się przyda i zaraz pokażę ci co możemy z nią zrobić
także sobie ją zainstalujemy musimy wpisać npm install
recompose poczekamy jeszcze aż się zainstaluje i
teraz to co my chcemy zrobić to wykorzystać jedną z opcji którą
mamy na przykład tutaj nazywa się compose i co prawda tutaj mamy
dość skomplikowany przykład który wykorzystuje jakiś customowy kod natomiast my
chcemy zrobić coś dużo prostszego i coś co naprawdę ułatwi nam pracę więc
teraz zaimportujmy sobie compose
z biblioteki recompose musimy to opleść wydaje
mi się że w wąsy żeby można było to zaimportować z racji że jest
to jedna funkcja i teraz to co chcemy zrobić żeby ułatwić
czytelność tego kodu to po prostu musimy stworzyć tutaj
te funkcje wykorzystać funkcję compose w taki sposób
że do drugiego nawiasu wrzucimy columns czyli nasz komponent
natomiast do pierwszego
nawiasu wrzucimy nasze higher order komponenty tak
to wygląda teraz jeśli wszystko dobrze zrobiłem tak
to wszystko działa jak należy czyli jak widzisz przy
wykorzystaniu funkcji compose i wrzucaniu tutaj higher order
komponentów możemy tutaj ich mieć naprawdę wiele możemy mieć jeszcze 10
kolejnych wtedy po prostu łatwiej to przeczytać jest to
dużo łatwiejsze w odbiorze dla kogoś kto na przykład przyjdzie do naszego kodu
i będzie musiał coś tutaj pozmieniać to wszystko jak na dłoni przy okazji
właśnie tak jak pokazano tutaj w tej bibliotece można tutaj robić naprawdę cuda i
dodawać tutaj mnóstwo innych rzeczy natomiast my się już teraz tym nie będziemy zajmować
bo to trochę osobny temat co tutaj się dzieje więc to tyle
jeśli chodzi o pokazanie ci jak możemy radzić sobie właśnie z
zagnieżdżeniem higher order componentów dodawaniem compose po
to aby ułatwić czytelność naszego kodu i właściwie to tyle jeśli chodzi
o higher order komponenty w tym dziale w tym kursie właściwie ponieważ
chciałbym tutaj od razu powiedzieć że jest to raczej wzór
pattern którego nie używa się już tak często jak kiedyś pojawiły się rozwiązania
w react'cie które skutecznie zastępują to rozwiązanie natomiast nie
bez przyczyny ten kurs nazywa się react zaawansowany ponieważ możesz trafić do projektu
gdzie hoce nadal istnieją nadal mają się dobrze i trzeba z nich korzystać
a być może przyjdzie ci je refakturować i na przykład zamieniać na jakieś właśnie nowsze może
nieco bardziej wydajniejsze rozwiązania albo czytelniejsze wtedy też musisz
wiedzieć jak to działa stąd kilka lekcji poświęconych właśnie hoc'om w tym
kursie ja sam widziałem je wielokrotnie w bardzo wielu projektach więc po
prostu chciałem ci wyjaśnić na czym to wszystko polega natomiast teraz już zamykamy ten dział i
przechodzimy na następnego gdzie opowiem ci czym są render propsy być może już
miałeś miałeś z tym kontakt natomiast w tym kursie wyjaśnię ci już tak
krok po kroku jak tworzyć render propsy jak z nich korzystać co
rozwiązują i w przeciwieństwie do higher order komponentów jest to rozwiązanie
które faktycznie pojawia się dość często w react'cie jest
nadal używane więc jestem pewien że ci się przyda po prostu we własnych projektach