Ta lekcja jest w bazie eduweb
Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.
Lekcja 15/ 41Zadanie: Zbuduj własny komponent
Nowoczesny React: Zadanie: Zbuduj własny komponent
Czego 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 - od Podstaw
Według raportu State of JS, React od lat pozostaje najpopularniejszym frontendowym frameworkiem JavaScript. Obecnie stanowi również podstawę dla frameworków takich jak Next.js i React Native, które umożliwiają rozwijanie aplikacji wykraczających poza przeglądarkę. Utrzymująca się popularność i rozwijające się wokół projekty wynikają m.in. z tego, jak bardzo React zmienił się na przestrzeni ostatnich wersji. Dlatego ten kurs wprowadzi Cię w nowoczesny React oraz budowanie frontendowych aplikacji w połączeniu z najnowszymi technikami i najbardziej popularnymi narzędziami.
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.
Kurs Nowoczesny React
8 rozdziałów41 lekcji5h 59min
Wprowadzenie
1h 7min
- Wprowadzenie2min(zablokowana)
- Dlaczego warto zacząć naukę React?5min(zablokowana)
- Konfiguracja środowiska pracy8min(zablokowana)
- Do czego używamy React?21min(zablokowana)
- Składnia JSX8min(zablokowana)
- Sposoby dołączania React do aplikacji web10min(zablokowana)
- Przygotowanie szkieletu projektu14min(zablokowana)
Budowanie widoków
1h 19min
- Pierwszy komponent10min(zablokowana)
- Elementy i reguły JSX14min(zablokowana)
- Props, przekazywanie danych do komponentu10min(zablokowana)
- Renderowanie kolekcji danych6min(zablokowana)
- Renderowanie warunkowe6min(zablokowana)
- Używanie klasy, style i moduły CSS10min(zablokowana)
- Zagnieżdżanie komponentów, kompozycja i PropTypes11min(zablokowana)
- Zadanie: Zbuduj własny komponent11min(zablokowana)
Zmiana stanu i hooks
46min
- Podstawy użycia stanu10min(zablokowana)
- useState dla danych obiektowych7min(zablokowana)
- useEffect i lifecycle komponentu12min(zablokowana)
- Reguły używania hook'ów8min(zablokowana)
- Zadanie: filtrowanie listy elementów9min(zablokowana)
Routing w aplikacji
43min
- Dodanie tablicy routingu7min(zablokowana)
- Nawigowanie pomiędzy widokami - pages4min(zablokowana)
- Dynamiczne parametry routingu, obsługa 4048min(zablokowana)
- Child routing6min(zablokowana)
- Nawigacja w kodzie11min(zablokowana)
- Zadanie: dodaj brakującą stronę7min(zablokowana)
Obsługa formularzy
22min
- Kontrola wartości w input6min(zablokowana)
- Biblioteka Formik6min(zablokowana)
- Walidacja danych formularza6min(zablokowana)
- Zadanie: rozwiń fomularz4min(zablokowana)
Korzystanie z back-end API
35min
- Operacje asynchroniczne w komponentach9min(zablokowana)
- Mock dla back-end API3min(zablokowana)
- Użycie klienta HTTP, zapytania AJAX7min(zablokowana)
- Zadanie: wysyłanie danych na serwer, loading i error state17min(zablokowana)
Narzędzia deweloperskie
29min
- React Dev Tools10min(zablokowana)
- Debugger w WebStorm / Idea11min(zablokowana)
- Debugger w Visual Studio Code8min(zablokowana)
Deployment aplikacji
38min
- Konfiguracja serwera na produkcji - architektura SPA10min(zablokowana)
- Używanie plików .env7min(zablokowana)
- Deployment na Vercel20min(zablokowana)
- Zakończenie1min(zablokowana)
Ten kurs jest w bazie eduweb
Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.
Autor kursu
Bio
Full-Stack Developer specjalizujący się w ekosystemie nowoczesnego JavaScriptu. Swoją karierę zaczynał od ECMAScript 3 oraz Adobe Flash, następnie PHP oraz Java GWT. Obecnie całą swoją uwagę kieruje na technologie takie jak Node.js, React i Angular oraz programowanie funkcyjne i reaktywne. Poza praktycznym doświadczeniem w roli programisty, od lat uczy JavaScriptu na sali szkoleniowej.