Nowoczesny React: Zadanie: wysyłanie danych na serwer, loading i error state
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.
Zadanie dotyczące podsumowania tego modułu będzie podzielone na dwie części.
W pierwszej części chciałbym, żebyś rozwiązał dość typowy problem momentu, w
którym łączymy się właśnie frontendem z backendem z jakimś API.
Zauważ, że jeżeli tutaj w Network zrobimy sobie slow 3G, czyli tutaj w zakładce
Network w narzędziach developerskich, zrobię slow 3G, pójdę do Exchange i wrócę
na People, to muszę chwilę poczekać, zanim właśnie lista moich osób się załaduje.
Tutaj rozwiązalibyśmy to jakimś preloderem.
Polecam Ci w Bulmie zobaczyć sobie coś takiego jak Skeleton.
Wystarczy dopisać taką klasę jak Skeleton.
Gdybyśmy ją sobie tutaj dodali u nas w projekcie.
Zobacz jak to fajnie wygląda.
Jeśli wrzucę tutaj Skeleton, to mamy taką symulację ładowania właśnie
tych elementów tutaj.
Ja teraz sobie zrobię network node rolling tak, żeby mi się szybko
strona przeładowywała.
Natomiast zauważ, żeby mieć tego skeletona musisz mieć jakieś elementy, więc tutaj
musielibyśmy dostarczyć sobie jakieś obiekty razem z dymem, żeby ten skeleton
nam tutaj wyskoczył, czyli jakiś pusty obiekt z name.
Zobacz i wtedy ten skeleton tutaj będzie działał, więc to jest pomysł na taki
preloader plus dodatkowo chcemy obsłużyć błąd.
Zauważ, że druga sprawa jest taka, że co by było gdyby backend nie działał?
Na razie backend jest włączony na porcie 3000.
Mam ten adres People, mam tutaj rest API, ale co by było gdybym tego nie miał?
Gdyby nie było tego połączenia?
Fajnie by było poinformować użytkownika, że jest jakiś error.
Ten error zamiast odbierać tylko na konsoli, pokazać go tutaj.
I to jest również zadanie dla Ciebie, żeby taki error przygotować.
Tutaj z kolei może Ci pomóc Notification, czyli Notification.
Zobacz Is dangerous light.
Bardzo fajnie to wygląda.
Moglibyśmy coś takiego przedstawić?
Właśnie, że jest jakiś problem i możesz ten problem dokładniej opisać, czyli po
prostu bazować na message, który jest zwracany z tym errorem.
Albo sprawdź sobie cały ten obiekt, bo jest to tak zwany axios error.
Tutaj polecam Ci odwiedzenie dokumentacji Axiosa.
Będzie to niezbędne do rozwiązania z kolei drugiej części tego zadania.
W drugiej części tego zadania chciałbym, żebyśmy ożywili AdPerson.
Czyli tutaj zobacz bazujemy na name i e-mailu i chcemy je wysłać.
I teraz fajnie by było naprawić tą funkcjonalność, żeby faktycznie wysłać
na backend tę zawartość formularza.
Co więcej, zauważ, że tutaj możemy bezpośrednio wysłać tego maila tak samo,
czyli nie trzeba go gdzieś tam zabierać.
Na razie korzystaliśmy tylko z name, a możemy ten email też zostawić.
Co więcej, jeżeli Ci się uda i tutaj na tego localhost 3000, który jest wystawiony
na People wyślesz zapytanie typu post.
Polecam Ci tutaj w dokumentacji znaleźć sobie coś takiego jak post request.
To jest dokładnie to co potrzebujemy i tu są dane, które wysyłamy.
My możemy wysłać nasze person name jako name i możemy wysłać oczywiście email i
wtedy tutaj, jeśli wszystko przebiegnie poprawnie to pamiętaj, że DB, jsonz
backend mock to jest taki sposób twardego zapisu przez JSON Server.
Co to oznacza?
To oznacza, że jeżeli to zapytanie Ci się uda, to po pierwsze będziemy
widzieć to imię tutaj w People.
Powinniśmy je zobaczyć tu, w tym miejscu, a po drugie powinno ono być przez JSON
Server dopisane do db, json, json.
Serwer sam wygeneruje ID, my prześlemy name, a dodatkowo będzie tu jeszcze email.
I to będzie bardzo fajna sprawa, bo możemy to w takim układzie zostawić
i później w przyszłości.
Jeśli planowałbyś rozwój tej aplikacji, no to oczywiście moglibyśmy informować te
osoby jak zostały tutaj w Exchange wylosowane.
Czyli w momencie, gdy robimy losowanie, to nie tylko po prostu my widzimy wynik tego
losowania, tylko rozsyłamy do wszystkich.
Plus jeszcze na przykład ustalamy jakiś budżecik tej imprezy i wtedy informujemy
pozostałych, że jest taka impreza i mailem rozsyłalibyśmy, kto kogo wylosował, jaki
jest budżet, więc możemy sobie oczyma wyobraźni zobaczyć rozwój tej aplikacji.
Podsumowując, w tym zadaniu proszę Cię o to, aby dodać tutaj preloader.
Dodać sobie tutaj obsługę błędów, a z kolei w tym miejscu chcemy dodać właśnie
wysyłkę zapytania post na ten endpoint.
Podobnie jak robiliśmy Get w lekcji poprzedniej, teraz chcemy wysłać post
właśnie do naszego serwera backendowego.
Zapauzuj sobie to video. Czas start!
Rozwiązuj zadanie.
Ok, spróbujmy sobie rozwiązać razem.
Ja zacznę od dodawania użytkownika.
Potrzebujemy tutaj wejść sobie do tego naszego serwisu.
Jest tutaj przygotowane Add person i tutaj przesłalibyśmy sobie coś takiego jak
person i oczywiście na ten sam adres, ale wysyłamy posta.
I w ten sposób sobie przygotowujemy.
Właśnie mamy tutaj miejsce na to, żeby to person wysłać.
Dokładnie. Będziemy tutaj przesyłali name i email.
W takim wypadku, jeśli wrzucimy do naszych pages i mamy Add person page.
Zauważ, że tutaj po prostu w momencie, w którym dodajemy coś do formularza,
mamy handleSubmit i to handleSubmit.
Teraz byłoby async function.
Czyli tak sobie to wyobrażamy.
I zamiast Add person zrobimy sobie tutaj people serwis i z tego PeopleService mamy
tą metodę Add person i tutaj zamiast Person Name mamy też
Person Name i email, więc ja po prostu dodam values i tutaj robimy sobie avatar,
ale pamiętaj o tym, że musimy to obsłużyć trikiem.
Zawsze coś może pójść nie tak i musimy być na to przygotowani.
Finalnie powinniśmy zrobić coś takiego, aby obsługę tego błędu wyświetlić tutaj.
Czyli powinniśmy mieć coś takiego jak właśnie taki error box, error message.
Jeżeli to message nam się zmienia, to wtedy powinniśmy poinformować, że coś jest
nie tak finalnie użytkownika końcowego, ponieważ my tą obsługę błędu zrobimy sobie
tutaj w People i możemy łatwo sobie wyobrazić, że moglibyśmy to sobie
wyabstrahować jako osobny komponent.
To jak gdyby nie będę powtarzał tego tematu w tym miejscu, ale
pamiętaj o tym, że fajnie by było.
Warto tutaj ze względów UX poinformować użytkownika, co poszło nie
tak, że coś jest nie tak.
Spróbujmy sobie dopisać Michała i tutaj ten adres email i zobaczmy czy to działa.
Przede wszystkim w People mamy cannot read properties of undefined.
Prawdopodobnie dlatego, że my mamy person name.
Tak jest.
Czyli po prostu możemy sobie zobaczyć, że w DB JSON wpisało nam się
person name zamiast name.
Żeby sobie to poprawić.
Czyli tutaj mamy taki jakby skrót myślowy.
Musimy wrócić do tego miejsca i przepisać sobie to person name.
Czyli tutaj z values wybierzemy sobie name i email i wyłuskamy to na podstawie tego,
co sobie zrestrukturyzujemy z values.
Czyli mamy tutaj Person name email, a tutaj z kolei personname nazwiemy.
Można to przezwać, czyli od razu będziemy mieli name i email i
złożyć ten drugi obiekt.
Czyli tutaj robię sobie alias na personname z takim dwukropkiem.
To jest ta składnia alias personName to name i później add person
składam sobie z name email.
To nawet lepiej, gdybyśmy chcieli sobie to zrefaktoryzować w ten sposób, bo widzimy
wszędzie, że wysyłamy właściwe dane do backendu, czyli widzimy, że wysyłamy
dokładnie name i email i dokładnie na tym nam zależy.
I teraz zwróćmy uwagę, że jeżeli dodam nowego użytkownika,
to czy wszystko będzie w porządku?
Wracam do People.
Widzę, że jest tutaj Michał i co więcej w DBJSON, co już nam się potwierdziło,
będziemy mieli ten adres email.
Czyli widzisz, że tutaj już backend działa nam na tyle profesjonalnie, że możemy
sobie zapisać tego e-maila i faktycznie backendowo zrobić jakieś rozwiązanie,
chociażby do wysyłki maili w momencie, gdy zaczynamy nowy Exchange, czyli
zaczynamy nową imprezę z losowaniem.
Teraz rozwiążmy sobie drugą część zadania, czyli tutaj na People chcielibyśmy
sobie zobaczyć pre loader.
Jak to sobie zrobić?
Ja skorzystam z tego skeletona, czyli chciałbym sobie zrobić taką
wartość jak is loading.
Zwróć uwagę, że mamy tak naprawdę pewne rzeczy, które są połączone
z perspektywy people.
Mamy coś takiego jak is loading i to musi być use state.
Dlatego, że to będzie zmienne w czasie.
Na początku to będzie miało wartość false.
Załóżmy i będziemy mieli tutaj is loading.
I później mamy coś takiego jak error message i set error message.
I początkowo po prostu error message.
To jest coś pustego.
Spróbujmy sobie od Error message.
Gdybyśmy chcieli to zrobić, fajnie by było wrzucić sobie jakiś do tego paneliku
na przykład, albo gdzieś wyżej.
Właśnie error message.
Wydaje mi się, że nie ma sensu wyświetlania całego tego widoku, jeżeli
mamy error message, więc moglibyśmy sobie tu zrobić coś takiego, że jeżeli mamy
error message to chcemy pokazać właśnie jakiś error box.
Razem z tym error message.
Mamy is dangerous.
Możemy tutaj is light i będziemy mieli.
Error message error message.
Obsłużymy tutaj, czyli tutaj będzie set error message.
I zobacz, że początkowo możemy się opierać na wartości error message w ten sposób.
Natomiast musimy pamiętać o tym, że w momencie, w którym zaczynamy wycieczkę do
backendu set error message musimy wyzerować.
Czyli w momencie, w którym chcemy zapytać o Get people, to zerujemy sobie to.
A z drugiej strony chcielibyśmy też, żeby set is loading wtedy ustawiło
się na true i to loading.
Możemy tutaj użyć składni finally, bo niezależnie od tego czy mamy
error czy nie, to set is loading.
Chcemy, żeby ustawiło się na false.
Czyli niezależnie od tego czy mamy catch czy tutaj to tray się wykona i set people,
Czyli nie wróci ten nasz await error.
A to chcielibyśmy, żeby set is loading ustawiło się na false.
I tutaj set loading to będzie z kolei inny tryb, dlatego, że skorzystamy
sobie z tego stanu z loading.
Jeżeli coś jest loading to możemy sobie tutaj info notification wrzucić loading
people i możemy tutaj skorzystać z class Names
właśnie z tym obiektem, którym możemy sobie określić, że ta klasa
Skeleton zostanie dostarczona.
Jeśli is loading jest na true.
I tutaj zaimportujemy sobie class Names z klas names.
Potrzebujemy.
Nie będziemy tu już mieli get people, więc ten import nie jest nam potrzebny.
I tu w tym momencie powinniśmy zobaczyć właśnie te wiadomości.
Jeżeli faktycznie będziemy to ładować, zwróćmy uwagę, czy tak faktycznie jest.
Żeby to zrobić w prosty sposób, możemy tutaj sobie właśnie zrobić ten trolling
slow 3G exchange, wrócić do People.
Mamy loading people i mamy tutaj załadowane.
A ten skeleton nam nie działa, dlatego, że no tutaj żeby ten skeleton nam zadziałał
poprawnie, powinniśmy sobie zrobić coś w formie uzupełnienia tej tablicy
o jakieś wartości początkowe.
Zróbmy sobie z tego jakąś stałą.
Czyli to skeleton values to są puste po prostu name'y.
W ten sposób możemy sobie przygotować to na tej zasadzie
kilka właśnie takich obiektów, które sobie zrobimy w ten sposób.
Spróbujmy przygotować sobie to w arrow function, która zwraca obiekt.
Żeby to działało, musimy sobie zwracać obiekt właśnie w taki sposób.
I tutaj kilka razy empty person możemy sobie wywołać, żeby właśnie przygotować
takie puste obiekty z użytkownikiem.
Na przykład takie cztery sztuki, tak żebyśmy mogli to sobie wrzucić
do Use state i initial state.
To będzie to nasze skeleton values.
Zobacz, że wtedy widzimy, że coś nam się ładuje.
Mamy tutaj. Exchange people.
Loading people.
No i dostajemy nową tablicę.
I jeszcze raz exchange.
People loading people. I mamy to.
I możemy też ten search bar pokazywać dopiero w momencie, gdy is loading jest z
kolei na false, więc tutaj też pewnego rodzaju conditional rendering.
Tylko musimy odwrócić tą wartość.
Czyli w momencie jest loading, nie mamy search, a później on
nam się tutaj pojawia.
Zobaczmy teraz error box.
Co gdybyśmy na przykład nie mieli dostępu do internetu?
Wtedy ustawiamy tutaj. Offline.
I teraz jeśli kliknę Exchange i People widzę, że mam network error.
Tak.
Co więcej, można by było przy tym network error i set error message zrobić sobie po
prostu update state u, żeby set people ustawić na pustą tablicę, czyli ten
skeleton wtedy nam tutaj zniknie.
Natomiast my mamy set people na errorze jako pusta tablica.
Czyli robimy sobie to właśnie w ten sposób.
Jeszcze raz Exchange, teraz people.
Mamy network error.
To dlatego, że ta strona nam się nie przeładowała, bo bawimy się tutaj
właśnie narzędziami deweloperskimi.
Spróbujmy teraz ustawić offline.
No i w tym momencie zauważ jeśli przeklikam Exchange i jeszcze
raz people mam tu network error.
Ten search bar ma się pojawiać jeżeli is loading.
No i tutaj error message, czyli i nie ma error message to wtedy jakby
Searchbox nam się pojawia.
Spróbujmy to sobie zrobić w ten sposób.
Czyli jak gdyby musimy tutaj spełnić aż dwa warunki.
No rottling mamy ok.
Teraz offline Exchange people i mamy network error,
czyli jak gdyby dostajemy jakąś informację zwrotną.
Co prawda ona niewiele nam tutaj mówi, musielibyśmy sobie zrobić obsługę błędów.
Polecam Ci doczytać w dokumentacji Axiosa Handling Errors.
Tutaj mamy taką zakładkę i tutaj możemy sobie zobaczyć w jaki sposób możemy się
dobrać dokładnie do tego errora, który zwraca backend i wyświetlić go tutaj.
W tym miejscu włączmy sobie to poprawnie.
Tak, żeby nasza aplikacja działała.
I zobaczmy sobie jeszcze raz.
Jeśli chodzi o to flow 3G i ExchangePeople,
muszę mieć otwarte narzędzia deweloperskie, żeby ta moja
zmiana flow 3G zadziałała.
Czyli jeszcze raz exchange people.
Widzimy, że to nam się ładuje loading people i dostajemy wszystkich.
To jest pewne zadanie, które jest stawiane przed każdym taką wycieczką do backendu.
Jeśli chodzi o request do API, które mamy zewnętrzne, które zrobimy sobie Ajaxem.
Polecam Ci sprawdzenie biblioteki takiej jak Stack Query jako
rozwój tego co mamy tutaj.
Chodzi tutaj o bibliotekę Stack Query.
Jest to biblioteka, która pozwoli Ci właśnie z używaniem hooków właśnie,
jeśli sobie zobaczymy dokumentację.
Domyślnie jest ona otwarta dla Reacta.
Możesz sobie zobaczyć dlaczego ta biblioteka powstaje i przeczytać
sobie o co w niej chodzi.
Ale long story short.
Tu jest po prostu sytuacja, w której rozwiązane są wszystkie te
problemy, które mamy tutaj.
Czyli wyobraź sobie, że my mamy tylko jeden widok, w którym prosimy o
informację, chcemy pokazać jakiś preloader i chcemy obsłużyć stan błędu.
A gdybyśmy mieli to absolutnie na każdym widoku albo na wielu widokach, albo na
większej części aplikacji, wtedy pisanie tego byłoby takim boiler playtem.
Musielibyśmy to cały czas pisać i obsługiwać w ten sposób.
Natomiast ten stack Query pomoże Ci rozwiązać właśnie ten problem, żeby
łatwiejsze było nie tylko pobieranie danych, ale również jest to swego rodzaju
rozwiązanie naszego problemu, o którym Ci mówiłem, że w momencie, w którym dodajemy
sobie tutaj jedną osobę, wtedy korzystamy z faktu, że natychmiast nie ma renderu
gdzieś tutaj na górze na przykład, albo nie wiem, nie zwiększa się ilość osób.
Dlatego wtedy, jeśli to wyślemy, to po aktualizacji.
Nie pobieramy tych danych natychmiastowo, więc nie musimy ich wyświetlać.
Natomiast gdybyśmy mieli taki use case, że potrzebujemy to robić, to wtedy okazałoby
się, że takie właśnie tylko wysłanie danych za pomocą posta, które mamy tutaj,
które przygotowaliśmy sobie w AdpersonPage, po prostu nie wystarczy do
tego, żeby jednocześnie je zaktualizować.
Musielibyśmy mieć tutaj jakiś format aktualizacji tego.
Okazuje się, że ten Stack Query jest tak potężny, że mogłoby keszować
również ten rezultat i keszować.
To, że my wysyłamy coś na posta i automatycznie wiedzieć, że lista People
nam się zmieniła i zaktualizować stan, co jest potężnym narzędziem w naszym
arsenale, że możemy sobie kasować właśnie dane i używać ten stack query jako
takiego stanu danych z serwera.
Polecam Ci ten Stack Query jako rozwój, jako przepisanie sobie
refaktoring tego zadania.
My z kolei w dalszej części tego kursu pouczymy się o narzędziach deweloperskich.