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 poprzednich lekcjach pokazałem ci jak wykorzystać
hooks'y use state i use reducer a teraz chciałbym ci
pokazać na czym polega jeden z takich może nie trudniejszych
ale nieco słabiej rozumianych hooks'ów który nazywa się use effect
i use effect ja to zawsze odbieram także też
miałem przez początek problem z tym jak to rozumieć jak korzystać z tego
hooks'a ale tak naprawdę jest to dość prosty bo po prostu możemy nim
zastąpić component did mount component will unmount i
component did update on zawiera te trzy rzeczy w
sobie i tak też jest napisane dokumentacji więc jeśli wykorzystujemy sobie
use effect to to co on przyjmuje to funkcja
która wydarzy się po zamontowaniu tego komponentu albo
zapdejtowaniu tego komponentu on przyjmuje jeszcze
jeden argument ale o nim powiem trochę później natomiast teraz chciałbym ci pokazać co możemy zrobić
z takim use effect'em samym na razie bez żadnych innych hooks'ów właściwie
oprócz jednego ponieważ będziemy potrzebować jakiegoś stanu w naszym komponencie będę sobie
zaciągał jakieś dane z
api tutaj sobie
stworzymy jakiegoś json'a okej stworzyłem sobie tablice
w której dostaje po prostu 5 obiektów z content'em z id
to jest w ogóle bardzo fajne narzędzie moki które pozwala nam no właśnie na takie mokowanie
naszych requestów dostajemy tutaj linka jeśli go sobie wkleimy w jakiegoś axiosa
albo fetcha nawet to będziemy mogli po prostu zaciągnąć to co tutaj dostaliśmy
my akurat możemy wykorzystać fetch'a ponieważ
to będzie taki zwykły get request więc
teraz w naszym use effect możemy stworzyć sobie data
fetch'ujemy sobie to co mamy tutaj pod tym linkiem to zwraca nam
response i
na razie sobie wylogujmy to jak
wrócimy do naszego komponentu do naszej konsoli to zobaczymy że mamy response
i oczywiście żeby się dobrać do tego co mamy w body musimy wykorzystać tutaj
response json oczywiście zwracamy to co
tutaj dostaniemy z tego i ten json ta
metoda zwróci nam kolejnego promise'a ale
tym razem to już będzie nasze items w tablicy
dokładnie tak się stało czyli
podsumowując to co się tutaj wydarzyło to podczas zamontowania się naszego komponentu
wywołaliśmy funkcję która pobiera nam dane
z naszego api i wyświetla nam ją tutaj po prostu zaraz
po tym jak nasz komponent się zamontuje więc jest to naprawdę taki
odpowiedni component did mount ale żeby nie było tak nudno
to jest zaawansowany kurs możemy tutaj sobie dodać axios'a
zaimportujemy go sobie do naszego komponentu rzadko
jest tak że nasza aplikacja wykorzystuje tylko get request więc ten
access i tak prędzej czy później się tutaj pojawi jeśli
wylogujemy sobie response data to będziemy mieć dokładnie to samo a kod jest
nieco bardziej czytelny i teraz jeszcze żby było ciekawiej możemy
tutaj zrobić funkcję asynchroniczną w naszym use effect czyli taką gdzie
nie będziemy musieli stosować then wywalmy
więc ten then tutaj axios get zostaje
natomiast wewnątrz tutaj stworzymy sobie funkcję first
data który będzie wykorzystywała async
nazwiemy sobie consta response i
tutaj użyjemy await axios get
w ten sposób response
data będzie zawierał również nasze
elementy a muszę jeszcze przecież wywołać te funkcje okej
jeśli nie znasz do końca zasad rządzących async
await to bardzo gorąco zachęcam cię do zapoznania się z tym
api i najlepiej zrobić to po prostu oglądając jakiś zaawansowany kurs
o javascript albo czytając dokumentację na mdn ponieważ o tym
naprawdę można by było zrobić cały osobny dział w tym kursie a nie mamy
na to czasu musimy się skupić na react'cie więc po prostu w tak bardzo dużym
skrócie async await pozwala nam na zastąpienie tej notacji
promise'owej właśnie taką notacją nieco krótszą w
której po prostu to await rezerwuję nam promise'y mamy
po prawej stronie od tego słowa await i zapisywane są w tym const'cie
to tak w dużym skrócie mam nadzieję że jest to dla ciebie jasne jeśli
nie to tak jak mówiłem zachęcam do kursów zaawansowanych o javascripcie
ale skoro już mamy nasze elementy na miejscu tutaj
w response data to teraz możemy sobie wykorzystać use state
znany już z poprzednich lekcji lekcji i
tylko tak naprawdę utrwalając po prostu co już zapisaliśmy sobie
items list i set items
list use state pusta
tablica na początku teraz możemy sobie to odblokować
jedyne co chcemy wywalić na razie to to on click bo już nie mamy tej metody tutaj chciałem tak
uprosić ten syntax ten komponent żeby po prostu nie było tutaj śmieci
i teraz w momencie kiedy nasze dane są już pobrane
możemy sobie wykorzystać set items list i
wrzucić tutaj response data i
w tym momencie nasze zadania zostały wyświetlone możemy
też zainicjować ładowanie naszego contentu w momencie kiedy na przykład byłoby
tak że trwa to trochę dłużej niż powinno items list jeśli
długość naszej tablicy nie jest większa od zera wtedy
możemy wyświetlić coś innego więc jeśli spełniamy ten warunek to wyświetlamy normalnie
naszą listę jeśli nie to możemy sobie wyświetlić tutaj na przykład button
wybieram button ponieważ
on ma ogólnie taką fajną klasę is loading więc
jak zwykle class name coś
zepsułem tutaj za dużo nawiasów nam się narobiło
okej teraz jest dobrze i
mamy tutaj w moki coś takiego jak moki delay które
jak sobie skopiujemy na koniec naszego requestu i powiemy że ma trwać 1000
milisekund to widzimy że nasze itemy
się ładują i dopiero po sekundzie wyświetlają się także tak
to wygląda i do tego możemy używać use effect czyli do takiego asynchronicznego
na przykład ładowania danych po zamontowaniu komponentu ale oczywiście nie jest to jedyna rzecz
do której use effect nam się przyda i o tym już w następnej lekcji