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ść powoli zbliżamy się do końca kursu i przygotowałem
takie kilka rad dla ciebie które możesz wykorzystać w czasie
właśnie developmentu nie są to rady jakieś spektakularnie
obszerne dlatego stwierdziłem że w tym ostatnim dziale w tym kursie
wrzucę je do takiego luźnego worka po prostu taka
garść porad ode mnie żeby ułatwić ci życie w przyszłości to
są takie rzeczy na które warto zwracać uwagę rozwijając aplikacje reactowe i
myślę że tego typu porady przydadzą ci się w przyszłości rozwinąłem
tutaj trochę ten komponent który mieliśmy w poprzednim dziale związanym z testowaniem
wygląda on teraz tak nie różni się jakoś diametralnie to ładowanie
użytkowników nadal działa w ten sam sposób link do tego api się nie zmienił tutaj nic
więcej zaciągane nie jest natomiast istnieje kilka takich rzeczy które wydaje
mi się że można by było zrobić lepiej i taką pierwszą rzeczą którą myślę
że można tutaj zrobić to zweryfikowanie jakie funkcje pojawiają się tutaj
w komponencie generalnie wszystko co ponad returnem warto
zawsze poddać takiej weryfikacji czy to na pewno powinno być w tym miejscu czy nie powinniśmy
tego przenieść i mamy tutaj na przykład funkcję która tworzy nam placeholder image
bardzo prosta funkcja zwraca na po prostu stringa z odpowiednimi wymiarami ale
generalnie te przykłady które tutaj ci pokażę nie będą super skomplikowane
bo nie o to chodzi że to jest kurs zaawansowany więc wszystko musi mieć po prostu 500
linijek tutaj chodzi o zrozumienie pewnych fundamentalnych zasad rządzących tworzeniem
aplikacji i to czy później twój kod będzie miał 1000 linijek 500 czy 20
nie ma żadnego znaczenia i ta funkcja reprezentuje taki rodzaj funkcji
które często nazywamy utilsami albo helperami i właśnie tego
typu funkcje często warto po prostu wyeksportować z
jakiegoś innego pliku na przykład mamy już tutaj coś takiego jak test
utils z poprzednich lekcji gdzie renderowaliśmy sobie coś z routerem
i teraz podobnie możemy stworzyć sobie na przykład helper
helpers js
w której po prostu wyeksportujemy te funkcje i
zaimportujemy ją w tym miejscu tylko sobie skopiuję nazwę i
zauważ że nasz kod działa tak samo dobrze linijka kodów
w tę i w tamtą stronę bo to co usunąłem stąd dodało
się tutaj różnica jest tylko taka że ta funkcja w tym momencie już
nie będzie tworzona przy każdym renderze nie będzie definiowana bo ona
jest definiowana już teraz innym miejscu i generalnie właśnie o to chodzi że to
miejsce warto traktować jak po prostu render z tego komponentu klasowego bo
tak naprawdę jest to funkcja render po prostu i wszystkie funkcje które tutaj
wrzucamy w postaci constów w postaci innych zwykłych funkcji wszystko
wszystko jest tworzone za każdym razem od nowa kiedy tylko włącza
się render jedynym wyjątkiem jest tutaj silnik v8 który często
optymalizuje sobie tego typu zachowania i czasami robi kilka
rzeczy gdzieś pod maską które sprawiają że tego typu rzeczy się
nie dzieją zapobiega im no ale lepiej polegać na własnym kodzie
niż na implementacji javascript w przeglądarce i myślę
że podobną funkcją jest ten fetch users to
też możemy sobie spokojnie wyeksportować zmieniając
nazwę na przykład na fetch data i
tworząc z niej bardziej uniwersalną funkcje gdzie możemy podać api gdzie
możemy podać data setter i
error setter musimy tylko
zaimportować axios'a żeby ta funkcja mogła
działać wyeksportujemy ją i teraz tak api
podmieni nam to route api ponieważ będzie podawane przez rodzica moglibyśmy
też zaimportować bezpośrednio api tutaj do tego pliku i wtedy nie podawać tego
parametru w funkcji ale robię to w ten sposób bo na przykład możemy
nie wiem z różnych api pobierać jakieś dane więc ta funkcja będzie
taka super uniwersalna ja nie mówię że to jest najlepsza implementacja bardziej skupiamy
się teraz na tym żeby wyciągnąć te funkcje z naszego
komponentu data setter to będzie po prostu ta funkcja która
odpowiada za ustawienie data w naszym komponencie ona się może
nazywać różnie ponieważ różne data możemy ustawiać natomiast to będzie
zawsze ta funkcja a error setter to będzie funkcja która będzie nam ustawiać
error i tym się też za chwilkę zajmiemy to będzie coś o czym chcę zaraz
powiedzieć tutaj musimy sobie pobrać jeszcze fetch users i
teraz podajemy tutaj root api set users data
i jako ostatni możemy dać null'a albo
możemy ustawić że ta funkcja jeśli jej nie ma jest
po prostu null'em żeby żeby
nie sypał nam błędem że nie podaliśmy tego argumentu jakiś
błąd nie wyeksportowałem tej funkcji a bo
ona się nie nazywa już teraz też jest tylko fetch users tylko fetch data i
nasza funkcja działa znowu poprawnie zauważ o
ile zaoszczędziliśmy sobie miejsce w naszym komponencie wyciągając
te funkcje do innego pliku okej to w tej lekcji
na tyle jeszcze taka uwaga ostatnia taka rada w tej lekcji
żeby preferować komponenty funkcyjne już
to wiele razy powtarzałem w tym kursie i generalnie w moich kursach ale
warto to podkreślać nie mówię o tym że jeśli ktoś ma jakąś
starszą aplikację gdzie jest dużo klas to trzeba to wszystko przepisać natomiast jeśli rozwijamy
nowe aplikacje to warto już stosować to api gdzie mamy hooki właśnie mamy
komponenty funkcyjne jest to czystsze szybsze i też łatwiejsze
w utrzymaniu jeśli chodzi o kod bo te funkcje po prostu są bardziej estetyczne
bardziej czytelne w następnej lekcji opowiem ci co nieco o single responsibility principle