Szkolenie Front-end dla back-endowców
Poziom
PodstawowyCzas
16h / 2 dniTermin
IndywidualnieCena
IndywidualnieSzkolenie Front-end dla back-endowców
Szkolenie dla programistów back-end, którzy chcą sprawnie poruszać się we współczesnym front-endzie: JavaScript, TypeScript, CSS, narzędzia projektowe i podstawy Reacta. W ciągu 2 dni uczestnicy porządkują kluczowe mechanizmy języka i ekosystemu, konfigurują podstawowe narzędzia, pracują z typowaniem, komponentami, stanem i routingiem oraz poznają praktyki jakości kodu adekwatne do projektów front-endowych.
Dla kogo jest to szkolenie?
Back-endowcy, którzy sporadycznie pracują z front-endem i chcą uporządkować aktualny stack-
Back-endowcy, którzy chcą zrozumieć współczesny front-end: JavaScript, TypeScript, CSS i React
-
Front-endowcy, którzy chcą uzupełnić podstawy TypeScripta, Reacta i narzędzi jakości kodu
Czego się nauczysz na szkoleniu?
- Skonfigurujesz podstawowe środowisko front-endowe z Node.js, npm, bundlerem oraz narzędziami jakości kodu
- Zastosujesz współczesny JavaScript, w tym składnię ES6+, asynchroniczność, moduły, DOM API i kolekcje
- Użyjesz TypeScripta do typowania danych, interfejsów, unii typów i typów generycznych w istniejącym projekcie
- Przygotujesz podstawowe style CSS z użyciem praktycznych technik layoutu, w tym flexboxa i frameworków CSS
- Zbudujesz proste komponenty React, obsłużysz stan, Context, routing oraz podstawowe testy komponentów
Program szkolenia
Dzień 1
Moduł 1: Narzędzia
- Środowisko uruchomieniowe aplikacji front-endowych – Node.js
- Menedżer pakietów, repozytorium zależności i skrypty projektowe – npm
- Problemy zależności, wersjonowania i bezpieczeństwa pakietów npm
- Analiza statyczna, formatowanie i spójność kodu – ESLint, Prettier
- Modularyzacja kodu i organizacja plików projektu
- Bundler aplikacji, konfiguracja zasobów i proces budowania – webpack
- Testy jednostkowe logiki aplikacji – Jest
Moduł 2: JavaScript
- Standard ECMAScript i najważniejsze elementy składni ES6+
- Destrukturyzacja tablic i obiektów, operator spread i praktyczne wzorce użycia
- Deklaracje zmiennych, zakresy i różnice między const, let oraz var
- Pętla zdarzeń, kolejki zadań i model wykonywania kodu – Event Loop
- Kontekst this, wiązanie funkcji i typowe pułapki
- Klasy, dziedziczenie i prototypowy model obiektowy
- DOM API, struktura dokumentu i podstawy Web Components
- Komunikacja HTTP, obsługa odpowiedzi i błędów – fetch, Promise
- Asynchroniczność, przepływ danych i obsługa wyjątków – async/await
- Kolekcje danych, iteracja i dobór struktur: obiekty, tablice, Map, Set
Moduł 3: TypeScript
- Konfiguracja TypeScripta w istniejącym projekcie front-endowym
- Plik konfiguracyjny tsconfig i najważniejsze opcje kompilatora
- Interfejsy, aliasy typów i modelowanie struktur danych
- Typowanie strukturalne, zgodność typów i mechanizm duck typing
- Deklaracje typów dla bibliotek zewnętrznych – @types
- Typy generyczne i wielokrotne użycie definicji typów
- Unie typów, zawężanie typów i bezpieczna obsługa wariantów danych
Dzień 2
Moduł 4: Bezbolesny CSS
- Praktyki pracy z CSS, nazewnictwo klas i organizacja stylów
- Migracja stylów z istniejącej strony i porządkowanie reguł CSS
- Układ elementów, centrowanie i elastyczne rozmieszczenie treści – flexbox
- Frameworki CSS, gotowe komponenty i ograniczenia podejścia narzędziowego
Moduł 5: Frameworki JS
- Ekosystem JavaScript, biblioteki, frameworki i kryteria wyboru narzędzi
- Angular vs. React vs. Vue – różnice architektoniczne i typowe zastosowania
- Dobór narzędzi, antywzorce i ryzyka nadmiernej złożoności
Moduł 6: React
- Struktura projektu React i organizacja katalogów aplikacji
- Komponenty React, kompozycja interfejsu i podział odpowiedzialności
- JSX, wyrażenia JavaScript w widoku i podstawy renderowania
- Rodzaje komponentów i kryteria doboru podejścia
- Ewolucja komponentów: funkcje, klasy, hooks i współczesne praktyki React
- Testy komponentu, scenariusze interakcji i podstawowa weryfikacja zachowania
- Cykl życia komponentu i efekty uboczne w aplikacji
- Stan komponentu a stan aplikacji, przepływ danych i granice odpowiedzialności
- Context jako mechanizm współdzielenia danych w drzewie komponentów
- Router, nawigacja i struktura widoków aplikacji
