Nowoczesny React: Podstawy użycia stanu
od Podstaw
5 godz. 59 min · ReactJS · Full-stack i Programowanie
Michał JabłońskiCzego się nauczysz
- Podstawy React jako biblioteki UI
- Konfiguracja środowiska programistycznego
- Składnia i reguły JSX
- Komponenty React jako podstawowe bloki aplikacji
- Przekazywanie danych przez props
- Renderowanie list i kolekcji
- Renderowanie warunkowe elementów
- Stylowanie komponentów i moduły CSS
- Zarządzanie stanem aplikacji
- Hook useState do przechowywania danych
- Hook useEffect do efektów ubocznych
- Routing i nawigacja w aplikacji SPA
- Parametry dynamiczne w adresach URL
- Obsługa formularzy i walidacja danych
- Integracja z biblioteką Formik
- Komunikacja z API backendowym
- Obsługa operacji asynchronicznych
- Zarządzanie stanem ładowania i błędów
- Narzędzia deweloperskie do debugowania
- Konfiguracja środowiska produkcyjnego
- Deploy aplikacji na platformie hostingowej
Nowoczesny React
React przeszedł długą ścieżkę rozwoju i część z jego funkcjonalności nie są już powszechnie używane. Dlatego w tym kursie skupimy się na najnowszych technikach pracy z biblioteką - poznasz współczesne podejście do budowania komponentów z wykorzystaniem hooks (useState, useEffect), zrozumiesz zasady kompozycji i zarządzania stanem aplikacji. Pokażemy Ci też jak efektywnie korzystać z narzędzi deweloperskich, debugować kod i wdrażać aplikacje na produkcję z użyciem współczesnych platform jak Vercel.
Hooki
Hooki to fundament nowoczesnego Reacta, który całkowicie zmienił sposób tworzenia komponentów. W kursie nauczysz się efektywnie zarządzać stanem aplikacji używając useState, wykorzystywać useEffect do operacji lifecycle i side-effects, oraz poznasz reguły korzystania z hooków. Wszystko to przećwiczysz w praktycznych zadaniach, takich jak implementacja filtrowania listy elementów, gdzie zastosujesz zdobytą wiedzę w realnym scenariuszu.
Formularze
Obsługa formularzy to nieodłączny element każdej aplikacji webowej. Pokażemy Ci jak kontrolować wartości pól input, wykorzystać popularną bibliotekę Formik do zarządzania złożonymi formularzami oraz implementować walidację danych. Wiedza ta zostanie utrwalona poprzez praktyczne zadanie, w którym rozwiniesz formularz o dodatkowe pola i zastosujesz poznane techniki w rzeczywistym przypadku użycia.
Połączenie z back-endem
Większość aplikacji wymaga komunikacji z serwerem. Nauczysz się jak poprawnie wykonywać operacje asynchroniczne w komponentach React, obsługiwać stany ładowania i błędów, oraz efektywnie korzystać z klienta HTTP do zapytań AJAX. Zaczniesz od pracy z przygotowanym mockiem API, by następnie przejść do prawdziwej integracji z back-endem. W praktycznym zadaniu zaimplementujesz pełny przepływ danych - od pobrania, przez wyświetlenie, aż po wysłanie na serwer.
Deployment
Poza budową aplikacji React, w kursie znajdziesz także moduł poświęcony wdrażaniu aplikacji na produkcję. Poznasz prawidłową konfigurację serwera produkcyjnego dla architektury SPA, nauczysz się zarządzać zmiennymi środowiskowymi poprzez pliki .env oraz przeprowadzisz deployment na platformie Vercel. Dzięki temu Twoja aplikacja będzie nie tylko działać lokalnie, ale także będzie gotowa do użycia przez realnych użytkowników w internecie.
Dla kogo jest ten kurs?
Nowoczesny React stworzyliśmy z myślą o osobach, które chcą nauczyć się Reacta i jednocześnie znają JavaScript. Niezależnie od tego, czy React jest Twoim pierwszym frameworkiem, czy masz już doświadczenie w pracy np. ze Svelte czy Vue, ten materiał jest dla Ciebie. Wskazane jest również posiadanie ogólnej wiedzy na temat tworzenia interfejsów z HTML i CSS oraz obsługi narzędzi takich jak Git czy podstawy pracy z terminalem.
Żeby wyjaśnić Ci, na czym polega stan, użyję do tego prostego przykładu.
Przygotowałem sobie tutaj zawczasu coś takiego jak sample button i ten sample
button posłuży mi do wyjaśnienia Ci, czym właściwie jest stan,
żebyśmy mogli skupić się tylko i wyłącznie na tym, co aktualnie będziemy potrzebować,
to chciałbym zakomentować tą część kodu i użyć tylko i wyłącznie sample buttona.
I tutaj zwijmy sobie na razie ten kod.
Nie będziemy na ten moment z tego korzystać.
Chciałbym skorzystać tylko z tego buttona, żeby pokazać Ci jak działa stan.
Stanem w reakcie będziemy nazywali wszelkie dane, które
ulegają zmianie w czasie.
W takim układzie moglibyśmy sobie tutaj naiwnie pójść w ten sposób.
Skoro to jest sample button, który jest osadzony tutaj i ja chciałbym,
żeby on się inkrementował.
Czyli za każdym razem, jak kliknę, to żeby zwiększał swoją wartość o jeden.
No to zdefiniuję sobie zmienną let count tak, żebym mógł do niej dodawać.
Wiemy już, że onclick będzie przyjmowało jakąś funkcję typu callback i tutaj
Count++ może nam dać oczekiwany efekt.
Moglibyśmy założyć, że to będzie w porządku.
Odświeżam dla pewności.
No i nie działa.
Gdybym próbował tutaj klikać i zakładał, że to będzie działać.
No nie ma prawa to działać dlatego, że ja sobie aktualizuję Count.
No ale chwila, chwila, przecież mamy tutaj let.
Nie jest to const.
Możemy sobie podejrzeć pod F12 czy w konsoli, że wszystko jest w porządku.
Nie mamy tutaj żadnego error, a możemy nawet zrobić sobie consoleloga.
Zauważ w tym count i zauważyć, że to faktycznie się implementuje.
Czyli nasz tok myślenia jest dość dobry.
Brakuje nam tylko jednego elementu.
Otóż React nie wie, że chcemy zaktualizować coś na widoku.
Czyli widzisz, że w konsoli wszystko jest ok?
Mamy referencję, faktycznie do tego count.
A mówiąc ściślej mamy po prostu przekazanie tego przez wartość.
Tą wartość sobie implementujemy i console count.
Widzimy, że to wszystko tutaj elegancko działa.
Jednak żeby React wiedział, że mamy jakąkolwiek zmianę.
Musimy do tego użyć specjalnego, tak zwanego hooka use state.
Zamiast pisać, to w ten sposób zrobimy const i rozbroimy tablicę od Use state.
Zwróć uwagę, że tutaj zaczynamy od zera, czyli to jest nasz initial state, ale my
tak naprawdę rozbrajamy tablicę z use State i tutaj zastosujemy count
i nasz seter, czyli setCount.
To będzie specjalna funkcja, która pozwoli nam implementować ten nasz counter.
W takim wypadku count jest tylko do odczytu.
Proszę zwrócić uwagę Count is constant nie można go tutaj sobie implementować.
Ten const jest tutaj ważny i w ten sposób będziemy działać.
Zamiast tego zrobimy sobie coś takiego jak set count i tutaj Count +1.
I teraz zobaczmy sobie jak to będzie działać.
W tym układzie widzimy, że nasz widok zaczyna się aktualizować.
Mamy 1, 2 3, 4, 5.
Jak to się dzieje?
Teraz mamy wyraźny sygnał dla Reacta, że za każdym razem jak WCState
skorzystamy z set count.
Zwróć uwagę, że ta nazwa jest dowolna.
Dlatego właśnie sobie strukturyzujemy tablicę.
Dlatego właśnie programiści React wymyślili to w ten sposób, aby
JustState można było dowolnie nazwać. Czyli UseState.
Możemy sobie nazwać w zależności od tego z czego chcemy korzystać.
Czyli ja chcę mieć counter, więc będę miał count i set count.
I ta konwencja nazewnicza będzie się w pewien sposób powtarzać.
I teraz mamy taki kontrakt.
Można tak to sobie wyobrazić właśnie z aplikacją Reactową, że za każdym razem,
jeśli ja użyję tego Settera, to ten widok zostanie re renderowany, czyli jak
gdyby ta funkcja wykona się ponownie.
I to dosłownie.
Zobacz, jeżeli tutaj zrobię sobie consoleloga i wrzucę sobie again.
Zauważymy, że za każdym razem jak robimy set state to again będzie
ponownie i ponownie wykonywane.
Tłumaczyłem Ci już dlaczego mamy to dwukrotnie.
Tutaj mamy to specjalnie z tego względu, że w main.
Gdzie minge sex jest ten stricte mode.
Dlatego dwukrotnie widzimy te console logi.
Ale zauważ, że za każdym razem gdy aktualizujemy coś to będziemy mieli
tego konsologa dwukrotnie wyświetlonego.
To jest taki kontrakt i mogłoby się wydawać, że tutaj jest
to średnio optymalne. Dlaczego?
Dlatego, że gdy zobaczymy sobie downtree okazuje się, że.
No ale jak to?
Jeżeli sample buttons za każdym razem jak ja wywołam set count się renderuje, to
znaczy, że wszystkie komponenty i komponenty, które ma ten
sampleButton również. To prawda.
Również całe drzewo komponentów będzie jak gdyby rerenderowane.
Ale uwaga nie na domie.
To znaczy, że tutaj zauważ, że jest aktualizowany tylko button i jest
aktualizowany tylko jego innerHTML.
Otóż system, który pod spodem wykorzystuje React zwany VirtualDom, ma nam zapewnić
to, że React sam będzie wiedział co konkretnie zmieniło się na widoku
i co faktycznie ma aktualizować.
Więc z jednej strony mamy kontrakt, że to wywoła się ponownie, ale z drugiej strony
sam React będzie wiedział i spróbuję zaktualizować najmniejszą możliwą liczbę
elementów, które faktycznie się zmieniły.
Tak na tej zasadzie.
Więc tutaj jak gdyby mamy tak zwany trudno rekoncylation mechanizm, dzięki któremu
właśnie React stosuje Virtual Dom i aktualizację faktycznego domu.
Jeszcze jedna sprawa.
Jeżeli byśmy chcieli ten setCount na przykład sobie powtórzyć, to moglibyśmy
liczyć, że to nam doda dwa za każdym razem.
Czyli mamy 0, 2 4.
No ale tak się nie dzieje.
Widzimy, że mamy tutaj 0, później 1, później 2.
Dlatego, że wartość count jest taka, jaka była w momencie, w którym tutaj
chcemy się do tego dostać.
To znaczy, że Count ma teraz wartość 0.
W momencie gdy weźmiemy Count +1 set count, to zanim zaktualizowany
zostanie count to zgadnij co.
Znowu wywołujemy set count z wartością, która jest aktualnie.
Gdybyśmy chcieli, żeby taki zapis zadziałał, musielibyśmy
użyć do tego callbacka.
I tutaj na przykład jako CeC+1.
W ten sposób, gdybyśmy to zaktualizowali, to nie ma problemu.
Jeżeli zrobimy to jako callback i zaktualizujemy to w ten sposób.
Będziemy wtedy dodawali 2, 4, 6, 8 i tak dalej, i tak dalej.
Czyli tutaj C reprezentuje aktualną wartość tego count, do której dodajemy 1 i
tutaj tak samo c aktualną wartość count, do której dodajemy 1.
Czyli jeżeli tutaj sobie wylistujemy to count jeszcze raz
będziemy mieli 8, 10, 12.
14 16.
I w ten sposób możemy sobie to aktualizować.
Jak to się ma do naszych widoków?
Czyli gdybyśmy teraz przywrócili nasz widok, który mieliśmy wcześniej z AB,
na razie ten SimpleButton może tam sobie zostać, natomiast przywróćmy to tutaj.
I tutaj mamy taki element, który ma się zmieniać w czasie.
My chcielibyśmy sterować klasą Isactive, dlatego, że w momencie, w którym
korzystamy z tego Navbara, jeżeli z Active jest dopięte, to wtedy to ma się pojawiać,
natomiast jeżeli nie, to jak chcielibyśmy, żeby to zniknęło.
I tak faktycznie się dzieje.
Czyli Bulma tak działa, że jeżeli jest active.
Zabierzemy stąd i z Active, zabierzemy stąd to wszystko będzie
działało tak, jakbyśmy chcieli.
Natomiast my chcemy tutaj właśnie dopiąć sobie stan, dlatego że nie modyfikujemy
żadnej danej, która jest w środku JavaScriptu.
My chcemy po prostu zmodyfikować widok, chcemy zmodyfikować właśnie te klasy,
które są tutaj dopisywane przez klasy i możemy to właśnie osiągnąć
używając hooka i USState.
Jeżeli wyobrazimy sobie, że będziemy mieli początkowo jako false i zróbmy to
sobie jako is open, set is open.
I teraz w momencie kliknięcia na ten button, my chcemy tak naprawdę zmienić
aktualną wartość is open, czyli set is open będzie odwrotnie niż
jego aktualna wartość. Zobacz.
Natomiast jeżeli open jest dostępne to tutaj skorzystajmy z class Names i z
Active chcemy dopiąć tylko wtedy, jeżeli jest is open,
czyli mamy tutaj classnames z classnames, mamy className navvaris,
openis openClassName.
Musimy też zastosować tutaj w nazwach Burger i tutaj zamiast z Active chcemy
użyć tego samego obiektu i zamknąć to wszystko co tutaj komutujemy w tym klasy.
Zobacz, że w tym momencie mamy otwierane zamykane menu, czyli każda z tych klas is
active jest dopinana tylko wtedy jeżeli jest open się zmieni, a is open zmienia
się na onclick w tym właśnie batonie.
Czyli tutaj mamy kolejny element, który zmienia się w czasie, dlatego
chcemy użyć tego hooka.
State Use State pozwala nam w tym momencie wykorzystać stan danych, który zmienia się
w czasie i teraz możemy to modyfikować.
Zwróć uwagę, że w momencie, gdy zobaczymy sobie co takiego nam się
odświeża tutaj na widoku.
Zauważymy, że będą to klasy właśnie tutaj z Active i z Active na
Batonie i tutaj w menu.