JavaScript i React (Frontend Developer XL)

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

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
• WALIDACJA

Uczestnicy otrzymują autorskie materiały szkoleniowe ALX.

Podane godziny są godzinami zegarowymi.

Szkolenie może podlegać zwolnieniu z podatku VAT w w przypadku gdy udział w usłudze jest finansowany co najmniej w 70% ze środków publicznych.

Czego potrzebujesz do kursu zdalnego?

• • komputer z dostępem do Internetu (zalecana prędkość łącza: min 3 Mbit/s download/upload; całkowicie wystarczające są w szczególności połączenia przez sieć komórkową, oby jedynie były one stabilne - nie zrywające się)
  • przeglądarka internetowa (Chrome, Firefox, Safari, Edge itp.),
  • głośniki lub słuchawki, oraz mikrofon (aby słyszeć i rozmawiać z trenerem oraz innymi uczestnikami szkolenia).

Opcjonalnie:

W miarę posiadania, można też wyposażyć stanowisko pracy w dodatkowy monitor. Jest wtedy możliwość jednoczesnego obserwowania udostępnionego obrazu (na jednym ekranie) i pracy w swoim edytorze/arkuszu/środowisku na drugim ekranie. Jeśli jednak nie posiadasz dodatkowego monitora, to również nie ma się czym martwić. Wystarczy przełączanie się między oknami w razie potrzeby, w ten sposób pracuje większość naszych kursantów.

Alternatywnie, istnieje jeszcze możliwość uruchomienia oprogramowania konferencyjnego (standardowo w ALX jest to Zoom) na tablecie lub ewentualnie telefonie Apple / Android (przy czym ekran telefonu jest jednak dość mały - kursanci raczej preferują tablety). Wtedy można uczestniczyć w sesji video poprzez urządzenie mobilne, a samodzielną pracę i ćwiczenia - wykonywać na komputerze

Kody dostępowe do usługi