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 tej lekcji i stworzymy sobie nasz pierwszy higher order component
jeśli pamiętasz mój poprzedni kurs react w praktyce to tam faktycznie
już wykorzystywaliśmy jeden taki komponent który oplatał nam nasz
kontekst właśnie w inne elementy natomiast tutaj w tym kursie potraktujemy
to jako taką czystą tablice i zaczniemy od zupełnego początku a później znowu przejdziemy
do nieco bardziej zaawansowanych przykładów niż te które pokazałem w poprzednim
kursie więc pierwsze co sobie zrobimy to stworzymy sobie nowy
komponent nazwijmy go na przykład items list wewnętrz niego
zaimportujemy sobie wszystko co potrzebujemy normalnie w react'owym komponencie
okej
tutaj stworzę sobie jakąś listę w oparciu o klasy które dostarcza mi bulma
zaimportuję
sobie ten element do app żebym wiedział co robię okej
mamy nasz element okej wprowadzimy tutaj
jakieś takie prostsze lorem ipsum bez tych formatowań
tekstu wywaliłem też ten button który tutaj był i teraz właściwie
możemy sobie zrobić jeszcze coś takiego żeby ten komponent był nieco
czystszy tutaj wrzucimy sobie items do tablicy
okej pomyliłem po prostu ten tekst zrobiłem
go nieco krótszy i żeby było go trochę więcej teraz możemy sobie zmapować to
wszystko zwracając
właśnie naszą notyfikację i
wewnątrz niej nasze item okej
tak naprawdę jeśli chcemy żeby to była lista to możemy jeszcze zrobić coś takiego żeby
to się zgadzało a nad
naszą listą dodamy sobie button który będzie odpowiadał właśnie za zapadanie
się tej listy więc teraz tutaj dodamy
collapse do
naszego komponentu dodamy sobie style
które
zaraz i wykorzystamy nieco bardziej intensywnie ale teraz po prostu
zaimportujemy je tutaj dobra
i teraz musimy nasz komponent zamienić na właśnie
komponent react'owy z tego względu że
będziemy potrzebowali state'u moglibyśmy
użyć tutaj hook'a ale o hook'ach będę mówił w dalszej części tego kursu więc teraz zamieniamy
to na klasę dodamy
sobie state is collapsed
i niech to będzie false czyli będzie na początku zawsze otwarte jeszcze zrobimy
sobie toggle który będzie funkcją która
będzie właśnie nam ustawiać set state
tylko muszę zrobić this będziemy odwoływać
się do prev state czyli do tego poprzedniego stanu okej
i teraz wystarczy że po kliknięciu na nasz
button wywołany funkcje this toggle
i
na razie nie będziemy zmieniać nic w ui po prostu wylogujemy sobie tutaj
na razie mamy false jak klikniemy to jest true okej więc teraz
na szybko przejdźmy sobie do stylów dodajmy tutaj klasę is collapsed wrócimy
sobie do naszego komponentu i teraz tutaj w funkcji render zrobimy
sobie list class ponieważ musimy użyć tutaj naszego
class names do skomponowania naszych
stylów odpowiednio style
class names komponujemy w taki sposób że używamy funkcji cx
w naszym przypadku wrzucamy do środka obiekt i mówimy po kolei
która klasa jak ma się zachowywać w tym przypadku chcemy żeby klasa
is collapsed pojawiała się warunkowo w zależności od state'u więc
teraz wrzucamy sobie tutaj nasz obiekt pierwszą
klasą która zawsze będzie to będzie styles list a drugą klasą będzie styles
is collapsed która
wyświetli się jeśli this state is collapsed będzie
prawdziwe właściwie to styles list mogę wrzucić poza ten
obiekt bo tylko condition możemy wrzucić do obiektu i
teraz już powinno być git jeśli teraz wrzucimy sobie oczywiście
zawsze popełniam ten błąd w react'cie class name list class
i teraz jeśli kliknę na collapsed
to nasza lista powinna się zapaść okej coś nie działa
myślę że może być to
spowodowane tym że overflow nadal jest pokazywany
więc teraz faktycznie nasza lista znika przygotowaliśmy
sobie teraz taki komponent który właśnie zawiera całą logikę związaną z collapse'owaniem
z zapadaniem się tej listy i specjalnie chciałem ci pokazać jak
dochodziłem do tego jak zbudowałem ten komponent mimo że pewnie doskonale
wiesz jak sobie z takimi komponentami radzić natomiast bardziej chodziło mi o
to że zaraz dojedziemy do momentu w którym właśnie pojawia się ta potrzeba
wykorzystania higher order komponentu chciałem pokazać całą tę drogę a nie
tylko gotowe rozwiązanie gotowy scenariusz w którym taki
higher order components się przyda więc na rozgrzewkę napisaliśmy nasz pierwszy komponent
a teraz przechodzimy