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ść witam w kolejnej lekcji zanim przejdziemy do faktycznego programowania
zanim przejdziemy do react'a to chciałbym tutaj pokrótce opowiedzieć o środowisku
w którym będziemy się poruszać w tym kursie oczywiście jeśli pracujesz na innym środowisku
to nie ma żadnego problemu prawdopodobnie da się to tak skonfigurować
żebyśmy mieli bardzo podobne zachowania w naszym
edytorze kodu w naszej konsoli i tak dalej ja pracuję na macu
więc jest to system unixowy w którym mam konsole
zsh możesz mieć również bash'a tutaj zbyt wielkich różnic
nie ma zsh jest o tyle dla mnie wygodniejsze że posiada
na przykład autouzupełnianie które pozwala mi łatwiej poruszać się po folderach i
tak dalej natomiast tym za bardzo nie będziemy się przejmować to
co jest niezwykle istotne jeśli chodzi o terminal to oczywiście node którym
będziemy się posługiwać ponieważ jest on niezbędny do stworzenia projektu react'owego
i w moim przypadku korzystam z wersji 10.15.1
node'a jeśli do tej pory kiedy oglądasz ten kurs wyszła
jakaś nowsza prawdopodobnie możesz jej użyć i nie będziemy mieć żadnych różnic między
tym co widzisz na swoim ekranie a co ja widzę na swoim natomiast chciałem
tylko poinformować że ja korzystam z takiej wersji żeby w razie czego wiedzieć
od czego zacząć debugowanie w razie gdyby coś pojawiło się niepokojącego
ponadto będę korzystał tutaj z npm i
mam wersję 6.7.0 jeśli wolisz możesz korzystać
też z yarn'a w momencie kiedy ja nagrywam yarn ma wersję 1.15.2
natomiast ja wybrałem że będę korzystał z npm z tego względu że
w poprzednim kursie też z niego korzystałem więc już chciałbym pozostać konsekwentnym
i nie zmieniać tutaj tego package menadżera tylko po to żeby pokazać jak działa
ten drugi zwłaszcza że te różnice między npm a yarn'em nie są jakoś
bardzo drastyczne dodatkowo podobnie jak w poprzednim kursie
będę posługiwał się biblioteką create-react-app dzięki
której mogę stworzyć bardzo szybko projekt react'owy nie będziemy tutaj tworzyć
jakiś bardzo zaawansowanych customowych konfiguracji to robiliśmy już w poprzednim
kursie i jak pewnie pamiętasz ta konfiguracja przy
użyciu właśnie create-react-app była bezproblemowa była prosta
i dało się tam zrobić większość rzeczy które chcieliśmy osiągnąć w
tym kursie nie pokażę ci jak się eject'uje create-react-app uważam
że jest to rzecz która jest totalnie zbędna i bardzo rzadko
dochodzi do sytuacji kiedy nawet w takich dużych komercyjnych projektach trzeba
eject'ować create-react-app więc jeśli dojdziesz do tego punktu to
wydaje mi się że tego typu umiejętność wykracza już znacząco poza
to co chciałbym tutaj pokazać bardziej skupiamy się tutaj na
architekturze samej aplikacji na konstruowaniu bardziej zaawansowanych wzorców
a nie na samej konfiguracji react'a ale dla przypomnienia chciałbym
ten krok zrobić razem z tobą więc teraz stworzymy sobie nowy
projekt w react'cie który będzie nam służył za taki nam taki poligon do tworzenia
właśnie tych bardziej zaawansowanych rzeczy gdzieś tam później w kursie więc
żeby stworzyć nowy projekt react'a wykorzystując najnowszą
wersję create-react-app najłatwiej jest po prostu wykorzystać npx który
jak pamiętasz wykorzystuje paczki które mamy w npm ale
nie zainstalowane lokalnie tylko akurat w tym przypadku pobierze ją świeżą
paczkę najnowszą paczkę create-react-app z internetu rozpakuje
ją lokalnie i dopiero ją użyję do tego żeby stworzyć nasz projekt więc
teraz jeśli wpiszę create-react-app i w moim przypadku chcę wpisać 01
ponieważ tak będzie nazywał się folder w którym będzie znajdowała się ta lekcja nacisnę
enter w tym momencie npx pobierze paczkę z neta wypakuje ją lokalnie
i zaraz będę mógł używać create-react-app i właśnie
szkieletu aplikacji react'owej okej
i wszystko zostało zainstalowane jak widzisz create-react-app podpowiada nam żebyśmy
używali yarn'a natomiast ja upieram się przy moim npm dlatego teraz wejdę do
folderu 01 który utworzyłem usunę node modules
oraz usunę yarn
kropka log i zainstaluję
to wszystko jeszcze raz mógłbym też użyć flagi use npm
przy tworzeniu create-react-app natomiast dla mnie nie
wiem czemu wygodniejszy jest taki sposób żeby po prostu to jeszcze raz na świeżo
zainstalować wiem że to jest trochę na około ale możesz zrobić jak
chcesz ja akurat robię to w ten sposób i za chwilkę będę już miał aplikacje
działającą na npm a nie na yarn okej npm zainstalowany więc
teraz sprawdzimy tylko czy nasza aplikacja faktycznie działa i
wszystko poszło zgodnie z planem więc teraz jeszcze wrócę na chwilę do mojego edytora i
opowiem o jeszcze jednej rzeczy ponieważ w tym kursie
będę używał scss modules czy też css-modules ale
dodatkowo z sass-loader'em który teraz zainstaluję wejdę tylko
na chwilę do create-react-app docs
i przypomnę sobie co dokładnie trzeba zainstalować żeby używać scss
tak jak już mówiłem node sass teraz będzie nam tutaj potrzebny
więc
teraz zainstaluję node sass
w ten sposób style które są zapisane w plikach scss będą przetwarzane
przez naszego webpack'a w taki sposób żeby właśnie były kompilowane
do czy też transpilowane do css żeby były możliwe
do przeczytania przez przeglądarkę okej
i zrobiłem to dlatego że w tym kursie nie będziemy tworzyć za
dużo stylów tak jak w poprzednim kursie poświęciliśmy na to bardzo dużo czasu i
pokazałem ci jak wykorzystać styled components do tego żeby tworzyć bardziej
skomplikowane komponenty właśnie przy użyciu tej biblioteki tak tutaj potraktujemy
te style nieco po macoszemu nie będziemy tak bardzo skupiać się na wyglądzie naszych
komponentów co na ich funkcjonowaniu i na wykorzystywaniu właśnie
tych zaawansowanych wzorców związanych z react'em więc żeby
trochę ułatwić nam pracę żeby przyspieszyć te prace związane ze stylowaniem
niektórych rzeczy żebym mógł szybciej przygotowywać niektóre komponenty
i tłumaczyć ci bardziej dokładnie jak one powinny działać a niekoniecznie jak powinny one wyglądać
zainstalujemy teraz zainstalujemy
teraz bibliotekę która nazywa się bulma i
bulma jest niczym innym jak framework'iem css'owym który pozwala nam na to
żebyśmy mogli sobie stylować nieco szybciej nasze komponenty
właśnie przy pomocy class css jest to takiego
swego rodzaju konkurencja dla bootstrap'a natomiast moim
zdaniem bulma jest nieco bardziej przyjazna te nazwy klas są nieco fajniejsze i
generalnie jakoś zawsze łatwiej mi się korzystało z tej bulmy oczywiście jest to kurs zaawansowany
więc tutaj pełna dowolność dla ciebie czy wolisz wybrać bootstrap'a
czy bulmę natomiast mam nadzieję że przez to jak pokażę ci bulmę to zarażę
cię tym entuzjazmem i będziesz już używać tej biblioteki chociaż oczywiście nie ma co tutaj
wartościować każde narzędzie jest dobre o ile spełnia założenia
które sobie gdzieś tam postawiliśmy i które pomaga nam w pracy a nie przeszkadza nam i to
właśnie będzie robić bulma w tym kursie będzie nam pomagać w tym żeby szybciej pisać
komponenty zanim przejdziemy do pisania komponentów to właśnie w następnej
lekcji pokażę ci takie podstawy bulmy żeby ta składnia te
nazwy klas nie były dla ciebie zagadkowe żeby po prostu wprowadzić cię w świat
tego frameworka żeby nam się z nim po prostu prościej pracowało więc
do zobaczenia w następnej lekcji