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 stworzyliśmy sobie bardzo prostą animację i
też funkcję która wykonuje nam focus na naszym inpucie za pomocą właśnie
use ref o którym już trochę wiemy natomiast teraz przejść
z tobą do kolejnej części tej lekcji o use ref w której pokażę ci
jak zintegrować refy z jakąś zewnętrzną biblioteką która właśnie
też próbuje dobrać się do naszego domu czyli tak naprawdę trochę
konkuruje z reactem który mówi że on przecież sam wszystkim chce zarządzać
on sobie ma swój virtual dom i po prostu wszystkimi update'ami
on rządzi i nie pozwala tutaj nikomu wchodzić sobie w buty natomiast
są takie biblioteki jak d3 jak gsap które
po prostu potrzebują tego żeby dostać się do tych elementów z tego względu żeby na
przykład wykonać animacje aby wykonać jakieś prezentacje danych
w przypadku d3 więc teraz właśnie stwórzmy sobie może coś
co spowoduje że będziemy mieli animowane elementy na naszej stronie
załóżmy że będziemy mieć tutaj jakiegoś div'a który po prostu będzie
miał jakieś kolorki teraz to wszystko ustalimy pierwsze co chcemy zrobić to
oczywiście zainstalować do naszego repozytorium gsap'a
czyli greensock animation platform i
potem jak już sobie to zainstalujemy to teraz jeszcze dodajmy sobie widok
components w naszych stylach jakiś
styl dotyczący właśnie wyglądu naszego div'a który będziemy chcieli animować więc
załóżmy że będzie on na przykład się nazywał box będzie
miał 300 pikseli szerokości i
wysokości background-color damy
mu na przykład lightcoral zaimportujmy
teraz sobie te style może
niepotrzebnie tutaj dałem tego calc'a zobaczymy
teraz mamy go idealnie na środku i
teraz załóżmy że chcemy właśnie po odpaleniu naszego komponentu w
jakiś sposób zanimować sobie ten box jeszcze nie wiem jak będziemy improwizować
pierwsze co musimy zaimportować to tweenmax z
biblioteki gsap tween max następnie
musimy stworzyć ref który właśnie podamy do tego teenmax'a bo tweenmax będzie
odwoływał się do bezpośrednio do elementu w htmlu więc musimy mu
dać ten dostęp musimy mu pozwolić na uzycie ref'a nazwiemy to
sobie boxref pamiętaj że to może nazywać się jak chce wystarczy
że używam właśnie tego hook'a ref właściwie use ref
i dostaję tutaj null'a na początku props'a
nazywamy ref i podajemy mu tutaj nazwę tej zmiennej a właściwie tego const'a
które utworzyliśmy okej i teraz
animacja którą chcemy wykonać nie jest tigger'owana
przez żeden button nic takiego ona ma się wykonać zaraz po tym jak komponent
nam się zamontuje i tutaj właśnie wracamy do hook'a use effect
o którym mówiłem dwie lekcje temu i
to właśnie teraz on nam się przyda bo tak jak mówiłem use effect działa
podobnie jak component did mount możemy podać sobie
tutaj funkcję w której powiemy słuchaj w momencie jak zamontujesz
już ten komponent to chcemy żebyś wziął
sobie tweenmax'a czyli tę bibliotekę do animacji wziął
sobie boxref current żebyś
a tutaj jeszcze jedno tweenmax
przyjmuje różne metody a właściwie udostępnia
nam różne metody i między innymi taką jak from albo to i
from powoduje że dajemy jakby do funkcji
początkowe położenie naszego elementu i
on później się zanimuje do miejsca w którym on jest docelowo
jakby w naszych stylach czyli do środka w tym momencie jeśli na przykład podamy mu
że on ma wyjechać z pozycji x minus 100%
czyli na osi x on ma przesunąć się na samym początku o
100% i dopiero wjechać nam w to miejsce w którym jest teraz jeszcze jako
drugi argument musimy podać tutaj długość animacji
1 to jest jedna sekunda
teraz jak zapiszę to to zobaczysz że ta animacja się dzieje możemy
jeszcze zrobić sobie jedną rzecz na przykład opacity 0
tylko teraz w stylach a nie muszę nawet tego definiować on
się domyśla że opacity wtedy jest jeden na samym
końcu tak więc nasza animacja działa możemy jeszcze podać
scale jak widzisz
wszystko działa zachęcam cię do korzystania z
biblioteki gsap jeśli właśnie potrzebujesz jakichś bardziej zaawansowanych animacji jest
to bardzo szybka bardzo wydajna i też bardzo fajna w życiu biblioteka która
na przykład pozwala nam na łączenie wielu elementów w jedną animacje
oczywiście nie mówię o tym żeby teraz używać jej zawsze za każdym razem kiedy potrzebujesz
jakichś animacji bo większość jednak da się zrobić przez css natomiast
jeśli masz po prostu jakiś bardzo skomplikowane animacje w css jak właśnie przy
pomocy keyframes'ów stworzone i czasami na przykład refaktoring
tych frames'ów zajmuje ci nie wiem kilka godzin żeby dopasować jakieś
wartości czasowe do siebie żeby to dobrze wyglądało to wtedy na pewno bardzo dobrym
pomysłem jest właśnie wykorzystanie gsap'a nie jest to ciężka biblioteka jeśli chodzi o
wagę chyba waży 12 kilobajtów z tego co pamiętam a naprawdę efekty
są świetne i też po prostu jakość pracy z tą biblioteką
jest dużo wyższa niż z css'ami w przypadku właśnie takich bardzo skomplikowanych
rozbudowanych animacji ale to tylko taka mała dygresja na temat
gsap'a natomiast ja chciałem ci pokazać właśnie jak możemy używać jeszcze use effect
do takich operacji które wymagają właśnie dostania się
do jakiegoś refa po zamontowaniu się naszego komponentu tutaj na naszej
aplikacji i to na tyle jeśli chodzi o hook'i use ref natomiast w następnej lekcji
przejdziemy już do tworzenia własnego hook'a