Nowoczesny React: Mock dla back-end API
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.
W tej lekcji pokażę Ci jak zamontować sobie za pomocą takiej biblioteki jak
JSONServer serwer backendowy, czyli backend API.
Chodzi o to, żebyśmy mogli w prosty sposób zobaczyć sobie, jak połączyć naszą
aplikację właśnie z backendem.
I ten backend emitujemy sobie za pomocą JSON servera, żeby doinstalować
sobie JSON Server do projektu.
Zrobimy troszeczkę inne polecenie, ponieważ NPM i użyjemy z flagą duże D.
Chodzi o to, żeby zainstalowane to zostało jako dev dependencies, Czyli generalnie w
package do JSON będziemy mieli dev dependency.
Jako dev dependency mamy JSON server i tutaj chcielibyśmy przygotować jakieś
dane, na przykład jako backend.
I tutaj db JSON będzie to wyglądało tak, że obiekt, który
ma pole users albo możemy tutaj dodać sobie to nasze people
będzie pustą tablicą.
Na razie będziemy chcieli tutaj dodać sobie to, co mamy w
PeopleJS, czyli te elementy.
Bardzo szybko okaże się jednak, że nie możemy tego zrobić w ten sposób.
JSON Server musi posiadać obiekty dlatego, że będzie chciał je identyfikować,
żeby działał poprawnie.
Żebyśmy mieli tutaj takie właśnie fejkowe rest API.
Potrzebujemy, żeby to były obiekty, które na przykład będą posiadały pole name.
I w ten sposób sobie to opakujemy.
Oczywiście musimy pamiętać, żeby to dalej były dane w postaci JSON.
Spróbujmy sobie to skopiować, dorzucić. Mark.
Krysia, John.
I tutaj jeszcze Edmund.
W ten sposób przygotowane dane mogą poczekać właśnie na JSON Server.
I dopiszmy sobie jeszcze w JSON Server.
Tutaj w Package JSON polecenie backend i to będzie używało JSON Server.
I tutaj bardzo ważna rzecz musimy odpowiednio zadbać o to, żeby to była
poprawna ścieżka, czyli backend MockDB, JSON.
Jeżeli nie zadbasz o to, żeby ta ścieżka była poprawna, tylko zrobisz jakąś
literówkę, to on pokaże Ci dane domyślne zamiast tego, co chcieliśmy tutaj mieć.
Zobacz, że mamy endpoint na porcie 3000 jako people.
W momencie gdy wejdziemy na localhost 3000 people.
Zobaczymy, że będziemy mieli te dane, które sobie tutaj przygotowaliśmy.
Bardzo ważna kwestia jest taka, że aktualnie te obiekty nie
mają swojego ID i to ID. Za każdym razem.
Gdybyśmy uruchomili ten backend serwer, ono będzie losowane.
Ono będzie losowane.
Tego byśmy nie chcieli.
Chcemy, żeby to były te same dane zawsze.
Co prawda niewiele nam to z perspektywy aplikacji przeszkadza, ale w przyszłości,
jeśli kiedykolwiek będziesz stosować właśnie JSON Server, dobrze mieć te
fejkowe dane przygotowane właśnie w postaci takiej deterministycznej,
gdzie one mają swoje własne ID.
JSON Server aktualnie używa ID w postaci stringa, więc generalnie jeśli tutaj
odniesiemy się do danego ID np.
Załamiemy people na 84 ed, to zobacz, że dostajemy marka, więc generalnie jesteśmy
w stanie tutaj wylosować sobie jakieś ID, albo jeśli popełnimy błąd
to dostaniemy 404 not found.
I tak dokładnie chcemy, żeby to nam działało, żebyśmy mogli w tej
formie odnosić się do serwera.
W takim układzie nie pozostaje nam nic innego jak podłączyć
się do naszego mock API.