Nowoczesny React: Składnia JSX
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.
Zobaczmy więc jak działa JSX.
Ja utworzę sobie przykładowy plik.
Będzie to plik HTML, w którym muszę załączyć dodatkowo kilka elementów.
Przede wszystkim będziemy potrzebować Reacta.
Możemy sobie go pożyczyć np.
Z tego rozwiązania nr 5.
Będziemy potrzebować Type Module tutaj i skryptu i zaimportowania biblioteki React.
I teraz, jeśli chcemy zobaczyć jak to działa, potrzebujemy wyrenderować
sobie coś chociażby na Document Body.
Aktualnie gdybyśmy założyli, że Out of the box JSX będzie działać, to znaczy, że
jeśli tylko uruchomię sobie ten przykład na przeglądarce.
Podejrzę to sobie na przykład klikając F12.
Tutaj na konsoli mamy coś takiego jak Container is not defined.
Ok, ale być może mogę sobie tutaj od razu zrobić div.
Helloł i założyć, że to będzie działać.
Wiemy już z poprzedniego przykładu, że niestety tak to nie funkcjonuje, dlatego,
że nasza przeglądarka i w ogóle JavaScript nie ma pojęcia o tym co chcemy zrobić.
Nie ma pojęcia o tej składni, o tej składni, którą mamy tutaj.
Składnia, która nazywa się JSX, inaczej JavaScript XML.
Przeglądarka nie zna jej natywnie.
Zamiast tego potrzebujemy podpiąć sobie Compiler jakim jest Bubblejs i
wykorzystamy do tego wersje standalone.
Czyli tak jakbyśmy chcieli doinstalować sobie standalone, a wiedzielibyśmy, że
wrzucamy to sobie właśnie za pomocą takiego skryptu.
A tutaj ten nasz skrypt zmieniamy tak, aby to był tekst Bubble jako
type i data type jako moduł. Czyli type.
Tu mamy tekst Bubble data type Module i wtedy właśnie ten compiler JavaScriptowy
jest w stanie podnieść ten skrypt, który mamy tutaj i zamienić to div div.
No właśnie na co?
Jak to się dzieje, że to div?
DIV faktycznie działa?
Można to sobie podejrzeć właśnie wykorzystując stronę
bubble JS i to w try out.
Jeżeli tutaj sobie to zaznaczymy to wejdziemy w tak zwane REPL, czyli
read I will print loop dla bubble JS.
No i wklejając tego diva widzimy dokładnie co się dzieje.
Mamy tutaj coś takiego jak React JS Runtime i tutaj jak gdyby element, który
tak naprawdę jest kreowany w momencie, gdy my wpisujemy coś takiego.
Podobnie możemy to zobaczyć na przykład na stronie TypeScript lang.
org, gdzie w Playground ie zobaczymy dużo bliższy temu, co do tej pory
widzieliśmy, kawałek kodu.
Jeżeli wrzucimy sobie JSX a tutaj, to po prostu jest to równoznaczne z React.
CreateElement dev null. Hello!
Czyli generalnie nie mamy żadnego obiektu konfiguracji dlatego, że ten
div nie ma chociażby klasy.
Gdyby tą klasę sobie dodać jako classname i tutaj wrzucić test.
Zauważymy, że jest to dodawane tutaj w tym miejscu jako ClassName test.
I innerHTML czy też innerText będzie dodany jako Hello.
W takim układzie widzisz, że JSX to trochę taki matrix w którym żyjemy i wydaje nam
się, że ten zapis spowoduje właśnie czy też jest zapisem żywcem wyciągniętym z
HTMLa i powoduje powstanie właśnie takiego node'a htmlowego.
Tak w istocie się dzieje.
Natomiast faktycznie jest to obiekt JavaScriptowy.
Nie ma w tym nic innego poza obiektem JavaScript'owym, jednak potrzebujemy
Compilera, żeby przeglądarka to zrozumiała.
Zarówno Babel JS, jak i TypeScript rozumieją składnię JSX.
Wynika to chociażby z konfiguracji, gdzie widzimy w jaki sposób możemy nawet
zmieniać tutaj korzystając właśnie z TypeScripta konfiguracje, gdzie będziemy
mieli chociażby użycie tego React JSX Runtime, gdzie mamy właśnie podejście
Classname tutaj razem z children, więc te dwa kompilery potrafią
zrozumieć składnię JSX.
Nie są to jedyne dwa komputery, które to potrafią.
Ta składnia weszła na dobre do środowiska Web dev i React znowu nie jest jedynym,
który korzysta właśnie z tej składni.
JS Tak jak widzisz, składnia JSX to po prostu pewna warstwa abstrakcji, która
pozwoli nam na bardzo łatwe komponowanie widoków.
Element JSX możesz zapisać jako referencję.
To znaczy możemy tutaj mieć coś takiego jak const my div
i wtedy sobie to wpisać w ten sposób.
Zauważ, że nie używamy słowa kluczowego class, zamiast tego będzie to className.
Czyli chcemy tutaj użyć czegoś takiego jak ClassName.
Gdybyśmy chcieli coś wpisać, wtedy analizując sobie tą strukturę, którą tutaj
mamy możemy zauważyć, że mamy class T i Hello.
Tutaj powinniśmy mieć test, ale tuż po odświeżeniu powinno właśnie tak być.
Mamy klasę test i tutaj hello wpisane.
Czyli to jest jak gdyby zobacz kompilowane do właśnie postaci elementu
javascriptowego, a później osadzane na dom tak jak byśmy chcieli, czyli po
prostu element natywny z document. CreateElement.
To jest finalna wersja, która zostaje osadzona na dom i mamy tutaj class Test.
Dodatkowo możemy wykorzystać własności JS i na przykład gdybyśmy chcieli tutaj
ewaluować jakiś JavaScript, czyli otworzyć jakieś miejsce na to, żeby cokolwiek
można było tutaj obliczyć np.
30 + 30.
Zauważ, że w wyniku dostaniemy 60.
Czyli generalnie tutaj otwieramy świat JavaScriptu stosując właśnie
zapis z takimi wąsami.
Wtedy możemy tutaj coś JavaScriptowego wrzucić.
Może to być na przykład jeszcze dodatkowo string.
Gdybyśmy chcieli to rozwiązać w ten sposób, to również powinno nam się tutaj
zaktualizować, więc będziemy jeszcze poznawać wszelkie reguły dotyczące.
JSX Natomiast JSX możemy przedstawić albo w takiej postaci, albo możemy to zamknąć
jako funkcja i wtedy nazwać to komponentem.
Jeżeli ten komponent będzie zwracał jakiś JSX w ten sposób, to możemy go osadzić w
taki oto sposób i to dalej powinno nam elegancko działać.
Czyli po prostu w momencie, w którym będziemy mieli funkcję, możemy sobie
zrobić właśnie takiego node'a, który będzie w XML wyglądał w ten sposób, że
będziemy go pisać z dużej litery i możemy tutaj zrobić tak zwanego
self closing taga.
Czyli generalnie nie potrzebujemy drugi raz pisać.
Jeszcze mamy komponent z ukośnikiem, czyli otwierający tag zamykający tag, tak
jak jest w przypadku tego paragrafu.
Tylko możemy ten komponent od razu wrzucić sobie właśnie w ten sposób.
Widzimy, że to elegancko nam tutaj na widoku działa.
Ważna rzecz trzeba pamiętać, że komponenty piszemy zawsze z dużej litery i to już od
razu możemy sobie zobaczyć, dlatego, że jeżeli napiszesz go sobie z małej to
niestety nie zadziała to poprawnie wyrenderuje się, ale niestety taki właśnie
pisany mały komponent my komponent nie do końca to co byśmy chcieli.
Docelowo ten mały komponent tak naprawdę znika z naszego drzewa HTML.
Zauważ.
Mamy go po prostu jako ten JSX, ten element, który zostaje zwrócony właśnie
przez ten komponent w momencie, gdy będziemy go sobie tutaj renderowali.