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ść kontynuujemy dział o zaawansowanych wzorcach w react'cie
i po przejściu od higher order components przyjdziemy sobie
teraz płynnie do render propsów rzeczy która mi
osobiście sprawdziła dość sporo problemów zanim zaczęłam ją dobrze rozumieć i
mam nadzieję że sposób w jaki teraz ci to wyjaśnię pozwoli ci
to zrozumieć od razu ponieważ po tym jak z tym męczyłem mam wrażenie
że wiem dobrze jak to wszystko uprościć w taki sposób żeby
było to zrozumiałe po prostu dla każdego przykłady które można znaleźć w internecie często
bywają zbyt skomplikowane od samego początku zamiast wyjaśnić tą kwestię związaną z
render propsami od takich zupełnych podstaw to od razu wskakują na jakieś takie
dość skomplikowane rzeczy może niekoniecznie dobrze to tłumacząc
więc zanim przejdziemy sobie do render propsów pokażę
ci co możemy zrobić w ogóle z propsami i
co możemy za pomocą nich przerzucić do komponentu więc
przejdźmy sobie teraz do jakiegoś widoku gdzie nie mamy absolutnie nic w
naszym przypadku jest to patterns i narazie stworzę
komponent po prostu wewnątrz tego pliku mógłbym go stworzyć od razu w jakimś osobnym
pliku natomiast chcę pokazać ci to wszystko na razie w jednym pliku żeby było to widoczne
jak to wszystko przebiega między sobą przy okazji nie będę musiał tutaj nic importować
więc teraz stwórzmy sobie coś co na przykład nazwiemy
my component po prostu to będzie zwykły komponent funkcyjny okej
i teraz ten komponent przerzucam sobie bezpośrednio tutaj
na razie react od podstaw nic się nie wydarzyło i
teraz chcę ci pokazać coś co na początku może być dla ciebie
dość niezwykłe ale potem stanie się jeszcze bardziej niezwykłe kiedy zaczniemy
tego używać już tak wykorzystując już pełen potencjał tego rozwiązania jak
dobrze wiesz możemy przekazać propsy do naszego komponentu
i te propsy zazwyczaj działały w taki sposób że jeśli mieliśmy na przykład props nie
wiem jakieś słowo na przykład props world to mogliśmy sobie je tutaj
wstawić to mogła być liczba to mógł być boolean to mogłaby
to mógł być string ale to również może być
jsx więc jeśli teraz tutaj wstawię
sobie props kropka render to
podając propsa render do mojego komponentu i wpisując
w nim na przykład p hello roman czyli zwykły jsx
zobacz co się stało ten
jsx został wyrenderowany w tym miejscu i
teraz stąd właśnie wzięła nazwa render props że zazwyczaj
ten prop który podajemy do komponentu w tym patternie nazywa
się właśnie render ale nie ma to żadnego znaczenia to mogłoby się nazywać roman
swoją drogą fajnie jakby co roman props ale koniec dygresji
bo chcę ci pokazać jeszcze jedną super rzecz to że możemy
wrzucać tutaj jsx to jest pół biedy to jest to jest tak naprawdę kropla w morzu
bo my możemy wrzucić tutaj równie dobrze funkcję która
zwraca nam jsx i tu zaczynają się prawdziwe magiczne schody
problem jest tylko jeden daliśmy
tutaj funkcję a nasze hello roman nam zniknęło dlaczego dlatego że
z racji że tym propsem stała się funkcja to te funkcje teraz musimy
wywołać żeby ona zwróciła nam tego jsx to
jest logiczne w momencie jeśli tutaj nie wywołamy tej funkcji
to nie zostanie wywołana również ta funkcja która właśnie zwraca
nam hello roman w tych naszych tagach p dlatego właśnie stąd wziął się
ten nawias i teraz pewnie jak już się domyślasz mając do
dyspozycji funkcję którą możemy wrzucać do naszych propsów które możemy wywoływać
możemy tutaj również podawać najróżniejsze rzeczy do funkcji możemy
podobnie jak do propsu wrzucić wszystko więc w tym momencie mamy
po prostu pełną kontrolę nad tym co dzieje się z naszymi propsami możemy
tutaj wrzucić na przykład roman i w tym momencie możemy
sobie przy deklaracji tej funkcji strzałkowej tutaj wyciągnąć
parametr który tutaj podajemy więc teraz
jeśli wrzucę tutaj hello data gdzieś
mam o jeden za dużo tutaj więc
jeśli teraz mam tutaj hello data to nadal jest hello roman ponieważ tutaj jako argument do
funkcji którą deklaruje w tym miejscu podaje roman
w stringu i tutaj przynajmniej dla mnie zawsze była taka trochę odwrócona
logika w tym wszystkim oczywiście to jest wszystko logiczne i racjonalne porządek
jest zachowany natomiast dla mnie po prostu było to takie trochę odwrócone bo najpierw tworzyłem
sobie komponent provider w którym wywoływałem
funkcję do której podawałem jakiś argument a zazwyczaj jest tak że najpierw tworzymy
funkcję a później wykorzystujemy ją gdzieś i podajemy do niej argumenty a dopiero właśnie
przy wykorzystaniu tego komponentu my component tak naprawdę deklaruje
te funkcje deklaruje jej powstanie i to tutaj mówię
słuchaj tutaj przyjdzie kiedyś jakiś argument który później wykorzystasz
w tym miejscu i ten argument to jest właśnie ten roman w tym springu więc
tak wygląda w najprostszej postaci render props wydaje
mi się że nie da się tego prościej wytłumaczyć to jest po prostu funkcja którą podajemy jako propsa
i która zazwyczaj wracanam właśnie jsx'a z jakimiś
danymi wzbogacona o jakieś dane które przekazujemy do tej funkcji i na dodatek nazywa
się ona render w sensie ten props nazywa się render jeszcze to zmienię
niestety nie jest to roman props może kiedyś na razie
to jest render props i tak to właśnie wygląda więc skoro znasz już podstawy
tego jak działają render propsy skąd one się w ogóle wzięły i jak je tworzyć to
mam nadzieję że teraz wszystko jest dla ciebie jasne i możemy przejść do następnej lekcji
gdzie pokażę ci faktycznie w praktyce jak to wszystko działa i do czego możemy to wykorzystać