0:00 / 0:00

Nowoczesny React: Konfiguracja środowiska pracy

od Podstaw

5 godz. 59 min · ReactJS · Full-stack i Programowanie

Michał Jabłoński

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

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.