Wprowadzenie
Szkolenie ma charakter warsztatowy – ok. 70% czasu to pisanie kodu (Live Coding). Uczestnicy pod okiem trenera budują od podstaw kompletną aplikację. Teoria wprowadzana jest w formie modułów "Just-in-Time" – omawiamy zagadnienie dokładnie w momencie, gdy jest potrzebne do rozwiązania problemu w projekcie. Program może zostać dopasowany do indywidualnych potrzeb Klienta.
Cel szkolenia
Celem szkolenia jest praktyczne nauczenie uczestników budowania kompletnych, responsywnych aplikacji typu SPA. Uczestnicy przejdą przez cały proces: od konfiguracji środowiska Vite, przez logikę biznesową w React, aż po stylowanie i wdrożenie.
Po ukończeniu kursu uczestnik:
• będzie potrafił samodzielnie skonfigurować projekt w oparciu o Vite;
• będzie potrafił stworzyć strukturę komponentową aplikacji i zarządzać jej stanem;
• będzie umiał komunikować się z zewnętrznym API i stylować interfejs z Tailwind CSS.
Adresaci szkolenia
Szkolenie przeznaczone jest dla osób znających HTML/CSS i JavaScript, chcących wejść w świat nowoczesnych frameworków (React), a także dla programistów pracujących w starszych technologiach (jQuery, stary Angular) chcących zaktualizować swój stack. Skorzystają z niego również osoby znające podstawy Reacta, chcące uporządkować wiedzę i poznać Tailwind CSS.
Wymagania wstępne:
• Znajomość HTML5 i CSS3.
• Znajomość podstaw języka JavaScript (ES6+) – rozumienie zmiennych, funkcji i operacji na tablicach.
Czas i forma szkolenia
21 godzin (3 dni x 7 godzin), w tym wykłady i warsztaty praktyczne.
Plan szkolenia
1. Ekosystem i konfiguracja środowiska (Vite)
• Zalety Vite i ESBuild vs CRA, inicjalizacja i struktura katalogów
• Zarządzanie zależnościami i HMR
2. Fundamenty React i myślenie komponentowe
• JSX, Virtual DOM, komponenty funkcyjne i Props
• Renderowanie warunkowe i obsługa list
3. Interaktywność i Stan (React Hooks)
• useState, obsługa zdarzeń i formularze
4. Tailwind CSS – nowoczesne stylowanie
• Filozofia Utility-First, konfiguracja, model pudełkowy i stany interaktywne
5. Layout i Responsywność (RWD)
• Flexbox, Grid, Breakpoints, Navbar i Dark Mode
6. Efekty uboczne i cykl życia
• useEffect, tablica zależności i czyszczenie efektów
7. Komunikacja z API (REST)
• Async/await, Fetch vs Axios, obsługa ładowania i błędów
8. Routing i nawigacja (React Router v6)
• Definiowanie ścieżek, nawigacja bez przeładowania, parametry URL
9. Optymalizacja i Wdrożenie
• Build produkcyjny, analiza kodu, deployment (Vercel/Netlify/GitHub)
10. Warsztat podsumowujący (Mini-Projekt)
