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ść jesteśmy już po części w której wyjaśniłem ci
jak działają render propsy i jak je zagnieżdżać jak je tworzyć a teraz przyszła
kolej na to żeby w końcu stworzyć coś co w praktyce moglibyśmy
wykorzystać w jakimś bardziej zaawansowanym projekcie i zdecydowałem się tutaj na stworzenie
formularza w którym dodatkowo wykorzystamy sobie downshift czyli bibliotekę
o której już mówiłem biblioteka ta pozwala nam właśnie przy pomocy render propsów
dodawać pewne rzeczy do naszych pól do naszych formów
które po prostu pozwalają nam na dodawanie interaktywności
nawigację i tak dalej i uprzedzam że specjalnie
nie przygotowywałem się do tej lekcji to znaczy że tutaj naprawdę wiele rzeczy może
pójść nie tak i chciałem cię o tym uprzedzić nie jestem przygotowany dlatego
że chcę ci pokazać jak w praktyce wygląda development takich rzeczy jak
zachowałbym się w momencie kiedy dzisiaj dostałbym na przykład task w pracy
gdzie miałbym tego typu formularz do napisania nie jest to coś
co deweloperzy znają na pamięć no chyba że ktoś codziennie pisze formularze i zazwyczaj
po prostu udajemy się do dokumentacji jednej i drugiej bo tutaj i zarówno
bulma jaki downshift będą mi potrzebne i na
podstawie tej dokumentacji będę tworzył ten formularz więc mam nadzieję że ci się to
spodoba mam nadzieję że ci to pomoże taki realizm w tym kursie bardzo
mało kursów tego typu rzeczy przedstawia natomiast moim zdaniem to
fajnie pokazuje jak właśnie zabierać się do pewnych problemów jak rozbijać się na jakieś
takie mniejsze części więc ta lekcja może nam się nieco wydłużyć pewnie ją podzielę na
mniejsze kawałki natomiast zostając tutaj ze mną na pewno zobaczysz jak
do tego typu zadań podchodziłbym normalnie w mojej codziennej pracy
przy okazji mam nadzieję że na koniec tej lekcji nadal zachowasz dla mnie chociaż
resztki szacunku zacznijmy od tego jak w ogóle działa
downshift bo jeśli korzystałeś lub korzystałaś z takich narzędzi jak
na przykład react select z tego co pamiętam to
jest to raczej biblioteka która bardzo wyraźnie
zaznacza to jak ma wyglądać dany komponent i można go ewentualnie lekko
stylować coś tam ponadpisywać wpisywać jakieś style ale generalnie no
narzuca nam sposób w jaki ma to wyglądać i zazwyczaj tego
typu rzeczy są dość problematyczne bo niektóre style ciężko jest
nadpisać i jeśli musimy coś zrobić bardzo szybko to wtedy spoko to
react select jest na pewno fajną opcję bo jest po prostu łatwy w użyciu
natomiast downshift reprezentuje trochę inne założenia i tutaj jakby
mamy takie ui agnostic czyli downshift w żaden sposób nie ingeruje w
jaki sposób mają wyglądać nasze komponenty totalnie go to nie interesuje on
nam tylko dostarcza pewne rzeczy które my możemy sobie wykorzystać i które
możemy właśnie przypiąć do naszych pól żeby nam się łatwiej to wszystko po
prostu układało w całość i tutaj jeszcze taka jedna drobna uwaga bo
ja ciągle tak mówiłem że downshift jest do inputów do form'ów ale
tak naprawdę on się specjalizuje w takiej bardzo wąskiej dziedzinie związanej
z formami a właściwie najbardziej takiej ciężkiej z tego jak
ja wspominam tworzenie tego typu komponentów to zawsze było trochę pod górkę czyli
autocomplete dropdown select i combobox my teraz stworzymy
sobie właśnie takiego autocomplete and drop down'em to znaczy że będziemy mieć
po prostu kilka opcji na liście ale możemy też sobie wpisać w inpucie jakieś
tam rzeczy na tej podstawie będzie nam się wyświetlały
jakieś opcje na przykład ten orange wpiszemy i tutaj pod spodem będziemy mieć do
wyboru właśnie z listy tego typu opcje więc skorzystamy sobie z
bulmy oczywiście przejdziemy sobie do jakiegoś widoku na
przykład do tips który chyba jeszcze nic nie ma w sobie to może do
pattern już raz go wykorzystywaliśmy więc jeszcze raz sobie tutaj zrobimy
kilka rzeczy skopiuję sobie na razie tylko ten input oczywiście
trzeba go domknąć bo to jsx i teraz chcę
zrobić to w taki sposób że na dole będę miał jeszcze opcje do wyboru więc
może teraz sobie stworzę po prostu te opcję skopiuję
sobie to tutaj z dokumentacji
zmapuję sobie wszystkie opcje na razie okej
i teraz stworzymy sobie tutaj dropdown właśnie przy wykorzystaniu elementów z
bulmy więc mamy tutaj komponent dropdown i
myślę że te klasy musi dostać tutaj ten
zewnętrzny wrapper i
is active pewnie pozwala na to żebyśmy widzieli w ogóle
ten nasz dropdown pamiętaj o tym żeby tutaj zawsze dawać class name
mimo że w bulmie zawsze jest class i teraz
ten input sobie zostawimy ale to co mamy tutaj poniżej widzę że musi
być divem z tego co rozumiem więc wpiszemy sobie div
i nam chodzi o dropdown menu class
name drop down menu poniżej
mamy dropdown content więc stworzymy sobie
jeszcze jednego diva niestety te biblioteki do ui
często właśnie wymuszają na nas trochę mniej intuicyjną strukturę
html'a czy to jsx'a w naszym przypadku ale no pozwalają nam
za to stylować to wszystko dużo szybciej tutaj nie będzie li tylko będzie button
w naszym przypadku bo nie chcemy mieć linków i
będzie to się nazywało dropdown
item dodatkowo tutaj musimy jeszcze dodać key który będzie miał value
ponieważ mamy unikalne nazwy więc value może być tutaj spokojnie kluczem
spójrzmy jak to wygląda w tej chwili okej
jest fatalnie ale to nic bo jeszcze jak dodamy sobie tutaj klasę button
i jeśli nie chce mieć tych ramek to
dodam is white okej teraz nasz dropdown wygląda spoko teraz
musimy dodać właśnie te logikę związaną z tym żeby to się pokazywało wtedy
kiedy zaczynamy coś wpisywać i możemy sobie wtedy to zaznaczyć więc najgorsze przed
nami ale na szczęście mamy już dropdown więc dodawaniem tej logiki
związanej z downshiftem zajmiemy się już w następnej lekcji