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 za pomocą use state stworzyć
bardzo fajną to-do listę która w niczym nie odstępuje takim komponentom
klasowym więc teraz w ramach tego zadania które ci zadałem chciałbym ci
pokazać jak ja podejdę do tego żeby stworzyć sobie tutaj wyszukiwarkę tych zadań
które wkleiłem więc pierwsze
co zrobię to stworzę sobie input w
sumie to mogę go skopiować po prostu na
razie wywalę sobie to i to oddzielę
jakąś linią okej
search by
content możemy zrobić coś takiego to
wtedy powinien być tak na prawdę label tutaj nazwa też
powinna się zmienić input item to znaczy dobra
więc tutaj
możemy sobie już wpisywać coś i teraz musimy stworzyć sobie nowy
const który będzie się nazywał search content możemy
go nazwać set search input content i
teraz dochodzimy tu do pewnego problemu mamy tutaj handle input change który
co prawda obsługuje nam set input content ale nie możemy tu wrzucić drugiej
funkcji ponieważ wtedy będziemy wypełniać 2 inputy na raz generalnie
jest tutaj problem właśnie ze skalowaniem tego rozwiązania jeśli
mamy więcej niż jeden input na to musimy tworzyć osobne metody generalnie
wszystko staje się nieco bardziej skomplikowane i tutaj z pomocą przychodzi nam inny
hook który chciałem ci pokazać nazywa się set reducer i
jego działanie trochę przypomina redux'a właściwie bardzo
przypomina redux'a i zaraz pokażę ci jak możemy podejść do rozwiązania
tego naszego problemu który teraz powstał czyli nie stworzymy sobie dwóch const'ów które
będą miały use state tylko stworzymy sobie jeden const który nazwiemy
input content is set input conent
tutaj
po znaku równości podamy use reducer i use reducer
przyjmuje dwie rzeczy przyjmuje funkcję w
której podajemy state i new state i w niej pokazujemy
jak nasz reducer ma obsługiwać nowy stan i stary
stan my chcemy je po prostu łączyć ze sobą i
dodatkowo tu widzę mamy jakiś
syntax error tylko to naprawię tak i dodatkowo drugim
elementem jest inicjalny state który chcemy tutaj dodać więc
chcemy zrobić tutaj search i
tutaj możemy wpisać sobie search your item
a drugi to będzie item i
tu nazwiemy to albo zróbmy item input
content bądźmy tacy naprawdę dosłowni search input content
tylko wtedy będę musiał to zmienić jeszcze w jednym miejscu i
tutaj będzie write your task okej
czyli te dwie rzeczy możemy sobie wywalić teraz
search input content muszę tutaj dodać jako imię będzie
mi to bardzo potrzebne za chwilę i
i item input content do tego drugiego
inputa dobra tutaj
właściwie możemy zrobić inputs content ponieważ
mamy kilka tych inputów dobra
to już mamy naprawione refactor zawsze bywa bolesny więc set
input content i to co tutaj chcemy
zrobić ponieważ nadajemy nową wartość
dla jednego z elementów ale nie do końca wiemy
który to będzie element czy to będzie search input content czy item input conent i
moglibyśmy tutaj robić jakieś if else i tak dalej ale
po co skoro możemy to zrobić programatycznie jeśli sobie wylogujemy tutaj i
target name tutaj
tylko mały błądzik od
razu się pozbędziemy błędów z konsoli tak teraz
on change
można tu spokojnie przekleić do tego nowego
inputa tylko tutaj musimy zrobić item search
input content okej i pojawił się też tutaj
elegancko ten placeholder który mieliśmy wcześniej jeśli teraz wpiszę
coś w tym search input conent to w konsoli powinniśmy zobaczyć właśnie nazwę
tego input'u tak się stało jeśli coś
wpiszę teraz do tego drugiego to widzimy drugą nazwę więc możemy zrobić
to w taki sposób że set input content
przyjmie
nam obiekt w którym podam
i target name i target
value w
ten sposób wiedząc po evencie ja się nazywa
input który wypełniam mogę wybrać go po prostu z jednego
z tych dwóch elementów kluczy w obiekcie a
następnie podać nową wartość dla tych elementów a z racji że łączę stary
state z nowym state'em po prostu za pomocą spread operator'a to one się
zlepiają w jeden i nie będzie jakby tutaj żadnej
szkody jeśli chodzi o kształt tego obiektu więc spróbujmy dodać
sobie teraz jakiś nowy element mamy
błąd okej
znowu podaje obiekt dlatego że tutaj mamy input z content
a ja muszę mieć item input content
jeszcze wybrany i
teraz dodając ten element wszystko działa
jak należy więc teraz zróbmy jeszcze ostatnią rzecz czyli filtrujmy
sobie wyniki w naszej liście właśnie po tym searchu który tutaj wpisuje nie
podoba mi się tylko jedna rzecz inicjalny content
w searchu niech będzie żaden i tutaj
też niech będzie żaden ponieważ to powinny robić placeholder'y
a nie value więc teraz tutaj jeszcze
dodam sobie placeholder search item a
tutaj dodamy create new item pięknie
i teraz jak coś zacznę wpisywać to w końcu jest tak jak należy więc ostatnia
rzecz na podstawie item input content
przepraszam na podstawie search input content będziemy sobie filtrować
to co widzimy tutaj i na szczęście dzięki temu że my sobie chainować
nasze array methods możemy zrobić po prostu coś takiego że
przed map'em zrobimy sobie filter i
zrobimy to w taki sposób że każdy item jeśli item
includes inputs
content search input content czyli
jeśli w treści o jakiś błąd zaraz się tym zajmiemy jeśli w treści
naszego itemu a
właśnie item content teraz powinno działać jeśli
w treści naszego itemu znajduje się coś co zawiera
również search input content to wtedy pójdzie
to dalej do mapa i zostanie wyświetlone jeśli tego nie ma to po prostu to nie przejdzie przez
ten filter i nie zostanie wyświetlone więc teraz jeśli sobie dodamy
tutaj na przykład kup pomidory zrób
pranie zjedz śniadanie
umyj okna a
my chcemy tylko sprawdzić czy na pewno chcemy umyć okna to
po prostu jak piszemy okn to nam się to wyświetli jeśli
nie chcemy żeby elementy które filtrujemy były case-sensitive
to możemy zrobić jeszcze coś takiego że item content to
lowercase search input content to
lowercase wtedy wiemy o jeszcze inna
rzecz to jest
to jest metoda romanie zawsze o tym zapominasz więc
jeszcze raz umyj okna teraz
jak wpiszę umyj okna to jakby nie ma to wpływu na to czy mamy
duże czy małe litery po prostu nam się to wyszukuje i to tyle jak
widzisz ten komponent zrobił nam się dość zaawansowany ale
myślę że to fajnie pokazuje jak możemy wykorzystywać use state i też pokazałem
ci jak możemy wykorzystać use reducer który jest takim właśnie taką alternatywą
bardziej skomplikowaną alternatywą dla use state w momencie kiedy właśnie robi
nam się tutaj trochę więcej tych elementów które chcemy obsługiwać ale jak widzisz moją
listę nadal zostawiłem na osobnym use state bo po prostu tak było
dla mnie wygodniej nie chciałem tego wrzucać tutaj myślę że też można by było to tak rozwiązać
zachęcam cię do pobawienia się jeszcze z tym komponentem jest tutaj rzeczy które można
sobie urozmaicić natomiast to tyle jeśli chodzi o use state a w następnej
lekcji pokażę ci kolejne