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ść kontynuujemy naszą przygodę z zaawansowanymi wzorcami
w react'cie i pora na kolejny jeden chyba z takich najgłośniejszych
wzorców który pojawił się zresztą dość niedawno w api react'a natomiast dość
sporo zmienił i naprawdę ułatwił życie w bardzo wielu przypadkach chodzi oczywiście
o hooks'y ale zanim napiszemy cokolwiek to warto tutaj powiedzieć parę
słów czym właściwie są hooks'y po polsku można to tłumaczyć jako haki
haczyki są to funkcje które zostały specjalnie stworzone do tego
żeby używać ich w komponentach funkcyjnych gdzie nie mamy takich rzeczy jak state jak
component did mount i innych rzeczy które pozwalają nam na wchodzenie
w interakcje z różnymi etapami cyklu
życia naszego komponentu natomiast w komponentach funkcyjnych
nigdy nie mieliśmy takiej opcji i hooks'y właśnie umożliwiają nam
się zaczepić o te konkretne etapy cyklu życia
komponentu których nam brakowało właśnie w komponentach funkcyjnych innymi słowy możemy
wykorzystywać komponenty funkcyjne niemalże tak jak komponenty klasowe
tylko teraz pytanie czy w takim razie wszystkie klasy które
znajdziemy jakkolwiek napisane w reakct'cie mamy teraz przerabiać na komponenty funkcyjne
z hooks'ami oczywiście że nie to nie tak i to nie jest też tak że react pozbywa
się komponentów klasowych natomiast w bardzo wielu przypadkach kiedy
piszemy nowe komponenty warto rozważyć czy niełatwiej będzie właśnie wykorzystać komponent
funkcyjny z hooks'ami a nie tworzyć specjalnie komponent klasowy i
wydaje mi się że na tym etapie nie ma za bardzo co wchodzić w teorię opowiadać za dużo
o hooks'ach lepiej po prostu zacząć ich używać więc teraz przejdziemy sobie
do naszego widoku components w którym zaczniemy właśnie tworzyć sobie jakiś
widok wykorzystujący react hooks zaczniemy
sobie od takiego podstawowego hooks'a który zresztą jest jednym z najpopularniejszych jeśli
tak patrzyłem na przykłady w internecie jeśli ktoś próbuje tłumaczyć hooks'y
to zazwyczaj zaczyna właśnie to use state jest to funkcja która pozwala nam
wykorzystywać state w komponentach funkcyjnych więc jeśli
teraz stworzymy sobie tutaj funkcję która nie
zwraca nam bezpośrednio jsx'a tylko możemy coś jeszcze tutaj do niej dołożyć
zanim zwrócimy to wszystko czyli stosujemy tę dłuższą notację
komponentu funkcyjnego to teraz w tym miejscu możemy sobie
właśnie wykorzystać funkcje use state którą zaimportowaliśmy do
naszego komponentu i zanim wykorzystamy to w poprawny
sposób to chciałbym ci pokazać jak use state działa i co nam zwraca więc
wyloguję sobie po prostu use state z pustym stringiem
do naszego react'a otworzę konsolę
wejdę sobie do components bo tam mamy
ten hook i jak zobaczysz mamy tutaj dwie rzeczy zamknięte
w tablicy mamy tablice w której mamy ten pusty string
który tutaj podałem jeśli podałbym pustą tablicę to byłaby to pusta tablica
jeśli podałbym tutaj roman
to byłby tutaj roman w stringach więc
cokolwiek tutaj podam to jest taki inicjalny taki początkowy state
który chcemy wykorzystać załóżmy że naprawdę będzie to po
prostu pusty string natomiast drugą rzeczą jest funkcja i
tutaj zaczyna się ciekawie bo ta funkcja po prostu pozwala nam na ustawianie
naszego state'u przy jej wykorzystaniu po prostu przyjmuje ona argument dzięki któremu
dany stan możemy ustawić na nowo i pewnie zastanawiasz się jak możemy
dostać się do tej rzeczy jak możemy dostać się do rzeczy które
zwraca nam ta funkcja żebyśmy mogli je wykorzystać w naszym komponencie tutaj
na próżno szukać takich że na przykład const state
use state zero
nie wiem możnaby było kombinować zobaczmy
co nam to wyreguluje undefined
jeśli tutaj wrzucimy stringa to dostaniemy nic
jeśli dostanie jeśli wpiszę tutaj roman to dostaniemy roman no
więc generalnie pomysłów można by było robić wiele natomiast jest
jeden sposób jak to wszystko zrobić i wykorzystując po prostu destrukturyzację
dostępną w es6 więc jeśli restrukturyzowałeś
destrukturyzowałeś już kiedyś obiekty to wiesz że robimy to
w ten sposób po prostu mając jakiś obiekt wyciągamy sobie z niego
jakieś tam wartości natomiast jeśli mamy
tablice albo funkcję która zwraca nam tablicę wychodzi na to samo w efekcie
zawsze mamy tutaj po prostu pod tym kryje się tablica zawierająca granicę dla elementu po
prostu to w przeciwieństwie do obiektu gdzie wyciągamy
sobie elementy po nazwach w tablicy wyciągamy je w kolejności
czyli jeśli mamy dwa elementy to możemy te dwa elementy
wyciągnąć nazywając je jak chcemy więc możemy na przykład nazwać
my state i function that sets
my state chociaż jest to okropna nazwa ale
chcę ci tylko pokazać że ta funkcja może nazywać się jak chce nazwijmy
ją na przykład w set new state i
w ten sposób jeśli mieliśmy tutaj dwie
rzeczy czyli pusty state albo state inicjalny który deklarujemy
tutaj jako argument do tej funkcji i funkcję która
po prostu wychodzi razem z tym state'em z
tej funkcji jest to zwracane to możemy to wyciągnąć na zasadzie kolejności
czyli pierwszy element naszej tablicy drugi element naszej tablicy pierwszy
odpowiada temu drugi odpowiada temu na
początku wygląda to magicznie ale tak naprawdę jest banalne w użyciu i
co więcej teraz mamy już state w naszym komponencie żeby
ci to udowodnić piszemy sobie tutaj my
state i
teraz jeśli zainicjujemy state hello world to
się pojawi w tym miejscu więc możemy sobie
stworzyć na przykład input
i przy wykorzystaniu tej funkcji set new state może
nazwijmy to tak jak trzeba zazwyczaj use state nazywamy tak
jak do czego one są przeznaczone czyli jeśli to na przykład będzie input content to
faktycznie niech to się tak nazywa a tutaj niech będzie set input content
i teraz jeśli stworzymy sobie ten input i
stworzymy sobie funkcję którą na przykład nazwiemy handle input change ona będzie
przyjmować event i
z tego inputu jak zawsze wyciągniemy sobie target value żeby
dostać się do jego zawartości wylogujmy sobie to jeszcze a
tutaj zapomniałem consta dodać i teraz on change
jak zacznę coś pisać to oczywiście widzę tutaj content tego
co wpisałem do mojego input'u ale
my chcemy przy każdym naciśnięciu klawisza żeby zmieniał
się nasz state żebyśmy widzieli co wpisujemy tutaj nie
ma prostszej rzeczy nie musimy używać żadnego set state jak w przypadku klasowych
wykorzystujemy set input content które
jest funkcją czyli to co wyciągnęliśmy z use state i ta funkcja
po prostu przyjmuje argument który stanie się naszym nowym state'em
czyli zostanie wrzucony do tej zmiennej tutaj i teraz żeby
to udowodnić jak zacznę pisać to hello world zmieni się na zawartość
input'u który tutaj mamy i
tym sposobem coś co w komponencie klasowym pewnie zajęłoby kilka linijek więcej
albo przynajmniej byłoby nieco bardziej skomplikowane bo jednak byłaby to klasa a nie
zwykła funkcja tutaj zrobiliśmy to naprawdę prosty sposób
i tak właśnie działa use state a w następnej lekcji pokażę ci jak możemy
to wykorzystać w nieco bardziej zaawansowany sposób w bardziej skomplikowanych komponentach