React & TypeScript: Komponenty klasowe

0:00Co prawda w ostatnim czasie komponenty

0:02klasowe akcje są już coraz rzadziej wykorzystywane, natomiast nie zmienia to

0:05faktu, że zdecydowanie będziesz się z nimi spotykał.

0:08Zarówno w istniejących projektach, jak i

0:10chociażby w różnego rodzaju tutorialach czy książkach.

0:13Z tego powodu uważam, że nagranie tej lekcji jest kluczowe.

0:16Tym bardziej, że typowanie komponentów

0:17klasowych zdecydowanie różni się od typowania komponentów funkcyjnych i

0:21jednocześnie jest nieco bardziej wymagające.

0:24Zatem zobaczmy o co tutaj dokładnie chodzi.

0:26Zacznijmy od tego, że zdefiniujemy sobie dwa interfejsy.

0:29Jeden będzie opisywał nasze propsy, a drugi stan.

0:33Zarówno jeden, jak i drugi interfejs

0:35wykorzystamy przy definicji naszego komponentu.

0:38I tutaj sytuacja wygląda tak, że po

0:40zaimportowaniu samego komponentu musimy przekazać zarówno props ów jaki typ stanu

0:45do naszego komponentu wykorzystując zapis genetyczny.

0:48No i teraz jeszcze dodatkowo musimy zadbać o to, aby dodać tutaj konstruktor.

0:52Tutaj, jak wiesz również przyjmuję propsy.

0:54Natomiast jak widzisz mamy tutaj błąd i

0:56niestety musimy się powtórzyć przekazując dodatkowo propsy.

1:00Również w tym miejscu podobnie zresztą

1:02takie powtórzenie będzie miało miejsce w przypadku metod live, czyli np.

1:06komponent Dead Update.

1:08W tej sytuacji musimy tutaj odpowiednio

1:09ponownie przekazać typy procesów oraz samego stanu.

1:13Tak naprawdę trudno jest o tym zapomnieć,

1:14ponieważ jeżeli tego nie zrobimy, po prostu otrzymamy tutaj natychmiast błąd.

1:19I swoją drogą, jeżeli już pojawiają Ci się jakieś błędy w tej aspekcie, to

1:22zdecydowanie polecam Ci zacząć od tego, aby przeczytać komunikat błędu lub

1:27ewentualnie skopiować go i wyszukać z pomocą Googla.

1:30W ten sposób zwykle trafimy na wątek

1:32opisujący bardzo podobne sytuację, w której my aktualnie jesteśmy i na tej

1:36podstawie będziemy w stanie znaleźć rozwiązanie.

1:38Ostatecznie jeżeli chodzi o nasz komponent

1:40utworzymy sobie jeszcze tutaj metodę render.

1:42Tutaj ponownie wyświetlimy sobie kawałek kodu HTML, przy czym dodamy tutaj również

1:47przycisk, który będzie reagował na kliknięcia aktualizując nasz bieżący stan.

1:52Z tego powodu, jak widzisz, wykorzystujemy tutaj funkcję set state i w momencie gdy

1:56mamy dodane odpowiednie typy procesów oraz stanu no to jak widzisz tak naprawdę nie

2:01ma tutaj śladu tak długo, dopóki przekazujemy właściwe type.

2:05Bo jeżeli przyjdzie nam go do głowy, aby

2:07przypisać tutaj jakiś ciąg znaków, no to od razu widzimy, że ekspert próbuje na nas

2:11nakrzyczeć mówiąc, że nasze typy się tutaj nie zgadzają.

2:14Zatem tak naprawdę, jeżeli chodzi o

2:16typowanie komponentów klasowych, musisz pamiętać o tym, że musimy tutaj przekazać

2:20typy dla psów oraz stanu i w momencie, gdy np.

2:23nie przekazujemy procesów, możemy tutaj przekazać puste obiekt, a następnie musimy

2:27też zadbać o to, aby powtórzyć wykorzystanie tego typu zarówno w

2:31konstruktorze, jak i w metodach takich jak komponent Bid Update.

2:35Dzięki temu mamy pewność, że wykorzystanie boksów oraz aktualizacja stanu będą

2:40przebiegały pomyślnie i nie będziemy mieli żadnych niespodziewanych błędów.

2:43Jeżeli chodzi o same komponenty klasowe,

2:45to przy okazji default props pokazywałem, że dodajemy tutaj po prostu pola statyczne

2:50do tego, aby ustawić domyślne zawartości procesów.

2:53Przykładowo w naszym przypadku moglibyśmy

2:55tutaj ustawić domyślny status naszego kampera w momencie wczytywania aplikacji.

3:00Analogicznie możemy tutaj ustawić domyślne

3:02wartości dla naszego stanu wykorzystując właściwość State do niej Również musimy

3:06tutaj przekazać typ naszego stanu oraz oczywiście ustawić domyślne wartości.

3:11W momencie gdy to już jest gotowe.

3:12Na temat typowania komponentów kwasowych

3:14wiemy już w zasadzie wszystko, co powinniśmy wiedzieć.

3:17Zatem teraz nie pozostaje mi nic innego, jak zaprosić Cię do kolejnej lekcji.