Kurs JavaScript i React (Frontend Developer)

Wersja podstawowa

1. Podstawy budowy stron – HTML, CSS, model DOM
   • Co to jest znacznik (tag)?
   • Organizacja elementów strony
   • Selektory tagów – class, element, id
   • Semantyka HTML5 – drzewo DOM
   • Podstawowe “tips and tricks” HTML5
2. Wstęp do JavaScript
   • Struktury danych
   • Zmienne, pętle, warunki
   • OOP – Programowanie Obiektowe
   • Ewolucja JS i różne wersje, z jakimi można się spotkać: VanillaJS vs TypeScript, standard ECMAScript
   • Składnia ES6+ — funkcje strzałkowe, klasy, moduły
   • Przechowywanie danych (JSON, XML)
3. Narzędzia i środowisko pracy
   • Edytory i środowiska deweloperskie
   • Panel deweloperski w przeglądarkach internetowych
   • Inspekcja i debugowanie stron oraz skryptów
4. Narzędzia AI w pracy programisty
   • Wsparcie w bezpośredniej pracy z kodem – autouzupełnianie, refaktoryzacja, generowanie funkcji – na przykładzie Cursor, GitHub Copillot lub podobnego narzędzia
   • Wykorzystanie modeli językowych do rozwiązywania większych zadań i generowania kodu JS lub HTML – narzędzia typu Claude / Gemini / ChatGPT
   • Granice wykorzystania AI – kwestie bezpieczeństwa i praw autorskich
5. JavaScript – praktycznie
   • Animacje, manipulacje stroną (DOM)
   • Tworzenie modali (okien dialogowych)
   • Przechowywanie danych na stronie (localStorage, cookies)
   • Walidacja formularza
   • Prosta aplikacja SPA (Single Page Application)
6. JavaScript – od kuchni
   • Podstawy protokołu HTTP – jak działają strony?
   • Technologia AJAX i Fetch API
   • Przygotowanie środowiska do pracy – Node.js
   • Jak instalować moduły? Przydatne polecenia npm
7. Przykładowa aplikacja – piszemy frontend do prostego bloga
   • REST – komunikacja z backendem
   • Dynamiczne ładowanie treści
   • Dodawanie nowych postów
   • Wyświetlanie postów
   • Edycja postów
   • Dodawanie i usuwanie komentarzy
8. React
   • Jak zacząć?
   • Tworzenie nowego projektu
   • Struktura projektu
   • Jak działają komponenty?
   • Co składa się na komponent?
   • Jak działa kompilator JSX?
   • Routing
   • Tworzenie kompletnej aplikacji
9. AI w aplikacjach JavaScript – integracja z modelami językowymi
   • Jak działają LLM API — klucze, endpointy, format żądań
   • Łączenie z wybraną usługą OpenAI/Anthropic API — wysyłanie wiadomości, odbieranie odpowiedzi
   • Streaming odpowiedzi — ReadableStream, efekt pisania w UI
   • Przechowywanie historii konwersacji w JS (tablica messages)
   • Ćwiczenie: mini-chatbot na własnej stronie

Wersja XL - dodatkowe tematy

1. Wprowadzenie do kursu + przygotowanie środowiska
   • Konfiguracja środowiska pracy
     • Konfiguracja Edytora Kodu Visual Studio Code
     • Używanie skryptów budujących aplikację
     • Konfiguracja lintera, prettiera
     • Korzystanie z plików .env
     • Podstawy React.JS
     • Postawienie projektu w Next.JS
2. Node.JS
   • Mechanizmy Node.JS (stream, buffer)
   • Moduł FS – edycja/odczyt/zapis do plików
   • Moduł HTTP – konfigurowanie własnego serwera
3. Podstawy GIT
   • Pobieranie repozytoriów
   • Praca z gałęziami w GIT (GIT branches)
   • Rozwiązywanie konfliktów przy łączeniu gałęzi
   • Git Flow i dobre praktyki korzystania z GIT
4. Zaawansowany JavaScript
   • Mechanizm closure
   • Wykorzystanie this
   • Programowanie funkcyjne
   • Programowanie klasowe
5. Asynchroniczność w JavaScripcie
   • Komunikacja Client-Server
   • Rest API
   • GraphQL
   • Uwierzytelnianie z serwerem za pomocą JWT Tokens i Access Tokens
   • Dobre praktyki przy korzystaniu z Promise
6. Zaawansowany React.JS
   • Tworzenie komponentów w React.JS
   • Mechanizmy React.JS – props, state
   • Dobre praktyki korzystania ze stanu aplikacji – React Hooks
   • Kompozycja aplikacji w React.JS
   • Zarządzanie stanem aplikacji za pomocą React.Context
   • Struktura projektów Reactowych
   • Dobre praktyki korzystania z React.JS
7. Praca z dodatkowymi modułami
   • Wprowadzenie do Jamstack
   • Konfiguracja i wykorzystywanie zewnętrznych bibliotek (Hubspot, FaunaDB, Firebase, Netlify forms)
8. Tworzenie aplikacji w Next.JS
   • Zaawansowane funkcje Next.JS – getServerSideProps, getStaticProps, getStaticPaths
   • API Routes za pomocą Next.JS
   • Kompozycja aplikacji Next.JS
   • Deploy aplikacji Next.JS za pomocą Vercel i Netlify
   • Dobre praktyki przy deployu aplikacji (integracja z GIT, env, preview)
9. Tworzenie aplikacji – Warsztat
   • Stworzenie aplikacji przy użyciu Next.JS + Storyblok + Netlify
   • Stworzenie aplikacji przy użyciu Next.JS + Firebase + Vercel