Nowoczesny React: Zadanie: filtrowanie listy elementów
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.
Czas na zadanie podsumowujące.
Tym zadaniem będzie wprowadzenie takiego oto Searchbara.
Zobacz, że jest to prosty input, który ma tutaj klasę xInfo.
Ma też placeholder search.
Czyli mamy coś takiego.
Chciałbym, aby to całe było komponentem, czyli zrób sobie z tego komponent.
Dodatkowo jest jedna rzecz, której nie omawialiśmy onchange.
Czyli jeżeli do inputa damy onChange.
I właśnie taka składnia z event target value spowoduje, że w momencie w którym
coś napiszemy tutaj zauważ, że mamy natychmiastową informację zwrotną.
Za każdym razem wykona się ten callback i event target to jest ten
nasz input i jego value.
To jest dokładnie to co wpisaliśmy tutaj.
Więc w ten sposób chcemy sobie odczytać właśnie target value.
W ten sposób będziemy chcieli sobie dotrzeć do tego, co użytkownik wpisał
i chcemy po tym filtrować imiona.
Zróbmy tak, żeby to filtrowanie było case sensitive, czyli na przykład jeżeli ja
napiszę Ewa w ten sposób, to zostanie tutaj na liście tylko Ewa.
Największą trudnością tego Będzie rozpoznanie, co będzie dla Ciebie stanem.
Więc zamiast robić najpierw komponent, możesz na dobry początek rozpoznać sobie,
jak przygotować sobie stan po to, żeby ta właśnie tablica people zmniejszała
się do rozmiarów tylko jednej osoby.
Ale z drugiej strony, jeżeli skasuję ten search, to chcę widzieć wszystkie osoby,
więc tutaj musimy sobie opracować.
I najtrudniejsze pytanie to jest tak naprawdę co będzie stanem
w tym konkretnym przypadku?
Domyślnie kierowalibyśmy się taką regułą, że chcielibyśmy przerzucić to people jako
stan, a udowodnię Ci, że tak totalnie nie jest.
Nie musimy tego people w ogóle wrzucać do stanu.
Możemy dalej mieć właśnie taką funkcjonalność wykorzystując programowanie
funkcyjne, ale tutaj za chwilę zrobimy sobie to razem.
Na razie chcę, żebyś popróbował sam, dodatkowo zamieniając to na komponent.
Pamiętaj o tym call backu zwrotnym, tak jak tutaj mieliśmy OnSelect.
Select.
Będziemy tutaj potrzebowali jakiegoś callbacka na zasadzie
on search i to on search tak naprawdę zwróci nam to event target value wyżej,
więc będziemy próbowali wywołać sobie callback, który na onsearch zwróci nam tu
w parametrze wartość, która jest poszukiwana i wtedy będziemy sobie
to aktualizować w takim układzie.
Możesz teraz zatrzymać to wideo i próbować samodzielnie rozwiązać to zadanie.
Za chwilę rozwiążemy je razem.
Ja zamiast zaczynać od przenoszenia tego do komponentu, wiem, że na razie działa to
w takiej formie, ale chciałbym sobie rozpoznać, w jaki sposób
mogę wrzucić stan.
Mówiliśmy sobie o tym, że stanem są wszystkie elementy, które zmieniają się w
czasie i możemy tutaj założyć, że w czasie będzie zmieniała się ta lista.
No bo przecież jeśli filtrujemy, to zmieniamy tą listę.
Tak, to prawda, ale tak naprawdę będziemy zmieniać w czasie wartość, po
której filtrujemy, czyli Searchtext.
Jeżeli sobie wyobrazimy coś takiego jak SearchText jako UseState
I tutaj będziemy mieli na przykład Ewa.
Załóżmy sobie, że to jest initial value i wedle konwencji set searchText
to teraz ten SearchText może nam filtrować tablice people.
Zobacz, że tutaj możemy mieć filter i byName.
I teraz chcemy sobie odfiltrować wszystkie, które spełniają warunek,
że name to lowerCase includes.
Nasz searchText to lowercase, żebyśmy mieli case in sensitive.
Tak. I zobacz, że faktycznie to nam działa.
Co więcej powinno działać w czasie jeżeli będziemy aktualizować tą wartość.
Spróbujmy sobie search text w takim wypadku dać na pusty i spróbować sobie go
aktualizować tutaj i sprawdzić czy to działa.
Czyli na przykład jeśli wpiszę Mark zobacz, że jest Mark.
Ewa. Zaczynam od E.
Widzimy, że to działa.
Wszystkie imiona z literką A mamy to.
Jak to się dzieje, że ten kod działa?
Jak to się dzieje, że możemy sobie w ten sposób to przeliczać?
Pamiętaj, że set search tekst jest seterem tutaj naszego stanu, czyli
mamy use state i setujemy stan.
W takim wypadku cały ten kod wykona się ponownie.
I tutaj możemy sobie wyodrębnić coś takiego jak filtr add people.
I to jest tak naprawdę nasze tak zwane computers property.
W takim układzie, jeśli użyjemy sobie to tutaj, w ten sposób wyodrębnimy
to sobie w ten sposób.
To wiemy, że ten kod wywoła się za każdym razem, jeśli zmienimy search text, więc to
również wywoła się w momencie, gdy zmienimy SearchText.
Więc filter tak samo wywoła się, jeżeli zmienimy SearchText.
Taki mamy kontrakt właśnie z Reactem i to nam wystarcza do tego, żeby wprowadzić
właśnie taką funkcjonalność.
I teraz dopiero możemy sobie to przenieść jako komponent.
Czyli ja sobie znowu użyję tego refactora.
Refactoring extract komponent.
I tutaj ten komponent, tak jak mówiliśmy wcześniej, komponenty klasowe są
już po prostu czymś, co jest legacy.
Dla porządku, gdybyśmy pracowali z jakimś legacy kodem, to klas komponenty mogłyby
być przedmiotem naszego zainteresowania.
Natomiast function components to jest to co chcemy zrobić, czyli
SearchBox function component.
Ok, i mamy tutaj onChange.
Zobacz jaki on jest sprytny.
Od razu dał nam tego psa onChange i próbujemy go sobie tutaj
wyłuskać, wystawić.
Ja go sobie zmienię na onsearch w tym układzie i onsearch po prostu wywołamy
sobie tutaj, a dodatkowo w PropTypes określę go jako required, czyli to
Onsearch jest dla mnie funk i jest is required, tak?
Czyli mamy tutaj od razu dostęp też do propsów.
To wszystko chcielibyśmy sobie zrobić jako zupełnie osobny komponent.
Co więcej, chcę Ci pokazać jeszcze jedną rzecz, taką jak na przykład zmienianie
tego placeholdera, który mamy tutaj.
Zobaczmy sobie komponent Search Box JavaScript File, ale jako JSX.
I tutaj mamy export function.
Jeśli chodzi o PropTypes możemy sobie po prostu importować te Proptypes i w ten
sposób takie importy też są dozwolone.
Czyli ta gwiazdka from nie jest nam potrzebna.
Potrzebujemy jeszcze tego searchboxa użyć sobie tutaj dlatego, że jeszcze go sobie
nie zaimportowaliśmy, czyli alt enter, insert import.
I tutaj jak gdyby mamy import z tego searchboxa.
Teraz powinniśmy odświeżyć naszą stronę.
Zobaczmy sobie, czy będzie to działało poprawnie.
Jeszcze nie. Dlatego, że mamy OnSearch.
Zobacz, że tutaj mamy element Searchbox have required attribute on search.
I tutaj mamy Insert required attribute.
Możemy sobie ten search podmienić w ten sposób.
I tutaj zamiast Event target value.
Ja chciałbym mieć po prostu value, czyli bardzo fajnie by było po prostu
search text dostarczyć tutaj jako search box.
Czyli zadaniem search boxa będzie już nie event target value, tylko chcemy sobie
stąd wyłuskać ten event i już nie martwić się o to, że będziemy musieli ten event
target value później wyłuskiwać gdzieś na zewnątrz.
My chcemy już dostać to value, które mamy tutaj.
Czyli mamy tutaj OnChange I teraz OnSearch zostanie wywołany za każdym jednym
razem na każdy nasz key track i tutaj. OnSearch.
Mamy Fang is required.
Jeżeli na input zdarzy się onChange, wtedy przesyłamy wartość tekstową do onSearch.
OnSearch jest tutaj.
To value jest odebrane i mamy tutaj set search text.
Ewa albo Mark.
Teraz mamy jeszcze jeden błąd.
Ten błąd jest związany z Children do Page Layout.
Zobacz, że w Page Layout teraz mamy dwa elementy, a w children spodziewamy
się tylko jednego elementu.
Możemy to zmienić po prostu na node.
Jeśli zmienimy to na node zamiast element.
Oznacza to, że nie spodziewamy się jednego Reactowego elementu, tylko możemy
spodziewać się dowolnego elementu, który da się wyrenderować.
Czyli jest poprawny z perspektywy children, więc types node będzie
troszeczkę lepszy dla naszych children, tak żebyśmy mogli tutaj mieć nie tylko
jeden komponent, czyli nie tylko jeden element, Tylko nawet taką grupę
elementów i tak możemy sobie to poprawić.
W tym układzie zauważ, że mamy searchboxa, który aktualizuje nam stan.
Ponieważ ten stan się aktualizuje to komputer property w reakcie to będzie
zauważ każde property i każda nasza tutaj stała czy zmienna, która jest
aktualizowana na podstawie stanu.
Więc jeżeli mamy coś tutaj jako dane, które korzysta właśnie z tego jaki jest
aktualny stan rzeczy i wiemy, że jeżeli ten stan się zmieni, to ta funkcja wywoła
się ponownie, więc ten filtr znowu wywoła się ponownie, to to wystarcza.
Częstym błędem początkujących jest właśnie próba przeniesienia People jako stan.
Dlatego, że zmienia się ta tablica, nie musimy jej zmieniać, nie musimy
jej dynamicznie aktualizować.
Zamiast tego chcemy użyć programowania funkcyjnego, które pozwoli nam przeliczyć
wartość tej tablicy, przeliczyć tą tablicę za każdym jednym razem,
jeśli zmieni się stan.
I to jest rozwiązanie naszego zadania.