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ść w tej lekcji chciałem ci krótko opowiedzieć o single responsibility principle czyli
zasadzie pojedynczego zadania nie wiem czy można to tak przetłumaczyć
wydaje mi się że to angielska nazwa lepiej to oddaje natomiast chodzi o to że
jak mamy komponent to musimy mu się przyjrzeć czy na pewno on
wykonuje jedno zadanie to znaczy nie zawsze to musi być jedno
zadanie ale zawsze ta liczba zadań które on
ma do wykonania powinna być jak najbardziej zminimalizowana to znaczy
że jeśli mamy jakąś możliwość wyciągnięcia jakiejś części logiki
z tego komponentu i przeniesienie do innego mniejszego fragmentu kodu to
lepiej żeby tak się stało i tutaj widzę na przykład spory potencjał w tym
żeby całą listę użytkowników wyciągnąć do
innego komponentu a ponadto wyciągnąć jeszcze do osobnego
komponentu samych użytkowników więc jeśli spojrzymy sobie na nasz folder components
to teraz w nim stworzę folder users który bezpośrednio będzie
korespondował z widokiem users i w nim stworzę dwa
komponenty users list i
user na szczęście cały nasz kod jest już napisany więc
jedyne co chcemy zrobić to wyciągnąć naszą logikę związaną
z wyświetlaniem tych użytkowników do osobnego komponentu
okej
skoro już sobie to wyciągnęliśmy to
możemy to wyeksportować a tą funkcję
na razie się nie przejmujemy ponieważ za chwilkę zrobimy jeszcze jedną
rzecz teraz zaimportujemy sobie users
list i
wrzucimy ten komponent tutaj podając
jako propsa users data i teraz spójrzmy
na ten komponent i pomyślmy czy coś jeszcze powinniśmy tutaj zrobić jeśli
spojrzymy sobie wszystko to wydaje mi się że lepiej by
było gdyby to też był jakiś pojedynczy komponent który możemy
tutaj wrzucić dlatego teraz w users stworzymy sobie
stworzymy
sobie komponent user który
będzie zwracał taki już czyściutki jsx bez żadnej
funkcji bez żadnych udziwnień i tak dalej tutaj tylko złego propsa podałem
muszę podać name i age i jedyne co
musimy zaimportować sobie tutaj to to create placeholder image które
wiemy że znajduje się w helpers okej
więc tak wygląda nasz users list tak wygląda nasz user a
tak wygląda nasz komponent który jeszcze przed chwilą miał jakieś 50 linijek kodu teraz
ma ich pewnie z 15 na oko licząc acha
nie zaimportowałem poprawnie funkcji create placeholder image ponieważ jest to named
export więc muszę go opleść w klamry i
teraz zauważ że nasza aplikacja działa dokładnie tak samo jeśli
odpalimy sobie nasze testy to
one również przechodzą i właśnie to też może być taka cenna rada że
testy które piszemy powinny być niezależny od
implementacji to znaczy że one powinny testować takie rzeczy które nawet
jeśli coś się zmieni delikatnie w kodzie ale nie będziemy zmieniać jakbym sposobu
działania tego kodu tylko właśnie będziemy tworzyć bardziej jakiś refactor to te testy
nadal będą przechodzić i w ten sposób stworzyliśmy dużo bardziej elegancki kod a
skoro jesteśmy już przy eleganckich rozwiązaniach to musimy jeszcze na chwilkę wrócić do naszego
helpers gdzie mamy taki oto blok kodu jeśli
coś się wydarzy z naszym api to użytkownik się o tym nigdy nie dowie
nie robimy nic co mogłoby spowodować że użytkownik dostanie informację
słuchaj mamy problem z serwerem coś poszło nie tak wróć do nas później
albo spróbuj jeszcze raz albo coś jeszcze na razie mamy tutaj
zakomentowane console log console log nigdy nie jest wyjściem jeśli
chodzi o informowanie użytkownika o czymkolwiek żaden użytkownik nie wejdzie sam z siebie
do konsoli nie przeczyta a okej tutaj mieli 500 na serwerze no
nie tak nie będzie i to jest kolejna rada kolejna dobra praktyka której
trzeba przestrzegać ona nie jest związana z reactem ona związana z developmentem
jako takim żeby informować użytkownika o ważnych wydarzeniach w aplikacji
a error czy też błąd jest na pewno bardzo ważnym wydarzeniem
bo uniemożliwia korzystanie z produktu bo trzeba o tym dobrze poinformować
naszego użytkownika i stąd wziąłem tutaj tę funkcję error
setter która jest niesamowicie prosta ona będzie tylko ustawiać
że mamy jakiś błąd żeby zapobiec temu żeby nie
blokowały nam się te informacje o błędach to musimy też stworzyć tutaj jakby
resetowanie tej funkcji czyli tutaj będzie dodawane false i
teraz wiemy że error setter to jest po prostu use state który
przyjmuje boolean więc teraz pójdziemy sobie do naszego users
stworzymy sobie errors i
setters gdzie
na początku będziemy mieć false i teraz w momencie gdy errors będzie
prawdziwe chcemy zwrócić tutaj informacje jedyne
co musimy zrobić żeby ta funkcja zaczęła działać to dodać ją tutaj jako
setters teraz jak przyjdziemy sobie do naszej
aplikacji tutaj wszystko działa ale spróbujmy teraz coś zepsuć
i
zauważ że po zepsuciu linka ukradłem tutaj tshttp
pojawia się błąd oczywiście
on mógłby wyglądać dużo lepiej nie o to chodzi żeby on był najpiękniejszy teraz chodzi mi tylko
o to żeby uświadomić ci że zawsze
kiedy mierzysz się z jakimś błędem aplikacji jeśli zdajesz sobie sprawę że taki błąd może
się pojawić to musisz przygotować swój kod do tego żeby on mógł poinformować użytkownika
o tym że faktycznie taki błąd wystąpił sam pamiętam kiedy byłem
jeszcze juniorem to właśnie zostawiłem po prostu w bardzo podobnej funkcji
która pobierała dane z api i senior który był wtedy moim mentorem zapytał
który użytkownik wejdzie i zobaczy w konsoli console log'a
i to był właśnie moment kiedy sobie zdałem sprawę jaki to był okropny pomysł i
nigdy więcej już tego błędu nie popełniłem więc wierzę że i ty nie popełnisz i
to tyle jeśli chodzi o garść takich dobrych praktyk które chciałem ci przekazać głównie
chciałem się skupić właśnie na obsłudze błędów na optymalizacji kodu pod
względem tego jak on wygląda jak on działa pod
względem tego jak możemy dzielić komponent jak możemy właśnie wydzielać części logiki
które pozwalają na to że nasz kod staje się dużo bardziej czytelny