Kurs JavaScript i React (Frontend Developer) K-JS

Wersja podstawowa

---

1. Postawy budowy stron – HTML, CSS, model DOM

• Co to jest znacznik (tag)?
• Organizacja elementów strony
• Selektory tagów – class vs. element vs. id
• Semantyka HTML5 – drzewo DOM
• Podstawowe “tips and tricks” HTML5

2. Wstęp do JavaScript

• VanillaJS vs inne frameworki
• Struktury danych
• Zmienne, pętle, warunki
• OOP – Programowanie Obiektowe
• Semantyka standardów ES5 vs. ES6
• Funkcje, klasy, obiekty
• Przechowywanie danych (JSON, XML)

3. JavaScript – praktycznie

• Animacje, manipulacje stroną (DOM)
• Tworzenie modali (okien dialogowych)
• Różne sposoby przechowywania danych na stronie (storages, cookies)
• Walidacja formularza
• biblioteka jQuery oraz jQueryUI
• Prosta aplikacja SPA (Single Page Application)

4. JavaScript – od kuchni

• Podstawy protokołu HTTP – jak działają strony?
• Czym jest DNS?
• Czym jest CDN?
• Technologia AJAX
• Przygotowanie środowiska do pracy – Node.js
• Jak instalować moduły? Przydatne polecenia Node.js

5. JavaScript – piszemy frontend do prostego bloga

• REST – komunikacja z backendem
• Dynamiczne ładowanie treści – bez przeładowywania strony
• Dodawanie nowych postów
• Wyświetlanie postów
• Edycja postów
• Dodawanie komentarzy
• Usuwanie komentarzy

6. 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

Wersja XL - dodatkowe tematy

---

7. 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

8. Node.JS

• Mechanizmy Node.JS (stream, buffer)
• Moduł FS – edycja/odczyt/zapis do plików
• Moduł HTTP – konfigurowanie własnego serwera

9. 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

10. Zaawansowany JavaScript

• Mechanizm closure
• Wykorzystanie this
• Programowanie funkcyjne
• Programowanie klasowe

11. 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

12. 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

13. Praca z dodatkowymi modułami

• Wprowadzenie do Jamstack
• Konfiguracja i wykorzystywanie zewnętrznych bibliotek (Hubspot, FaunaDB, Firebase, Netlify forms)

14. 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)

15. Tworzenie aplikacji – Warsztat

• Stworzenie aplikacji przy użyciu Next.JS + Storyblok + Netlify
• Stworzenie aplikacji przy użyciu Next.JS + Firebase + Vercel