Nowoczesny React: Przygotowanie szkieletu projektu
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.
Podczas tego kursu przygotujemy sobie taką oto aplikację Secret Gift Giver.
Coś jak Secret Santa.
Tutaj taki prototypik, żebyś zobaczył jak to będzie wyglądało.
Możemy sobie wybrać kilka osób.
Dopiero jak wybierzemy przynajmniej dwie to możemy rozpocząć party i wtedy tutaj na
stronie Exchange będziemy mieli po prostu listę, kto komu kupuje prezent.
Zrobimy więc coś praktycznego.
Będzie tutaj też wyszukiwarka.
Możemy sobie wyszukać daną osobę na liście.
Możemy zaznaczyć kilka osób i rozpocząć party.
Wtedy losowane zostaną te pary, które kupują sobie prezent.
I w ten oto sposób zrobimy sobie taką praktyczną aplikację.
Wykorzystamy sobie React bez potrzeby zapisywania tego stanu
gdzieś na backendzie.
Będziemy mieli małą apkę, która może Ci się paradoksalnie przydać przy jakimś
przyjęciu przy najbliższej okazji.
Zobaczmy to, co będziemy tutaj robić, to wykorzystamy sobie bulmę
jako właśnie CSS Framework.
Czyli Bulma będzie dostarczała nam te piękne widoki.
Tak sobie złożymy tutaj z komponentów filmowych Elementy dodatkowo użyjemy
Wita jako next generation front end.
To właśnie to rozwiązanie wygeneruje nam efekt tego projektu i będzie
nam do tego potrzebny.
NPM Będzie nam do tego potrzebny NodeJS, czyli jeszcze raz to co było w
konfiguracji środowiska pracy.
Jeśli zainstalujesz NodeJS to powinien razem z NodeJS przyjść npm i tutaj na
Vicie w Get Started będziemy mieli informację jak sobie właśnie rozpocząć,
jak sobie foldować pierwszy projekt VID Mamy tutaj npm Create vid.
Możemy pominąć to latest.
Zawsze powinno być latest i jeśli zrobimy tylko npm create vid.
Nie mniej przekopijmy sobie dokładnie takie polecenie.
I tutaj w terminalu możemy sobie uruchomić tą komendę.
Terminal jest też dostępny w Visual Studio kodzie, to znaczy Visual Studio kodzie.
Możemy sobie otworzyć terminal i tam uruchomić tą komendę.
Tutaj oczywiście chcemy iść dalej, czyli po prostu klikamy Yes.
Zauważ, że jest pytanie pierwsze o nazwę naszego projektu.
Tutaj zróbmy sobie to po prostu jako secrets gift give.
Nazwa może być tutaj dowolna. To Twoja decyzja.
Może być Secret Santa.
Ja mam Secret Gift Giver i tutaj muszę sobie strzałeczkami wybrać,
że chcę używać Reacta.
Patrzę vid nie jest jakby tylko i wyłącznie zespolony z Reactem możemy
używać sobie innych frameworków, natomiast chcemy uczyć się Reacta i jak gdyby
ta aplikacja jest pretekstem do tego.
Więc wybieramy React i tutaj JavaScript albo JavaScript z SFC.
Tak naprawdę możesz wybrać taką opcję, jaką chcesz, dlatego, że i JavaScript
i JavaScript z SFC będzie poprawne.
SVC na pewno będzie szybsze dlatego, że to jest specjalnego typu compiler, między
innymi realizujący pewne zadania też skompilowania JSX.
Ja wybieram JavaScript i to jest nasz gotowy projekt.
On powinien nam się tutaj pokazać.
Ja akurat wygenerowałem go w React Basics, więc to tutaj właśnie w React Basics
będziemy mieli folder secret gift giwery i teraz warto by sobie było to
uruchomić jako osobny projekt.
Zobacz, że tutaj powstał cały z projektu.
Za chwilę pokażę Ci jak z tego korzystać.
Najistotniejsza rzecz dla nas jest taka, że tutaj to npm create.
To polecenie powinno działać, jeżeli na pewno działa Ci node i npm.
Jeśli te rzeczy działają tutaj powinniśmy zobaczyć właśnie wersję i node'a i npm, a
jeśli npm działa to polecenie powinno wykonać się prawidłowo.
Wtedy określamy sobie nazwę naszego projektu.
Wybieramy React i JavaScript.
To nie zostanie domyślnie zainstalowane.
Czyli tutaj jeszcze czeka nas polecenie npm install i npm run dev,
żeby cokolwiek zobaczyć.
Ja zacznę od tego, że otworzę sobie to jako osobny projekt.
Tak więc tutaj z menu wybieramy sobie Open i w React Basic wybieram Secret Giver,
tak, żeby to zostało otwarte jako nowy projekt.
W momencie otwarcia projektu Tutaj na Web Store w IntelliJ u dostaniemy taki monitor
zainstalowanie wszystkich dependencies.
Możemy to zrobić właśnie z tego miejsca, ale ja chcę, żebyś poznał komendę npm
install, ponieważ ta komenda będzie działała niezależnie od tego, w jakim
środowisku sobie to uruchomimy, niezależnie od naszego edytora kodu.
NPM install w skrócie npm I tak to możemy zrobić.
Wtedy zainstaluje się cały ten nasz project i będziemy mieli node.
Modules to jest charakterystyczny folder, który pojawia się w momencie,
gdy projekt jest zainstalowany.
Projekt instaluje się na bazie tych dependencies, które mamy tutaj, czyli
dependencies, React, React, Dom.
Zobacz, że to są te biblioteki, które już mniej więcej poznaliśmy,
zobaczyliśmy je w akcji.
No i mamy dev dependencies razem z Vitem.
Zadaniem Wita będzie budowanie naszego projektu i wystawianie nam
odpowiedniego serwera deweloperskiego.
I ten serwer deweloperski będzie w stanie po prostu bardzo szybko
pokazać nam efekty działania.
Czyli będziemy mieli ten sam development Experience, który mieliśmy korzystając z
tych przykładów w momencie, gdy wyświetlaliście je albo na live serwerze,
albo gdy wyświetlały się właśnie tutaj, korzystając z podglądu HTML.
Tutaj pojawia się node modules.
Możemy teraz zauważyć sobie, że jeżeli wybudujemy tą wersję, zobaczymy właśnie
wszystkie pliki produkcyjne i od tego sobie zaczniemy.
Czyli ta komenda build byłaby odpowiednia.
Możemy sobie to zrobić poleceniem npm run, czyli wszystkie te skrypty, które
tutaj mamy dev build preview.
Je można zrobić jedną komendą.
NPM run, tylko trzeba podać odpowiednią nazwę.
Warto znać tą komendę npm run, żeby wylistować sobie
wszystkie skrypty i tutaj.
NPM run build.
Zróbmy sobie tą komendę build i zobaczmy co tak naprawdę się stanie.
Ja pokazuję Ci to troszeczkę od drugiej strony, ponieważ to jest komenda, którą
powinniśmy użyć tak naprawdę na sam koniec, w momencie gdy
budowalibyśmy produkcję.
Ja natomiast w kontekście tego jak osadzamy sobie React na stronie, chcę
uzupełnić Twoją wiedzę właśnie o to.
I dlatego potrzebujemy zobaczyć tą wersję produkcyjną.
Przede wszystkim to co się tutaj dzieje to mamy katalog src.
I w tym katalogu src będą mieszkały wszystkie nasze pliki źródłowe.
Zwróć uwagę, że mamy tutaj plik taki jak na przykład main, jsx i app jsx.
Ten main jsx jest głównym plikiem.
Natomiast indexhtml to jest to co osadza nam stronę.
Zwróć uwagę, że mamy tutaj tylko id root.
I gdybyśmy teraz chcieli się zagłębić w to co się dzieje, będziemy mieli tutaj main
JSX, które tak naprawdę osadza nam React na stronie.
Tu będzie kawałek kodu, który już znasz.
Czyli mamy React dom, który jest zaimportowany jako React Dom Client.
Mamy Create root.
Zwróć uwagę, że moglibyśmy sobie to zrobić w ten sposób.
To jest ten jak gdyby znany przez Ciebie motyw.
Czyli mamy tutaj create root, który sobie wyprowadzamy i getElementById.
I w tym momencie, gdybyśmy chcieli podejrzeć sobie jak to działa, możemy użyć
innego skryptu, który nazywa się dev, czyli tutaj to by było wystawienie serwera
developerskiego, tak żebyśmy mogli podejrzeć jak działa ta aplikacja.
My natomiast zrobimy inną rzecz.
Chcemy sobie zobaczyć, jaka jest różnica między wersją produkcyjną
a tym, co mamy tutaj.
Zwróć uwagę, że React osadzi się na rucie, czyli mamy tutaj getElementById root i
ten root to jest dokładnie to diff id.
Czyli generalnie HTML nie robi absolutnie nic.
Na naszej stronie wszystko jest osadzane tutaj reactem i cała strona
buduje się w ten sposób w liście.
Jeżeli podejdziemy sobie assety to zauważysz, że cały nasz kod został
spakowany do jednego index JSx.
Pomimo tego, że mamy tutaj main JS i importujemy inne pliki.
To znaczy zobacz, że app JSX to jest zupełnie inny komponent.
To jest function app, gdzie mamy export default app i tutaj jak gdyby
mamy dostęp do komponentu.
Tu już jest znany nam JSX i to jest SingleFileComponent, który tutaj mamy.
Dodatkowo można zauważyć, że poza tym, że w ten sposób są importowane elementy i
możemy przejść sobie jak po sznurku, to tak samo CSS, który jest importowany tutaj
jako index CSS i w AP mamy zaimportowane AP.
CSS jest jak gdyby produkcyjnie tylko jednym plikiem CSS.
Dzieje się tak dlatego, że tworzy się tak zwany bundle i ten bundle ma wszystko,
co potrzebujemy na produkcji.
To znaczy gdybyśmy chcieli faktycznie dołączyć React na naszą stronę, to super
by było mieć właśnie go w takiej zobacz zmumifikowanej wersji.
Czyli mamy tutaj React Production min.
JS Ta produkcyjna wersja zostaje dołączona.
Mamy tutaj cały framework.
Mamy tutaj wszystkie nasze widoki, które mamy do tej pory.
To wszystko jest po prostu wrzucone do jednego pliku JS.
Teraz bardzo ciekawą rzeczą są te hashe, które mamy tutaj.
Można je porównać do hex pliku.
Chodzi o to, że jeżeli cokolwiek zmienimy w naszej aplikacji, to te sumy się zmienią
w zależności od tego, co będziemy edytować.
Zwróć uwagę, że jedyną rzeczą, która nie dostaje tego hasha jest
index HTML i weightsvg.
To się dzieje dlatego, że dowolny plik, który umieścisz w public, nie będzie miał
tej sumy i dowolny plik, który wrzucisz tutaj, niezależnie od tego, jakie ma
rozszerzenie i czy jest to plik graficzny, zostanie dostarczony do DiST.
Właśnie tutaj, na szczycie tego katalogu.
Co za tym idzie, każdy z tych plików można zaimportować właśnie w ten
sposób, który widać w JSX.
Jeśli otworzymy apt jsx zauważysz, że wid svg jest zaimportowany, ale ten import
jest po prostu importem absolutnym.
Czyli generalnie zaczynamy od ścieżki początkowej.
Tak naprawdę można sobie wyobrazić, że zaczynamy od takiego dista.
Tak właśnie.
Każdy element, który masz w public można zaimportować w ten sposób i
on nie dostanie tych hashy.
Ok, po co one są w takim wypadku?
Po co mi te hashe?
Zwróć uwagę, że tutaj jest importowany z assetów, czyli tutaj mamy assets.
Importujemy React.
SVG i React.
SVG dostaje tego hasha dlatego, że jest zaimportowany tutaj i nie spełnia
tego warunku, czyli nie jest w pliku.
Skoro nie jest w pliku to dostanie hashe.
Można to bezpośrednio użyć na widoku, więc zobacz tak, będziemy używać
pliki graficzne na widokach.
Jeśli mamy img src to możemy to bezpośrednio zaimportować, wkleić sobie do
naszego JSXa i to powinno już działać właśnie w ten sposób.
Zamiast ścieżki do tego pliku używamy tego pliku zaimportowanego.
To co jest tutaj w ogóle niepojęte to to, że importujemy sobie pliki,
które nie są JavaScriptem.
O ile zauważamy, że wszystkie pliki, które mają JSX muszą mieć rozszerzenie JSX.
Czyli zauważ, że za każdym razem jak będziesz używać JSX, czyli mamy to w
środku pliku, będzie potrzeba użyć właśnie takiego rozwiązania.
I będzie to zawsze dlatego, że dajemy informację Compilerowi,
że uwaga, uwaga w tym pliku jest JSx, więc musisz to przepuścić przez Compiler.
Czyli generalnie będziemy chcieli właśnie jednoznacznie wskazywać te
pliki, w których mamy JSXa.
Ale z drugiej strony pozostałe pliki takie jak SVG, takie jak CSS, jakim cudem są one
importowane do plików JavaScript'owych? No właśnie.
Tu za wszystkim stoi bundler, czyli to urządzenie to narzędzie,
które finalnie robi produkcję.
Witt używa dwa rodzaje bundlerów.
Nie musimy o tym wiedzieć.
Ale, ale jest dobrze zdawać sobie sprawę, że SBuild jest używany developersko,
natomiast produkcyjnie używany jest rollup.
SBuild przyspiesza znacznie działanie naszej aplikacji.
W momencie gdy wystawimy ten serwer deweloperski, możesz ten serwer
deweloperski zobaczyć sobie komendą npm run dev.
I w ten sposób będziemy uruchamiali właśnie nasz projekt.
Domyślnie on otworzy się na porcie 5.1 7 może być u Ciebie 3, bo
to jest domyślny port.
Natomiast u mnie ten port był zajęty, dlatego zostało to wystawione na innym
porcie Wtedy możemy sobie zobaczyć właśnie pod tym adresem tą naszą aplikację.
Widzimy, że tutaj już coś nam działa.
Jest to wypełnione jakimiś elementami, które mają nam zaprezentować
jak działa React.
My te elementy oczywiście sobie pousuwamy, dlatego, że nie będą nam potrzebne
i dołączymy sobie do projektu.
Natomiast te hashe, które tutaj mamy, one odpowiadają za casting przeglądarki.
To znaczy, że każda rzecz, która jest zaimportowana w ten sposób poza rzeczami z
public, będzie w przypadku, gdy się zmieni.
Czyli na przykład jeżeli to React SVG podmienimy na zupełnie inne React.
SVG, które będzie się różniło chociażby jedną tutaj cyferką,
chociażby jednym dodatkowym czymkolwiek, to wtedy ten hash się zmieni.
Oznacza to dla przeglądarki, że jakiś element się zmienił i musi go
ponownie jak gdyby zaserwować.
Nie może go zaserwować z Casha, więc hash przeglądarki sprawia, że te elementy Będą
pobierane tylko jednorazowo w momencie, gdy pierwszy raz wejdziemy na stronę.
Później natomiast, gdy użytkownik wchodzi kolejny i kolejny raz na stronę,
dostaje te same elementy.
No chyba, że byłaby taka sytuacja, że w naszym index HTML produkcyjnym zmieniłaby
się ta nazwa, Jeżeli ta nazwa się zmieni, czyli coś dodamy do naszej aplikacji, no
to jakby będziemy widzieć te zmiany w nowej wersji.
I właśnie po to są te znaczki.
W tym układzie widzisz jak działa NodeJS, ponieważ to NodeJS jest nam
potrzebny do tego, żeby zbudować wersję produkcyjną aplikacji React.
Natomiast później nie potrzebujemy totalnie Node'a.
Gdybyśmy dalej chcieli robić wszyściuteńko frontend, nie robimy tutaj full
stack, a robimy tylko sam frontend.
Samo podejście frontendowe, czyli aplikacje typu SPA.
Gdybyśmy chcieli to dalej kontynuować właśnie w ten sposób, a tak będziemy robić
na tym szkoleniu, to finalnie potrzebujemy czystego serwera HTTP, żeby
osadzić naszą wersję produkcyjną.