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 pokazałem ci jak wykorzystać w prostym
przykładzie use state czyli pierwszy hook którego się tutaj uczymy natomiast teraz
chciałbym ci pokazać nieco bardziej zaawansowane rzeczy które możemy zrobić z tym hook'iem
i pierwszą taką rzeczą która przychodzi mi do głowy która dość często jest wykorzystywana
to właśnie zarządzanie tym czy coś ma być widoczne czy nie na przykład
jeśli mielibyśmy hamburger menu to wtedy po kliknięciu na hamburger
pojawia się nasze menu i wtedy mamy coś w stylu hook'a jest open
i set hamburger visibility no nie wiem można to nazwać jak chcemy
w każdym razie pokażę ci jak możemy właśnie w taki prosty sposób zarządzać
tym czy coś jest widoczne czy jest niewidoczne i tutaj schowamy sobie po prostu ten
input więc teraz stwórzmy sobie tutaj button nazwiemy
go show input
tu możemy wywalić teraz nasz input jest widoczny ale
stwórzmy sobie hook'a który mówi is
input visible set input visibility albo
po prostu toggle input tutaj możemy
dać sobie false czyli kolejna wartość którą możemy podać tutaj w justa use state
to po prostu boolean teraz zrobimy tak że jeśli
is input visible to wtedy zwracamy sobie nasz input
oczywiście teraz się nic nie wydarzy natomiast w naszym buttonie dodamy
on click i
tutaj od razu podany naszą funkcję toggle input nie będziemy jej przemycać
tutaj do zewnętrznej funkcji ponieważ tylko w jednym miejscu ją wykorzystujemy
i też ona nie przyjmuje żadnego eventu nic takiego po prostu
musimy tutaj podać że to co dotychczas było
prawdą teraz będzie fałszem czyli is input visible musimy
temu zaprzeczyć w ten sposób zrobimy tak że jeśli było
false to ten wykrzyknik na początku zmieni to na true teraz
jak kliknę to nasz input się pojawił jak kliknę znowu
to zniknął więc pierwsze co warto
z tego wynieść to fakt że możemy podać tutaj na przykład boolean i możemy to
wykorzystać do tak prostych rzeczy jak właśnie zarządzanie widzialnością naszego
interfejsu natomiast druga rzecz jest taka że
w przeciwieństwie do state gdzie mieliśmy wszystkie elementy w jednym obiekcie tutaj
mamy inaczej zrobione i każdy state jest osobno
każdy use state to jest osobna instancja która zawiera swoją
własną wartość o określonej nazwie którą sami nadajemy
i swoją własną funkcję która odpowiada za to czy coś ustawiamy
więc to co jest w sumie ciekawe i nie wiem czy jest lepsze
czy gorsze dla mnie na pewno jest bardziej czytelne to fakt że te funkcje
nazywają się tak że od razu mówią nam co one robią więc nie mamy setstate
i wewnątrz po prostu kilku argumentów bo czasami tak było w react'cie że
pisaliśmy w set state pięć różnych rzeczy które zmienialiśmy w state'cie
tutaj mamy jedną rzecz odpowiedzialną za właśnie jedną
funkcję odpowiedzialną za jedną rzecz dobra i korzystając z okazji że mamy
tutaj już button i mamy input to nie wypada nam nie zrobić
to-do listy więc teraz wywalmy
sobie to jest is input visible nie będziemy tego potrzebować
dodamy sobie tutaj input nad naszym button'em i
sobie weźmiemy jeszcze z bulmy jakąś listę zaraz
tutaj coś znajdziemy w dokumentacji specjalnie też pokazuje ci jak korzystam
z bulmy bo wiem że nie jest to jakaś super popularna biblioteka a
uważam że ma całkiem fajną dokumentację i warto z niej korzystać więc może
ci się to przyda po prostu w przyszłości będziesz mieć większą swobodę w
poszukiwaniu niektórych elementów tutaj chyba niestety nie mamy nic
takiego jak lista zaraz zobaczymy jeszcze panel
czym jest panel w bulmie okej to jest coś takiego
bardziej skomplikowanego o
właśnie coś takiego chciałem zrobić czyli mamy diva
w środku mamy delete i mamy jakiś content notification
tak to się nazywało oczywiście
class name wszędzie musimy dodać dobra
components module scss w którym dodamy
trochę przestrzeni tutaj bo wygląda to okropnie okej
mamy przygotowaną strukturę naszej to-do listy więc teraz zajmiemy się przygotowaniem naszych
use state do tego żeby mogły te to-do listy obsługiwać więc pierwsze
co musimy zrobić to stworzyć sobie use state
który będzie przyjmował pustą tablice albo
nawet możemy zrobić inaczej będziemy mieć taki jakby inicjalny obiekt
który po prostu będzie takim empty state'em czyli taką wskazówką
dla użytkownika co może zrobić tutaj z tym elementem więc
content i dodatkowo żeby łatwiej nam się usuwało
te elementy z racji że mamy już ten krzyżyk którego chcemy używać dodamy tutaj jeszcze
sobie id później to id będzie dodawane automatycznie oczywiście
więc mamy już naszą tablicę a no właśnie items list
ją nazwiemy i tutaj set items list teraz ci wyjaśnię
dlaczego nie add items list albo add items
więc skoro mam już nasz
input a w naszym input'cie zapomniałem oczywiście o najważniejszym
że z racji że był to control component to powinien mieć jeszcze value
właśnie dyktowane przez to input content i wtedy to miało jak najbardziej
sens to na razie możemy wywalić okej
czyli mamy tutaj input content który inicjalnie będzie miał write your task
i do tego mamy te set input content która jest wykorzystywana tutaj
w handle input change która jest z kolei wykorzystywana przez nasz input
i teraz chcemy żeby
w momencie kiedy naciskamy button dodawało się dodawał
się nowy nowy element do naszej to-do listy ta nasza to-do lista jeszcze nie jest spięta
z naszą tablicą tutaj która już zawiera pierwszy element
czyli treścią tego musi być items list content kluczem tego
musi być items list id
i to wszystko będzie opakowane tak naprawdę a no tak
w map więc jeszcze inaczej trzeba to zrobić items list map
item i dopiero tutaj zwracamy
tak naprawdę to co chcemy czyli wewnątrz nie będzie items
list tylko item dobra
mamy naszą pierwszą notatkę i teraz nie pozostaje
nam nic innego jak dodanie tutaj on
click add
new item i w tym add new item wykorzystamy
sobie set items list do
którego zaraz przyjdziemy stworzymy sobie const new
element który będzie zawierał content i
content ten będzie nasz input content na id
będzie nasz items list length i
teraz tutaj jest pewna komplikacja ponieważ jeśli
dodamy tylko new element a zresztą pokażę ci to niewiele
nas to będzie kosztować add new item czyli teraz
mamy tutaj write your task i nazwa buttona jeszcze jest myląca
add item okej
dodaje to mamy błąd dlaczego
mamy błąd dlatego że tutaj
mieliśmy tablicę i w tej tablicy mieliśmy
dopiero obiekt a ja podałem teraz jako set items list
zwykły obiekt nie opakowany w tablicę więc
map nie jest metodą odpowiednią dla obiektów
dlatego wywala nam błąd możemy zrobić coś takiego i
wtedy to się pojawi problem jest taki że jak dodam sobie nowy task to on zastąpi ten który był wcześniej
wynika to z faktu że po prostu ustalamy za każdym razem kiedy wywołujemy te funkcje ustalamy nowy state
i musimy podać w tej funkcji co się działo przedtem jeśli chcemy zachować sobie ten state więc tutaj
jeśli chcemy żeby to co było wcześniej w items list
faktycznie obowiązywało musimy po prostu za pomocą spread operatora
użyć items list i dopiero potem nasz nowy element więc teraz
jeśli dodam sobie nowy task
to dopiero teraz widzimy że on się pojawił
kolejny task nie wiem czemu mówię
task a nie zadanie jakoś tak z amerykańskiego nam się teraz wzięło ale
to nic nasza funkcja działa więc żeby zachować stan
w use state musimy wykorzystać jego poprzedni stan przy
wykorzystaniu właśnie metody ustawiającej ten nowy stan brzmi skomplikowanie ale wygląda bardzo
prosto po prosto wykorzystujemy za pomocą akurat w przypadku tablicy
za pomocą spread operator'a poprzedni stan i dodajemy
nowy element który chcemy dodać tutaj
jeszcze jedna rzecz o której w sumie zapomniałem id musi być item
list length plus jeden ponieważ jak będziemy mieć
jeden element to wtedy ten drugi element też będzie miał
id 1 więc teraz jeśli wpiszę tutaj nowy element
to teraz będzie miał dwójkę i wszystko będzie git pamiętajmy
że id musi być unikalne akurat moglibyśmy tutaj nie
wiem zastosować uid albo no nie wiem coś skomplikowanego jakąś
math random do tworzenia nowego id ale myślę że w tak banalnym przykładzie
ten id ten item list length plus jeden wystarczy dobra i ostatnia
rzecz w tej lekcji to na szybko zróbmy sobie jeszcze consta remove element
który będzie dostawał id i
na podstawie tego id będzie filtrował items list w
taki sposób że będzie wywalał nam ten właśnie id który
podaliśmy i zostawiał wszystkie inne więc teraz tutaj jeśli zrobimy sobie new items list
i tutaj dodamy items list filter item
i jeśli item id nie jest równy id
to ma przejść tutaj
jeszcze jeden znak i wtedy możemy
sobie zrobić set items list new
items list w
momencie jak klikniemy na nasz button delete to mamy wywołać
te funkcje czyli on click tutaj podajemy funkcję
strzałkową ponieważ wypadać parametr argument właściwie do naszego remove
element czyli remove element item id jeśli
wszystko poszło dobrze to teraz jeśli sobie dodamy kilka różnych tasków
jak kliknę na drugi to usunie się drugi a wszystkie inne zostaną i
dokładnie tak się stało i
to tyle teraz jako zadanie domowe spróbuj stworzyć tutaj input który
również będzie wykorzystywał use state i po którym będziemy filtrować
nasze taski w taki sposób że jeśli wpiszemy coś w tym inpucie na górze to
wyświetlą nam się tylko taski które zawierają to słowo które wpisujemy właśnie w
tym inpucie jeśli ci się nie uda chodź zakładam że tak nie będzie myślę
że wszystko ci się bardzo dobrze uda jeśli natomiast chcesz zobaczyć jak ja to zrobię to
zapraszam cię do kolejnej lekcji gdzie pokażę rozwiązanie