Nowoczesny React: Zagnieżdżanie komponentów, kompozycja i PropTypes
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.
Na naszym prototypie widać, że będziemy stosować kilka podstron, czyli mamy np.
List of People i tutaj mamy Exchange.
To Exchange co prawda jeszcze nie działa, ale gdybyśmy chcieli
sobie tutaj to podmieniać.
No widzimy, że będziemy mieli pewien layout strony, gdzie zawsze będzie tytuł.
Jak takie layoutowanie wprowadzić sobie do swojej aplikacji?
Zobaczmy.
Mamy tutaj List of People i chcemy, żeby to List of People było jako tytuł.
Natomiast artykuł no ta część może być dowolna, czyli tutaj możemy sobie
podmieniać różnego rodzaju części.
Chcemy, żeby to było dynamiczne i niezdefiniowane.
Gdybyśmy sobie wymyślili komponent, który nazwalibyśmy page layout, przygotujmy
sobie taki komponent jako JSX file.
Mamy tutaj coś takiego jak page layout i chcielibyśmy teraz wyodrębnić właśnie tą
część, która odpowiada za tytuł, tak żebyśmy mogli ją dostarczyć tutaj, czyli
w tym wypadku będziemy mieli return.
I tutaj dorzucimy sobie właśnie title.
Jeśli wrzucimy tutaj tytuł, chcielibyśmy, żeby on miał domyślnie empty page.
Zastosujmy teraz ten page layout.
Możemy go sobie wrzucić tutaj.
Jak na razie jest to po prostu empty page.
Mamy page layout, który został zaimportowany tutaj, czyli zobacz
mamy Components Page Layout.
W momencie, w którym wrzucimy go w ten sposób mamy empty page.
Chcemy, żeby to było oczywiście list of people i wiemy jak sobie
przekazać ten tytuł.
Mamy tutaj Title List of people.
No i tego już nam nie potrzeba.
Natomiast chcielibyśmy, żeby ten article jak gdyby był komponowany, czyli jak
gdyby wyświetlany przez to page layout.
Możemy to sobie zrobić w ten sposób.
W ten sposób taki zapis jest jak najbardziej poprawny.
Ale zobacz, że nic nam się nie wyświetla.
Czyli chcemy, żeby Page Layout miał swój tytuł i w ten sposób ten komponent będzie
reużywalny, ale poprzez kompozycję.
Chcielibyśmy tutaj sobie dorzucić właśnie ten article i wyświetlić go w ten sposób i
poprzez kompozycję chcemy mieć możliwość edycji pozostałych podstron.
Czyli możesz sobie wyobrazić, że tutaj na przykład jak mamy Exchange.
Tutaj będzie na przykład tytuł Exchange S, no i będziemy mieli po prostu inną stronę,
w której wylistujemy zupełnie inne elementy pokazujące nam, jakie wylosowały
się właśnie grupy tych osób, które dają sobie prezenty, żeby osiągnąć taki efekt.
Jest to niezmiernie łatwe, dlatego, że React jest przygotowany
na tego typu ewentualność.
Zwróć uwagę, że gdybyśmy sprawdzili sobie stronę główną Reacta z dokumentacji, to
tutaj właśnie niżej będziemy mieli taką sytuację, gdzie jeden komponent zawiera w
sobie inny komponent, który zawiera w sobie jeszcze inny komponent.
Właśnie tego typu layout to page layout, który tutaj mamy.
Spróbujmy sobie dorzucić inne części.
Te części nazywają się po prostu Children.
Jeśli zrobimy to w ten sposób, zobacz, że wszystko działa tak jak do tej pory
i pojawia nam się właśnie tutaj.
Czyli cały ten article jest przedstawiony tutaj jako children i w ten sposób mamy
jak gdyby taki slot na ten element, który jest z tej strony.
On będzie wrzucony jako children.
Zobacz, gdybyśmy teraz edytowali to, to mamy page layout, który może
wyświetlić dowolną treść.
Czyli możemy sobie wyobrazić, że inne podstrony będą miały też coś takiego.
Tutaj możesz zapauzować i spróbować przygotować sobie własny komponent, który
będzie reprezentował List of people, czyli nasze people page.
Spróbujmy sobie zrobić cały ten widok jako osobny komponent.
Ja zrobię to stosując zasadę, że będziemy mieli nowy folder nazwany Pages.
I tutaj zrobimy sobie komponent nazwany People page i wtedy
całość tego, co mamy tutaj, czyli tego page layoutu, możemy sobie wrzucić
tutaj do People page eksport function.
I tutaj standardowo.
Możemy sobie zwrócić właśnie ten layout.
Zobacz, że teraz listę osób będziemy mieli w tym miejscu.
Ten panel blog, który sobie zrobiliśmy tutaj możemy sobie przesunąć w to miejsce.
Do tego People page.
Tutaj będziemy też potrzebowali class Names, które możemy zaimportować i tutaj
sprowadzimy to do po prostu People page.
W tym układzie do app JS importujemy People page.
Brakuje nam jeszcze Selected names, które będzie potrzebne
I to selected names było tutaj.
Możemy to przerzucić do People Page tak, żeby naprawić nasz widok.
Pamiętaj, że jeżeli czegoś nie mamy, to powinniśmy szukać błędów
właśnie tutaj na konsoli.
Selected names is not defined.
Tutaj mamy informacje na ten temat, więc people page będzie tutaj.
Natomiast fajnie by było tutaj właśnie jako ten panel blog zrobić sobie
z tego też osobny komponent.
Też moglibyśmy to sobie zawrzeć zupełnie osobno.
Czyli panel blog może dotyczyć właśnie naszego panelu.
Możemy utworzyć sobie nowy komponent, żeby troszeczkę tutaj posprzątać.
W takim wypadku będzie to panel blog i możemy sobie pożyczyć
ten panel blog stąd.
Razem z classNames i wyeksportować mamy tutaj panel Blog i ten panel
blog będzie tutaj zaimportowany.
Zwróć uwagę, że możemy zastosować troszeczkę inne name in convention,
dlatego, że tutaj ewidentnie listujemy sobie people.
To może być people List jako lista wszystkich.
I people list element.
Tak moglibyśmy sobie nazwać te komponenty.
I wtedy jest refaktoryzować.
Jeżeli masz jakieś komponenty ułożone blisko siebie w sensie takim, że jeden
jest parentem, drugi jest childem.
Mogą mieć podobne nazwy jak na przykład.
People list I people list item.
Naprawmy sobie jeszcze jedną rzecz.
Wiemy o tym, że na przykład taki panel blog stosuje tutaj zapisu.
O który krzyczał nam Island.
Czyli brakuje nam tu tak zwanych protips.
Zobacz, jest to biblioteka npm, gdzie możesz sobie to na npm ie
znaleźć jako Proptypes.
I powinniśmy sobie to doinstalować do projektu.
Będzie to wyglądało mniej więcej tak, że jeżeli zrobimy npm install proptypes
dostaniemy wtedy dostęp do tej biblioteki.
Możemy sobie ją zaimportować zgodnie tutaj z dokumentacją.
Import proptypes from proptypes.
I teraz jej zadanie jest następujące zamiast negować, czyli zamiast tutaj
zrobić DisableError dla właśnie slinta, będziemy chcieli wylistować
Proptypes dla tego bloku.
Przykładowo mamy tutaj name'a, który ma być typu string, czyli to
będzie Proptypes string.
Zależy nam tu na tym, żeby zdefiniować jakie propsy przyjmuje dany komponent,
czyli taka jest rola proptypes.
Zwróć uwagę, że jeżeli teraz w panel bloku damy jako name string
wszystko jest w porządku.
Dlatego, że tutaj w PeoplePages mamy ten panel blok i podajemy faktycznie
coś co jest wartością typu string.
Gdybyśmy tutaj podali numerki, będziemy mieli Invalid prop name of type number
supply panel block expected string.
Zwróć uwagę, że teraz podajemy tutaj number I type number is not
a signable to type string.
Widzimy, że elegancko jesteśmy w stanie zdefiniować i możemy to zrobić ze
wszystkimi procesami, czyli na przykład tutaj prop types i będzie to po
prostu jako skrót od boolean.
W tym wypadku nie mamy żadnych aurorów.
Polecam Ci definiowanie tego w ten sposób.
Korzystamy tutaj z reguły JavaScriptowej, że jeżeli mamy export function, czyli to
nie jest air function to typesy mogę sobie dać na samej górze.
Mnie osobiście to bardzo pomaga w projektach, dlatego, że od razu widzisz
jakie propsy są oczekiwane dla danego komponentu i można
właśnie z tego skorzystać.
Bardzo podobnie możemy to zdefiniować dla page Layout Page.
Layout z kolei potrzebuje innych propsów, ponieważ potrzebujemy jeszcze
do tego page layout, które mamy.
Tutaj będziemy potrzebować jeszcze title jako string i hellen.
To oczywiście jeżeli zostawimy Invalid prop children of type Object split
to page layout expected boolean.
Tutaj możemy mieć coś takiego jak React Element i Prop types.
Element da nam tutaj odpowiedź jak sobie to przygotować.
Czyli tutaj wyraźnie widzimy, że page layout będzie jak gdyby spodziewał się,
czy będzie chciał użyć elementów type naszego tytułu ToString, ale możemy
tutaj sobie zawsze dopisać coś takiego jak required.
To trochę bez sensu, jeżeli mamy wartość domyślną, ale moglibyśmy na przykład
zaznaczyć, że to jest required.
W takim wypadku zawsze nasz layout będzie spodziewał się children.
Jeżeli zrobimy sobie tutaj w People Page coś takiego, że to nasze page layout nie
będzie miało żadnych children, dostaniemy The children is as required in
page layout, but it is undefined.
Czyli generalnie możemy sobie też przygotować wartości, które
są wymagane przez dany widok.
Czyli tutaj jeżeli children nie będzie dostarczone, to dostaniemy
informację zwrotną z Proptypes.
Moglibyśmy to też rozegrać w inny sposób.
Moglibyśmy sobie tutaj po prostu dodać jakąś logikę, która obsłuży renderowanie
warunkowe, czyli ten conditional rendering.
Zamiast tego zostawiamy is required.
I dla przypomnienia najistotniejszym elementem, który tutaj sobie zrobiliśmy,
to był właśnie ten page layout, który za pomocą children pozwala nam osadzić to,
co jest tutaj otaczane przez People Page.
Czyli mamy tutaj page layout i otoczone article i ten article.
W Page Layout znajdzie się dokładnie w tym miejscu.
Teraz zauważ, że page Layout jest używany wszędzie tam, gdzie chcemy dołączyć
sobie jakiś komponent page.
Tam będziemy chcieli użyć też page.
Layout pages to osobne komponenty, które będziemy stosować do
komponowania całych widoków.
Czyli spodziewaj się, że w kolejnych lekcjach pojawi się tu na przykład
exchange Page, tak żebyśmy mogli zobaczyć sobie pełny widok dla właśnie
tych wylosowanych list.