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 chciałbym pokazać podstawy tego czym
jest bulma jak działa bulma jak możemy z niej korzystać w naszej aplikacji react'owej po
to żeby później wygodniej i szybciej poruszać się po jej ekosystemie kiedy
będziemy stylować nasze komponenty więc pierwszy krok mamy już za
sobą zainstalowaliśmy bulmę zainstalowaliśmy też node sass który
pozwoli nam na zaimportowanie w łatwy sposób bulmy do naszego projektu jedyne
co musimy zrobić to w naszym pliku index js zaimportować bulmę
w ten sposób bulma domyślnie
eksportuje moduł scss co sprawia że taki
właśnie import importuje tego scss'a do naszego projektu i nie musimy
się w ogóle tym przejmować żeby tutaj później coś po tym imporcie pisać albo żeby
dodawać tę bibliotekę tutaj w naszym jsx generalnie taki
import bulmy jest równy temu jakbyśmy zaimportowali i sobie z naszego
folderu index css jeśli taki plik by istniał
akurat tutaj istnieje mamy tutaj go w tym miejscu możemy w sumie przejść
sobie do tego css'a sprawdzić co my tutaj mamy tak
naprawdę wszystkie te style możemy wywalić jedyne co możemy tutaj dodać
to takie style globalne związane z naszym box-model w
ten sposób nasz layout będzie zachowywał się nieco bardziej przewidywalnie skoro mamy
już bulmę dodaną to teraz możemy sobie napisać jakiś komponent i sprawdzić jak ona właściwie
działa przejdźmy sobie do naszego app możemy tutaj
wywalić praktycznie wszystko zostawimy
sobie tylko class name app i wewnątrz tego diva
stworzymy sobie na przykład h1 na razie z hello world
żeby cokolwiek tam się wyświetlało sprawdźmy
czy nic nie zepsułem mamy nasze hello world i
teraz jeśli przejdziemy do dokumentacji bulmy to zobaczymy że mamy tutaj coś
takiego jak elementy i komponenty na razie wejdziemy sobie do
naszych elementów i zobaczymy że mam tutaj takie
coś jak box jak button jak table jak
title więc może najpierw zrobimy sobie jakiś ładny tytuł
jedyne co musimy zrobić żeby nasz tytuł wyglądał
tak jak w bulmie to musimy dodać naszemu h1 klasę
title teraz
jeśli to zapiszę to nasz element zaczyna
wyglądać dokładnie tak jak tutaj dodatkowo w bulmie mamy tak zwane modyfikatory
tak jak na przykład is 1 is 2 is 3
i tak dalej i tutaj chodzi o rozmiary więc jest to dodatkowa klasa
jeśli chcemy żeby to był naprawdę duży tytuł to możemy zrobić is 1 albo is 2
zróbmy na razie is 1 czy też is one nie
wiem czemu mówię po polsku i po angielsku naraz ale
przejdźmy może do jakiegoś bardziej skomplikowanego elementu powiedzmy
że chcemy stworzyć sobie button na
razie ten button nie wygląda inaczej niż taki zwykły html'owy
button natomiast jeśli zaraz dodam mu klasę button to
dostaniemy od niego paddingu zrobił się taki nieco bardziej przyjemny a
dodatkowo możemy jeszcze sprawić żeby był na przykład kolorowy wykorzystując
jeden z tych kolorów które mamy tutaj podane a
dodatkowo możemy sprawić żeby był duży i jak
widzisz nasz button faktycznie zmienił się na wielki i jest
kolorowy oczywiście tych modyfikatorów tutaj jest dużo więcej możemy jeszcze
sprawić na przykład żeby był okrągły
a jeśli chcemy to możemy teraz to wszystko zamknąć sobie w takie
małe pudełko w taki mały box po
prostu tworząc diva o klasie box i jak
widzisz ten box faktycznie się tutaj pojawił jeśli teraz wejdę do
app css właściwie to app css mogę
usunąć i stworzyć tutaj app module
scss stworzymy
sobie tutaj grida
i zaimportujemy teraz te style
tu jak widzisz nasz box faktycznie wskoczył w pierwszą kolumnę naszego grida
jeśli sobie teraz to skopiujemy na 4 to
zobaczymy że faktycznie ten grid się pojawił tak
więc jak widzisz bulma w bardzo prosty sposób pozwala nam tworzyć takie podstawowe komponenty
które nam tutaj udostępnia jeśli
wejdziemy sobie do komponentów to tutaj są już takie trochę bardziej skomplikowane
elementy naszego interfejsu na przykład odpalmy sobie kartę
i to co jest fajne w bulmie to że ona po
prostu pokazuje nam z jakich elementów taka karta może się składać jeśli
skopiujemy sobie teraz cały ten kod w tym miejscu tylko
musimy zamienić każdą klasę ze znakiem równa się na class
name i
dodatkowo musimy jeszcze pozamykać niektóre tagi niestety
to było pisane w htmlu gdzie takie rzeczy mogą mieć miejsce natomiast
w jsx jest to niedopuszczalne gdzie jeszcze mamy
img okej
i faktycznie po skopiowaniu tego kodu mamy
taką kartę i to nieco podobną do tego co robiliśmy w poprzednim kursie
gdzie zajęło nam to naprawdę kilka lekcji a tutaj zrobiliśmy to jakieś 20
sekund więc wszystko wygląda jak należy więc
jak widzisz korzystanie z bulmy jest naprawdę bardzo proste tutaj takim
powiedzmy że udogodnieniem jest to że widzimy która klasa należy
do bulmy my podpisujemy ją po prostu w naszym jsx a która klasa jest
customowa i wpisujemy ją sami po prostu dodając nasze
css modules w tym miejscu może
się jednak zdarzyć tak że chcemy wykorzystać klasę z bulmy
a dodatkowo jakąś customową klasę którą wpisaliśmy sobie w naszym css module
i wtedy moglibyśmy to zrobić na przykład w taki sposób że
tworzymy sobie tutaj tablice na końcu której wykorzystujemy metodę join
i wtedy to faktycznie będzie działać natomiast teoretycznie w
tego typu przypadkach zawsze korzysta się z takiej bardzo małej ale bardzo fajnej
biblioteczki która nazywa się class names i teraz ją dodamy importują
się zazwyczaj jako cx i
to na co pozwala class names to to że możemy sobie dodawać nasze
klasy w taki sposób że po prostu
podajemy je do naszej funkcji w tym przypadku chcemy styles app
oraz powiedzmy coś z bulmy
powiedzmy niech to będzie box i teraz jak widzisz nasze
app faktycznie dostało taką dodatkową ramkę ponieważ połączyliśmy
dwie klasy ze sobą app i box jeśli odpalimy sobie nasze devtools
to
zobaczysz że mamy tutaj css module stworzony
czyli ta nasza klasa z dodatkowym id które dodawane jest właśnie przez jest przez css modules
i dodatkowo klasa box która odpowiada za tę ramkę naokoło więc biblioteka
class names pozwala nam w bardzo prosty i bardzo czytelny sposób łączyć ze
sobą pewne klasy a dodatkowo pozwala nam na jakieś
takie bardziej skomplikowane rzeczy związane z warunkowaniem tego jaką klasę komponent
ma dostać ale to na pewno pojawi się gdzieś w dalszej części tego kursu więc dzięki
wielkie za obejrzenie tej lekcji i widzimy się już w następnym rozdziale gdzie zaczynamy rozmawiać
o bardziej zaawansowanych wzorcach projektowych w react'cie