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ść witaj kolejnej lekcji kontynuujemy nasze tworzenie komponentów
jak widzisz w międzyczasie zmieniło się dość sporo ponieważ dodałem tutaj navbar
między którym w którym możemy sobie nawigować między poszczególnymi
stronami będzie nam to potrzebne żeby trochę oddzielić niektóre komponenty
od siebie żeby pokazać że pewne potrzeby wykorzystywania
niektórych wzorców patternów właśnie mogą się znajdować
pomiędzy różnymi stronami tak że na przykład tutaj mamy jeden komponent drugi
będzie na innej stronie i on będzie korzystał z części logiki która jest
tutaj no i właśnie jak to wszystko zrobić więc teraz załóżmy że stworzymy
sobie jakiś inny komplement na przykład w tipsach który będzie
podobnie działał jak nasze item list że będziemy chcieli coś
po prostu domykać ale żeby nie było to
identyczne z naszą listą którą przecież moglibyśmy skopiować po prostu ewentualnie coś
tam dostosować za pomocą klas to stworzymy sobie coś co jest podobne ale
jednak działa nieco inaczej ponieważ ma inną strukturę też czyli skopiujemy sobie taki
rządek kolumn po prostu które wkleimy teraz do jakiegoś
komponentu nazwijmy
ten komponent na przykład columns i
teraz zaimportujemy go sobie w naszej stronie tips
okej mamy nasze kolumny
tylko coś tam się nie skopiowały style
trzeba zawsze pamiętać o
tym jak się kopiuje coś z bulmy żeby tutaj było to class name łatwo
o tym zapomnieć jak się kopiuje właśnie kod
dobra mamy nasze kolumny i teraz chcielibyśmy jeszcze dodać tutaj właśnie
style które będą odpowiadały za to że one będą nam się zwijały do lewej strony
dobra możemy sobie stworzyłem tutaj button który będzie odpowiadał właśnie za to zamykanie
i jeszcze możemy sobie teraz skopiować właściwie te style stąd
one będą tylko troszeczkę inne bo będą szerokości a nie wysokości
teraz tutaj zrobimy sobie max width okej
teraz naszym wrapperem dla tych notyfikacji dla tych tutaj
poszczególnych elementów jest tutaj ten div więc
zaimportujemy sobie jeszcze cx from
class names i dodamy teraz odpowiednią
klasę możemy też skopiować tą logikę
bezpośrednio z tego komponentu skoro już mamy to gotowe i
zaraz pojawi nam się właśnie problem który będziemy musieli rozwiązać czyli
nie mamy state'u w naszych kolumnach a chcielibyśmy korzystać z tej logiki którą
mamy w items list więc teraz teoretycznie normalnie musielibyśmy tutaj
stworzyć po prostu nowy state w tym komponencie i jakoś
sobie radzić po prostu kopiując część tej logiki właściwie byłby to jeden do jeden
komponent a nie możemy z niego korzystać ponieważ
wygląda on nieco inaczej i właściwie to co je łączy to tylko ta logika związana
z zapadaniem się elementów właściwie mogłoby to być cokolwiek
to mogłoby być toggle'owanie czyli włączanie czegoś i wyłączanie
tutaj akurat wybrałem taki wizualny bardzo aspekt czyli zapadanie się właśnie tych elementów
po to żeby podkreślić że niby są to podobne operacje ale
jednak dotyczą komponentów które wyglądają zgoła inaczej
więc teraz tutaj co co możemy zrobić to
na przykład dodać false tak tymczasowo tutaj
zamiast listy wpiszemy po prostu columns
ponieważ jest to klasa tutaj z tego diva i
teraz w class name w tym miejscu podam po prostu list class i nie jest to list
tylko jest to bardziej nie wiem jak
to nazwać row class powiedzmy dobra
teraz jak zmienię tutaj na true to faktycznie się zapadły czyli ta
klasa działa i teraz co mogę zrobić żeby współdzielić
tę logikę między jednym a drugim komponentem mógłbym stworzyć
jakiś taki komponent rodzic który po prostu by miał
te komponenty w sobie przekazywał by propsy no jest jakaś myśl
ale właśnie na takie potrzeby powstało coś takiego co się nazywa higher
order components i za chwilkę właśnie pokażę ci jak to zrobimy ale
to już następnej lekcji