Nowoczesny React: Elementy i reguły 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.
Na przykładzie tego komponentu Header warto jest omówić sobie
zasady panujące w JSX.
Żeby to zrobić, dobrze jest otworzyć narzędzia deweloperskie.
Tutaj w konsoli zawsze będziesz mieć informację, jeśli runtime
owo coś nam nie działa.
Pierwsza rzecz to już jest zapisane useClassName instead of class.
Więc tutaj mamy zawsze napisclassName.
Jeśli napiszemy to jako class nie jest to aż taki problem, ale zwróć uwagę, że
będziemy mieli warning invalid property classClassName tutaj na React Refresh,
więc widzimy, że jak gdyby ten zapis nie jest do końca prawidłowy.
I tutaj pilnuje nas S.
Linds Lindt.
Jest jeszcze jednym narzędziem, które jest skonfigurowane tutaj w całym naszym
projekcie i to jest bardzo dobra rzecz dla nas, dlatego, że jest on
skonfigurowany pod React.
Zawiera w sobie pluginy, które będą proponowały nam i wyłapywały pewne błędy
związane czy to z seksem, czy to rekomendowanym przez React sposobem
pisania naszych elementów aplikacji, czy z React Hooks.
W takim układzie tutaj klient nas bardzo słusznie łapie i
powinniśmy użyć ClassName.
To już wiemy co dalej.
Jeśli chodzi o JSX to możesz mieć tylko jeden root element w takim właśnie hanku
JSx w takim wycinku, którym będzie chociażby komponent.
Czyli musi być zawsze jeden root element.
Zwróć uwagę, że jeżeli tutaj zrobię sobie hello to nie zostanie nawet wyświetlone
dlatego, że już React Bubble tutaj zawita.
Ten plugin, który jest wszczepiony, który będzie kompilował naszego JSXa.
Wyłapie błąd.
Nie możesz mieć dwóch elementów obok siebie.
Jeżeli jest taka sytuacja muszą być zapakowane chociażby w JSX.
Fragment. Czym jest JSX?
Fragment.
Cóż, standardowo developerzy radzą sobie z tym problemem, opakowując jak Gdyby te
dwa elementy w jeden i robiąc z tego diva.
I teraz zwróć uwagę, że to hello jest tutaj.
Ale jak przeanalizujemy sobie dom Tree, to mamy tutaj jednego
niepotrzebnego diva dodatkowo.
No i może być tak, że to nam kompletnie nie przeszkadza.
Ten div będzie ok.
Natomiast w momencie, w którym nie chcemy generować jakiegoś dodatkowego wrappera, a
mimo wszystko chcemy spełniać te wymogi JSX możemy użyć tak zwanego JS.
Fragment.
Czyli jeżeli skasujemy tą nazwę, zrobimy tutaj po prostu taki pusty element
i puste zamknięcie elementu.
Zobacz, że nie jest generowany żaden dodatkowy element, żaden dodatkowy wrapper
właśnie naokoło tego section i tego paragrafu.
Zamiast tego po prostu z jednej strony spełniamy te warunki, a z drugiej strony
nie mamy dodatkowego elementu, który opakowuje to już w runtime już na Dom
Tree, czyli tutaj mamy ten nasz punkt drugi, jeden element, który
musi opakowywać pozostałe.
Nie możemy mieć elementów obok siebie, musimy mieć jeden root element.
Mogłoby nam przyjść do głowy, że chcemy pokolorować.
Exchange gifts for your collect, czyli na przykład tutaj dorzucić jakiś inline
style, czyli zamiast className mielibyśmy tutaj style.
I chociażby zmienili sobie background color.
Chcemy to sobie zrobić standardowo, tak jak byśmy to robili w klasycznym HTML i
CSS, czyli tutaj na przykład background color white.
Zauważ, że teraz jak gdyby znika nam cały widok i na konsoli mamy
informację dlaczego.
Pewnego rodzaju errory są runtime owe, dlatego zobaczysz je tylko na konsoli.
Nie ma tego overlaya, który był tutaj, który zaproponował nam Void dlatego, że
ten błąd nie został wychwycony przez Compiler.
On zostaje wychwycony później.
I tutaj mamy informację de style prop musi być mapowane na obiekt.
Pamiętaj, że tutaj siedzimy w Matrixie.
To nie jest zwykły HTML, to jest JSX i ten JSX jest po prostu obiektami.
Więc obiektowy sposób zapisania styli znajdziemy na chociażby na MDN.
Widzimy więc, że możemy tutaj stosować style jako obiekty.
Czyli na przykład tutaj. Margin right.
I dodajemy spacing.
Plusem w takim układzie musi to być obiekt i musi to być obiekt taki,
jakbyśmy zrobili w JavaScripcie.
Wygląda to następująco, że tutaj pierwsza rzecz, którą chcemy zrobić to chcemy
to sobie wyliczyć na jakiejś podstawie.
A druga sprawa, czyli używamy nawiasów cząsteczkowych, a później.
Druga sprawa to wrzucamy sobie tutaj obiekt.
I tym obiektem będzie na przykład Background color.
Czyli mamy obiekt, który ma property background color.
I tutaj jeśli dodamy white, zobacz, że jesteśmy w stanie
kontrolować właśnie styl.
Więc kolejna zasada to jest style is always an object,
więc możemy sobie tutaj modyfikować dowolnie ten obiekt, dodawać mu kolejnych
kolejnych property, takich jak na przykład border radius.
Musimy tylko pamiętać o zapisie w stylu PascalCase.
Widzimy, że ten border radius będzie się tutaj nam zmieniał i możemy go sobie
zdefiniować właśnie jako zapis string albo wartości procentowej, albo wartości
pikselowej, tak jak teraz tutaj.
Możemy też dodać sobie padding.
Ten padding możemy dodać na przykład za pomocą bulmy.
To by było wclassname albo możemy ten padding dodać sobie tutaj.
Dodatkowo jeśli chodzi o padding jako style.
Kolejną zasadą jest PascalCase, jeśli chodzi o komponenty.
Gdybyśmy zdefiniowali tu sobie inny komponent, ponieważ możemy to zrobić
function Hello world i tutaj return Hello, to możemy go oczywiście użyć tutaj.
Czyli zauważ, że zamiast tego paragrafu moglibyśmy użyć sobie komponent.
Wszystko jest w porządku.
Mamy tutaj hello z wykrzyknikiem.
Widzimy, że to wszystko elegancko nam działa.
Pamiętaj, że te błędy, które mamy tutaj je trzeba co jakiś czas czyścić,
dlatego, że możesz się pomylić.
To znaczy, ponieważ mamy tutaj dostępny hotmodule replacement.
W momencie, gdy ja coś zmieniam i dodaję, poprawiam tak jak tutaj.
Te błędy zostają dlatego, że strona się nie odświeża.
Gdybyśmy odświeżyli stronę, to wtedy zobaczymy, że te błędy znikają.
One już nie mają miejsca.
Pamiętaj proszę o tym, że jakieś błędy, które widzisz tutaj na konsoli
mogą być już nieaktualne.
Mogły być w momencie, w którym coś pisaliśmy.
Natomiast w momencie, gdy to poprawiamy, one tutaj dalej mogą istnieć, dlatego, że
mamy bardzo wydajny, tak zwany hot mod replacement, czyli bez przeładowania
strony podmieniane są tylko te elementy, które powinny zostać podmienione
w momencie, gdy je aktualizujemy.
Wyobraźmy sobie, że Hello World troszeczkę modyfikujemy i zaczynamy z małej litery,
czyli robimy sobie Hello world w ten sposób.
Zwróć uwagę, że mamy od razu informację, że używamy in correct casting i powinniśmy
użyć PascalCase for React Components.
Jeżeli nie użyjemy tego PascalCase, efekty są opłakane, dlatego, że nie
widzimy wartości tego komponentu.
Czyli to nie jest już tak, że mamy jakąś regułę?
Jeśli ją pominiemy, no to faktycznie nic takiego wielkiego się nie dzieje.
Tu jest zupełnie inaczej.
Czyli w odróżnieniu od classclassname, tutaj faktycznie od razu powinniśmy
zastosować PascalCase i jeśli chcemy w ogóle widzieć ten komponent.
Jest to bardzo cenna uwaga, ponieważ pokazuje nam, w jaki sposób
React rozróżnia komponenty.
Zwróć uwagę, że coś takiego jak header istnieje w HTML 5 w
takim układzie skąd JSX?
Skąd React wiedziałby, że chodzi nam o element header, a nie o komponent header?
Czyli gdybyśmy tutaj chcieli na przykład użyć czegoś takiego jak header.
Jest taki element i on jak najbardziej działa.
W takim układzie możemy sobie zobaczyć jak to wygląda tutaj na naszym Domtree.
Zobacz, że works mamy coś takiego jak header.
Jest to coś innego niż head.
Jest to element, który możemy sobie wyświetlić.
No i on tutaj działa.
Ale skąd React ma wiedzieć, że ten header to nie nasz HTMLowy header?
I już widzimy jak to się dzieje.
Po prostu komponent, który jest headerem zawsze będzie pisany PascalCase.
W takim układzie komponenty mogą mieć jedną wyrazową nazwę.
Nie ma w tym żadnego problemu.
Mogą nawet nazwą imitować jakieś elementy, które już istnieją w HTMLu, dlatego, że
zawsze ta nazwa będzie z dużej litery, więc to nie jest to samo.
Header pisany z małej to element, który istnieje w HTML i będzie po prostu jak
gdyby finalnie przetworzony jako header.
Natomiast nasz header pisany z dużej litery będzie komponentem.
Ok, jeszcze zobaczmy sobie co możemy renderować za pomocą JSXa w kontekście
tych elementów, które zostaną pokazane na ekranie albo nie.
Już pokazuję co mam na myśli.
Zwróć uwagę, że gdybyśmy sobie tutaj zapisali 90+10 to wyświetli
nam się elegancko.
No ale co by było, gdybym powiedział Ci, że jeżeli tutaj napiszę sobie
true, to nic się nie pokaże?
Zobacz, że ten div jest teraz pusty.
Nic tutaj totalnie nie mamy.
To samo byłoby, gdybyśmy mieli pustego stringa.
To samo jeśli będzie false.
To samo jeśli będzie undefined i to samo, jeśli będzie null.
Zobaczmy więc, jakie wartości, które faktycznie są obliczane przez JavaScript,
możemy zobaczyć na ekranie, a jakie są po prostu przez JS pomijane.
Ten null zwyczajnie nie zostaje wyrysowany.
I nie chodzi tutaj o wszystkie false values, dlatego, że jeżeli wymyślimy sobie
nana, okazuje się, że Nan będzie pokazany na ekranie.
Co w takim wypadku jest? Co nie jest?
Możemy sobie zrobić taki testowy właśnie kodzik.
Spróbujmy sobie takim znacznikiem HR oddzielać te wartości,
które nie będą wyświetlane.
Zacznijmy sobie od tych, które już sprawdziliśmy i których na pewno nie ma.
Czyli mamy tutaj true.
Zobacz, że nie zostanie to wyświetlone.
Mamy tutaj false.
Mamy tutaj coś takiego jak undefined i na przykład null.
Mamy też pusty string.
Możemy też zrobić pustą tablicę, że Essex obsługuje tablicę.
Nie ma problemu.
Gdyby ta tablica miała na przykład numery 1,2,3 to zobacz, że to już
zostałoby jako tekst mody pokazane.
Czyli nie ma żadnego problemu, żeby zrobić coś takiego w JS.
Czyli jeżeli masz tablicę numerów to to będzie pokazane.
To weźmy to sobie linię niżej.
Widzimy, że te elementy są połączone, czyli nie mamy tutaj przecinków.
Natomiast generalnie, jeżeli to będzie pusta tablica, to nie
zostanie ona wyświetlona.
Więc tu możemy sobie zmodyfikować.
Ja zastosuję tutaj refactor rename, czyli Shift F6 taki skrót i tutaj
What will be render?
Zróbmy sobie właśnie taki komponent do celów naukowych, który pokazuje
nam co zostanie wyrenderowane.
Ale jest jeden błąd.
To znaczy możesz zrobić coś takiego, że chcesz wyrenderować po
prostu pusty obiekt.
I to już skutkuje błędem.
To nie zostanie wyrenderowane.
Objects are not valid.
AS React child.
I tutaj mamy tego typu problem.
Dlaczego Ci to pokazuję?
Żeby zaznajomić się właśnie z tego typu errorami.
Żeby zobaczyć sobie, jak to działa i że po prostu w ten sposób.
Nie jesteśmy w stanie wyświetlić czegoś, co nie jest albo.
Typem prostym, jak widzisz, albo po prostu pustą tablicą.
No albo innym elementem JSX.
Czy jest możliwe tutaj w ten sposób wrzucenie innego elementu JSX?
I to jest w pełni poprawne.
Czyli gdybyśmy tutaj chcieli sobie zrobić.
Właśnie takie properties, które będzie renderowane, które będzie wyliczane.
I to będzie jakiś paragraf.
To wtedy widzimy, że działa to poprawnie.
Będzie wyświetlane po prostu na naszym dom tak jak byśmy chcieli.
Natomiast łącząc te dwie rzeczy.
Możemy tutaj zrobić sobie taki wstęp do conditional renderingu.
Ja go Ci pokażę w bardzo rozwiniętej postaci, później dużo
bardziej zaawansowanej.
Natomiast już teraz możesz sobie wyobrazić, że jeżeli tu jest true i tu
jest false, to można zastosować zapis JavaScriptu właśnie z endem.
Czyli jeżeli lewa strona jest nieprawdą, to po prawej w ogóle nie sprawdzasz,
czyli prawa w ogóle nam się nie wyświetli.
Czyli ten wykrzyknik się teraz nie pokaże, dlatego że tutaj po
lewej stronie mamy false.
Natomiast jeżeli zrobimy to tutaj, czyli mamy true end, to zobacz,
że wykrzyknik dostaniemy.
To jest conditional rendering.
Gdybyś wyobraził sobie, że to true albo false, będzie teraz variable, czyli możemy
to zmieniać w czasie, Będziemy mieli jakiegoś LED, który można sobie
przełączyć struna false false na true.
To właśnie w ten sposób będziemy osiągać tak zwany conditional rendering, czyli
coś, co ma nam się pokazać, ale niekoniecznie musi na ekranie.
Nie jest to jedyny sposób osiągnięcia conditional renderingu, ale będę do tego
wracał, że właśnie stosujemy tutaj tą zasadę, tą regułę, że to ani false, ani
true nie pojawi nam się tutaj na ekranie.
Skoro false się nie pojawia, to JavaScript działa tak, że nie
sprawdzi tej prawej części.
I możesz wierzyć lub nie.
To nie jest żaden dziwaczny zapis, który wymyślił sobie React.
To jest stuprocentowy JavaScript, czyli stuprocentowo w JavaScripcie
taki zapis jest poprawny.
Moglibyśmy to zrobić na konsoli.
Można zrobić coś takiego true i tutaj and 1 i zobaczymy 1.
Natomiast jeżeli zrobię false, to pokaże mi się false, bo jedynka nie
jest totalnie sprawdzana.
Natomiast my już wiemy, że false nie zostanie wyrenderowane, więc jeżeli prawa
część nie jest totalnie sprawdzana, false przedostanie się dalej, nie zostanie
wyrenderowany, to w ten sposób możemy sobie właśnie robić conditional rendering
i skorzystać z tego, że pewne wartości nie będą wyrenderowane w JSX.