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 cię serdecznie w pierwszej lekcji kursu magia
reacta kursu zaawansowanego poświęconego właśnie reactowi
w którym pokażę ci bardziej zaawansowane kwestie związane
z tym frameworkiem czy też niektórzy jak to nazywają biblioteką ja wolę
nazywać to frameworkiem ponieważ jest to naprawdę potężne narzędzie które w połączeniu z całym ekosystemem
tworzy niesamowitą technologię dzięki której możemy tworzyć naprawdę
świetne aplikacje i chciałbym ci to właśnie umożliwić żeby
od następnego razu kiedy zabierzesz się za reacta wszystko szło ci jak po maśle tylko
dlatego że poznasz dużo bardziej zaawansowane metody niż pokazywałem
w pierwszym czy w drugim moim kursie tutaj na eduweb pokażę ci wzorce
pokażę ci dobre praktyki pokażę ci kwestie związane z testowaniem oprogramowania
ale także z deployment'em tym wszystkim i zajmiemy się właśnie tutaj właśnie
teraz i zanim do tego wszystkiego przejdziemy chciałbym wyjaśnić
dlaczego nazywam to magią reacta bo tak na prawdę jeśli
pomyślimy sobie o tym naszym oprogramowaniu które tworzymy kiedy
się uczymy zwłaszcza ja tak miałem kiedy zaczynałem programować kiedy
uczyłem się właśnie tego reacta z kursów to miałem wrażenie że ten
kod który tworzę te aplikacje które tworzę co prawda są kompletne
są pełne trochę właśnie jak ten okrąg tylko że z
drugiej strony to wszystko jest takie płaskie takie jednowymiarowe często
rzeczy które mogłyby być gdzieś tam bardziej reużywalne trochę bardziej modularne
tak naprawdę nie były ten kod często się powtarzał
to wszystko było takie no nie do końca fajne zwłaszcza kiedy porównywałem
to z takim produkcyjnym prawdziwym kodem kodem komercyjnych aplikacji
czy też dużych bibliotek open source'owych kiedy zerkałem sobie do tego jak
tam jest napisany ten react to miałem wrażenie że to jak wygląda moje kółko
to jest jak porównywać takie właśnie zwykłe czarne kółko
do zaćmienia słońca które przecież jest magiczne które jest
pełne niuansów pełne zagadek pełne magii i do tego sobie tutaj
tak właśnie porównywałem że że ten mój kod to jest coś takiego naprawdę banalnego
prostego coś pozbawionego polotu natomiast kod
tych prawdziwych programistów do których chciałem się porównywać był czymś magicznym
czymś dla mnie niezrozumiałym i mogłoby się wydawać że ci
programiści to są faktycznie tacy magicy ale jak się tak bliżej przyjrzeć
temu wszystkiemu to nie do końca ma to cokolwiek wspólnego
z magią i zacząłem się zastanawiać jak dojść
do takiego poziomu co zrobić żeby dojść do poziomu gdzie kod
który ja pisze żeby on też wydawał się w jakiś sposób magiczny żeby
był elegancki ale żeby był też czytelny bo nie mówię tutaj o takiej
magii wynikającej z tego że ten kod jest po prostu skomplikowany i
tylko jakiś czarodziej potrafi go zrozumieć bardziej chodzi o to że on jest tak elegancki tak
prosty i tak czytelny że ciężko uwierzyć w to że on
potrafi tworzyć tak niesamowite rzeczy przy tak niskim nakładzie
pracy przy tak bardzo eleganckich i prostych czytelnych
rozwiązaniach więc pierwsze co należy
zrobić żeby w ogóle dojść do takiego poziomu to po prostu zacząć się uczyć i
nauka tutaj rozumiana przez bardzo wiele rzeczy z jednej strony są kursy
takie jak na przykład ten kurs mam nadzieję że on ci naprawdę pomoże w tym żeby
dojść do bardzo dobrego poziomu pisania aplikacji w react'cie natomiast
są jeszcze książki są kanały na youtubie są artykuły na
twitterze na medium tych źródeł wiedzy jest naprawdę mnóstwo nie
należy się w ograniczać wyłącznie do dokumentacji ponieważ wiele
osób potrafi na takie bardziej zniuansowane sprawy spojrzeć z zupełnie
innej perspektywy i czasami dokumentacja potrafi wytłumaczyć coś nawet
w gorszy sposób niż ktoś na przykład w artykule czy właśnie w kursie
ale warto tutaj też zauważyć że nauka jest
tylko jedną częścią i to taką niewielką bo jak widzisz po
prawej stronie kryje się tutaj jakiś pasek który właśnie w tym momencie rozwinę
a pod nim kryje się praktyka i jak widzisz ta praktyka
stanowi większość tej osi która będzie nas prowadzić
do tego żeby nasz kod reactowy stał się po prostu dużo dużo lepszy dużo bardziej
zaawansowany nauka jest nieodzownym czynnikiem tego żebyśmy
nasze umiejętności rozwijali natomiast praktyka
to jest coś co właśnie doprowadza nas do tego wysokiego poziomu ponieważ
nie ważne ile kursów ile książek ile artykułów przeczytamy jeśli
sami nie napiszemy tych wszystkich zaawansowanych wzorców jeśli nie pojmiemy dogłębnie
jak one działają to tak naprawdę tak jakbyśmy nic nie zrobili szybko
zapomnimy to o czym przeczytaliśmy usłyszeliśmy jeśli nie wdrożymy
tego w praktyce w naszych własnych aplikacjach więc w tym
kursie zastosuję trochę inną technikę i na pewno nie
będziemy tworzyć całej dużej aplikacji tak jak miało to w przypadku kursu react w praktyce
gdzie koncentrowaliśmy się na czymś innym bo tam koncentrowałem się
bardziej na tym jak stworzyć produkt cyfrowy od początku do końca jak
wdrażać layout'y ale też logikę tej aplikacji jak łączyć to z backend'em natomiast
tutaj skupię się bardziej na takich przykładach z
życia wziętych natomiast nie będziemy tego wszystkiego ubierać w jedną dużą aplikację
bardziej będziemy skakać sobie tak po przykładach i na przykładzie
właśnie różnych sytuacji które możemy zastać
w niektórych aplikacjach będziemy sobie rozwiązywać te problemy za pomocą właśnie tych
bardziej zaawansowanych narzędzi o których już za chwilkę ci opowiem ale zachęcam
cię do tego żeby każdy przykład o którym mówię tutaj o którym będę mówił w tym kursie
żeby przenieść go do własnej aplikacji a może po prostu odpalić
sobie code sandbox albo mały projekt w react'cie na własnym komputerze i spróbować
zakodzić coś właśnie na podstawie tych przykładów
o których ja mówię tutaj w tym kursie ale wróćmy jeszcze na chwilę do tej nauki i odpowiedzmy
sobie na pytanie co tak naprawdę warto wiedzieć czego warto się nauczyć z
tych takich zaawansowanych kwestii związanych z react'em żeby faktycznie pisanie
tych aplikacji było dla nas łatwiejsze ale też żeby nasz kod stawał się po
prostu jeszcze lepszy i pierwszą taką rzeczą
na pewno jest znajomość zaawansowanych wzorców bo react
jest bardzo elastyczną technologią i pozwala na stworzenie naprawdę
bardzo ciekawych rozwiązań zresztą sama społeczność często wychodzi z pewnymi
rozwiązaniami które po prostu później gdzieś tam wchodzą w życie i ludzie zaczynają ich
używać na porządku dziennym w swoich projektach dlatego znajomość
zaawansowanych wzorców takich jak compound components i higher order components
render props czy na przykład hooks'y to jest coś co na prawdę
warto znać kolejną rzeczą jest znajomość dobrych praktyk o
których tutaj trochę opowiem w tym kursie to będzie część bardziej taka teoretyczna niemniej
nie zabraknie tam kodu i właśnie w tej części poświęcimy uwagi
temu jak tworzyć naszą aplikację od takiej strony bardziej koncepcyjnej
jak podchodzić do pewnych problemów żeby ona nie stawały się problemami tylko zwykłymi
rozwiązaniami i dzięki temu żeby nasze aplikacje były bardziej wydajne bardziej stabilne
i przede wszystkim bardziej czytelne w tym kursie nie zabraknie też testowanie
własnego kodu opowiadałem o tym troszkę w poprzednim kursie zapowiadałem że w
tym kursie poświęcę temu więcej uwagi i tak faktycznie będzie pojawi
się cały blok związany właśnie z testowaniem kodu w react'cie
i opowiem zarówno testach integracyjnych jak i jednostkowych
opowiem o koncepcjach związanych właśnie z testowaniem oprogramowania
które pozwolą nieco szerzej spojrzeć na cały ten problem i dobrać
odpowiednie narzędzia do odpowiednich problemów które gdzieś tam w kodzie nam się pojawiają
i ostatnim takim punktem o którym chciałbym tutaj w tym kursie powiedzieć
jest znajomość zaawansowanych narzędzi i tutaj głównie skupimy
się na deployment'cie ponieważ chciałbym pokazać ci netlify który
pokazywałem już na przykład w pierwszym kursie to jest tylko jedno z rozwiązań ale
jeśli chcemy stworzyć coś bardziej zaawansowanego może chcemy stworzyć różne środowiska
może chcemy stworzyć na przykład staging i deployment no to
wtedy musimy posłużyć się nieco innymi rozwiązaniami takimi jak na przykład
circle ci albo poznane ostatnio przeze mnie buddy więc
ta część dotycząca zaawansowanych narzędzi faktycznie będzie związana bardziej
z tym jak jako deweloperzy możemy sobie nieco ułatwić życie jeśli
nie mamy pod ręką devopsa który to zaraz zrobi jak możemy sobie
te środowiska z potworzyć jak deploy'ować nasze aplikacje
tak żeby było to bardziej zautomatyzowane bardziej inteligentne od takiego
zwykłego wrzucania plików na ftp które jeszcze kilka lat temu może
dobrym pomysłem w obecnych czasach kiedy mamy naprawdę szereg
świetnych narzędzi do wyboru już chyba nim nie jest ale
zanim przejdziemy do tych trzech ostatnich punktów to chciałbym
się jeszcze skupić na tych zaawansowanych wzorcach i właśnie jeszcze raz podkreślić ponieważ
to będzie ten pierwszy dział tego kursu na którym się zatrzymamy
na dłużej na którym opowiem ci jakie te zaawansowane wzorce
w react'cie mamy i dlaczego warto z nich korzystać jakie mają wady jakie mają zalety
jakie problemy rozwiązują pierwszym z nich będzie higher order components
które możesz znać z poprzedniego kursu tam delikatnie dotknęliśmy
powierzchni tego o czym są higher order components i jakie problemy rozwiązują wtedy
akurat oplataliśmy sobie komponenty w taki komponent
który nazywał się width context i który zapewniał nam dostęp do
kontekstu z każdego miejsca w naszej aplikacji natomiast tych rozwiązań związanych
z higher order components jest dużo więcej więc tutaj trochę opowiem
też jak one działają jak możemy je tworzyć i w jakich
sytuacjach mogą nam one pomóc następnie opowiem nieco o render
props jest to powiedzmy takie rozwiązanie konkurencyjne dla higher order
components często są ze sobą porównywane więc i ja porównam i
ja powiem jakie są między nimi różnice kiedy które stosować czy można je
stosować na raz to wszystko właśnie w tym dziale
ci wyjaśnię opowiem też o compound components czyli takich komponentach
złożonych oraz te hooks'y i w czym one mogą ci pomóc podczas
tworzenia twojej aplikacji więc to wszystko jeśli chodzi
o wstęp lecimy