Front-end developer
Zapoj do svých vývojových skills JavaScript a React framework, nejpoužívanější kombinaci pro vývoj webových aplikací, v online kurzu Front-end developer.
Tomáš Hylský
Front-end Developer
Česká televize
-
Kurz Front-end developer ti pomůže rozšířit tvé znalosti HTML a CSS a posune tvé skills ve vývoji moderních webovek o úroveň výš.
-
Díky tomu budeš umět psát a číst kód v JavaScriptu/TypeScriptu, pochopíš jeho syntaxi i základní koncepty a provedeme tě teoretickými základy, které podložíme praxí.
-
Zkušený front-end developer a lektor v jedné osobě ti poskytne zpětnou vazbu a nasměruje tě správným směrem.
- Rezervuj si místo
O KURZU
- TIMELINE:
ZÁŘÍ–PROSINEC
- ČEKÁ TĚ:
24 LEKCÍ
- FORMÁT:
živě online
Pronikni do front-endového vývojového cyklu díky nově získaným zkušenostem s pokročilými a moderními technikami. Osvoj si znalosti JavaScriptu a frameworku React pro vývoj uživatelsky přívětivých webových aplikací, které splňují potřebné UX standardy. Na konci kurzu se naučíš nasadit aplikaci na Firebase a získáš certifikát i praktické dovednosti pro práci junior front-end developera.
KURZ JE VHODNÝ PRO
VZDĚLÁNÍ S r_d
-
1
Personalizovaný feedback od špičkových lektorů
-
2
Real use cases
-
3
Praktická cvičení
-
4
Discord komunita
-
5
Certifikát
-
6
Doživotní záznamy
Program
-
01 LekcePondělí 9. 9. 2024 20:00 – 21:30
Úvod do moderního JavaScriptu (ES6+) a datové typy
- Představení lektora a studentů
- Historie programovacích jazyků a proč zrovna začít Javascriptem
- let a const
- Template literals a arrow functions
- Primitivní datové typy
- Pole a jeho metody
- Objekty, tvorba objektů a práce s nimi
Výstupy z lekce: Umím vysvětlit důvody vzniku Javascriptu. Znám prostředí v IDE, konkrétně Visual Studio Code, a mohu v něm pracovat. Rozumím základní syntaxi Javascriptu a znám nejdůležitější nativní typy ECMA scriptu. Dokážu vyhledat informace na klíčových serverech s dokumentací o podpoře a specifikaci ECMA scriptu. Mám přehled o funkcích knihovny Math a jejich použití.
Praktické cvičení: Vytvoř primitivní kódové kalkulačky.
-
02 LekceStředa 11. 9. 2024 20:00 – 21:30
Podmínky a cykly
- Jak se používají podmínky a k čemu slouží
- Ternary operátor, když se nechci rozepisovat s podmínkou
- Cykly aneb DRY – Don't Repeat Yourself
Výstupy z lekce: Umím implementovat několik typů cyklů. Rozumím principu psaní kódu podle DRY. Umím používat různé způsoby podmínkování, jako jsou if a ternární operátory.
Praktické cvičení: Vytvoř skript využívající funkce ES6+.
-
03 LekcePondělí 16. 9. 2024 20:00 – 21:30
Funkce, parametry a spread operátor
- Funkce a její parametry
- Funkce vyššího řádu (Higher-order-functions)
- Tři tečky a magie za tím: efektivní rozbalování prvků pole nebo objektu
Výstupy z lekce: Vím, co je funkce – opakovaně použitelné bloky kódu, které po zavolání provádějí úlohy. Vím, že tři tečky v kódu znamenají efektivní rozbalování prvků pole nebo objektu pomocí stručné syntaxe.
Praktické cvičení: Vytvoř funkce se spread operátorem.
-
04 LekceStředa 18. 9. 2024 20:00 – 21:30
Destrukturování objektů a vylepšené literály objektů, Set a Maps
- Co je to destrukturování polí a objektů
- Rozšířené vlastnosti objektových literálů
- Map a Set a jak se liší od klasických objektů
Výstupy z lekce: Umím techniku destrukturování polí i objektů, což zjednodušuje přiřazování proměnných. Používám objektové literály, čímž jsem zvýšil*a úroveň strukturování a přístupu k datům v rámci objektů. Rozumím praktickému využití a výhodám funkcí Map a Set v JavaScriptu a dokážu efektivně spravovat jedinečné kolekce dat a dvojice klíč-hodnota.
-
05 LekcePondělí 23. 9. 2024 20:00 – 21:30
Úvod do tříd a objektového programování
- Třídy JavaScriptu ES6: Pochopení deklarace tříd, konstruktorů, metod a dědičnosti.
- Objektově orientované principy: Základní principy, jako je zapouzdření, dědičnost a polymorfismus.
Výstupy z lekce: Umím implementovat koncepty tříd v JavaScriptu a chápu jejich úlohu při strukturování kódu. Aplikuji základní principy OOP i pokročilejší programovací paradigmata.
Praktické cvičení: Vytvoř základní projekt v OOP.
-
06 LekceStředa 25. 9. 2024 20:00 – 21:30
Úvod do jazyka Typescript, pokročilé typy a rozhraní
- Co je TypeScript a proč ho používat?
- Základní typy v TypeScriptu: číslo, řetězec, boolean, any, void
- Union & intersection v TypeScriptu
- Aliasy typů
- Interface: Definování a rozšiřování interfaců
Výstupy z lekce: Umím základy TypeScriptu a rozumím jeho roli při zlepšování vývoje v JavaScriptu. Definuji a používám základní typy pro zajištění typové bezpečnosti kódu. Nastavím projekt v TypeScriptu a začlením ho do svého vývojového postupu. Tvořím funkce s přesnými parametry a návratovými typy. Navrhuji a implementuji interfaců pro konzistentní objektové struktury.
-
07 LekcePondělí 30. 9. 2024 20:00 – 21:30
Async/Await, Promises & Fetch API
- Porozumění asynchronnímu JavaScriptu
- Úvod do Promise
- Fetch API pro požadavky HTTP
- Async/Await pro čistší asynchronní kód
Výstupy z lekce: Dokážu implementovat asynchronní programování v JavaScriptu pro zlepšení odezvy aplikací. Umím využívat Promise, API Fetch a syntaxe Async/Await pro efektivní načítání a zpracování dat. Mám schopnost integrovat externí zdroje dat do projektů pro zajištění dynamického obsahu a interaktivity.
-
08 LekceStředa 2. 10. 2024 20:00 – 21:30
Zpracování chyb a debugging
- Ošetření chyb pomocí try…catch
- Běžné techniky ladění
- Porozumění call stacku
Výstupy z lekce: Umím řešit neočekávané scénáře a zvýšit odolnost svých aplikací. Využívám mechanismus try…catch pro bezproblémové fungování aplikace i při chybách. Mám zlepšené ladicí dovednosti, které mi umožňují efektivně sledovat a odstraňovat problémy v kódu.
Praktické cvičení: Prozkoumej asynchronní operace v TypeScriptu.
-
09 LekcePondělí 7. 10. 2024 20:00 – 21:30
Orientace v ekosystému JavaScript a TypeScript + prostor na Q&A
- Oblíbené knihovny: Představení široce používaných knihoven v JavaScriptu, jako jsou Lodash, Moment.js a další, které mohou usnadnit různé úlohy.
- Nástroje jazyka TypeScript: Zkoumání nástrojů, jako jsou ESLint, Prettier, TypeScript Playground a DefinitelyTyped, pro usnadnění vývoje.
- Komunita a zdroje: Objevování platforem, jako jsou MDN Web Docs, Stack Overflow atd.
Výstupy z lekce: Znám populární knihovny JavaScriptu a umím je integrovat do projektů pro rozšíření funkčnosti. Seznámil*a jsem se se základními nástroji TypeScriptu, které zefektivňují můj vývojový proces a zlepšují kvalitu kódu. Mám povědomí o komunitách a zdrojích kolem JavaScriptu a TypeScriptu, což mi poskytuje další vzdělávání a podporu.
-
10 LekceStředa 9. 10. 2024 20:00 – 21:30
Úvod do ReactJS a komponenty
- Co je React a proč ho používat?
- Pochopení virtuálního DOM
- Nastavení React prostředí
- Úvod do funkcionálních komponent
- Základy JSX/TSX
- Vykreslování prvků
Výstupy z lekce: Rozumím hlavnímu účelu a výhodám Reactu, včetně optimalizace vykreslování pomocí virtuálního DOMu. Umím nastavit vývojové prostředí React a popsat funkcionální komponenty a jejich použití. Rozumím syntaxi JSX/TSX a umím ji implementovat pro vykreslování jednotlivých prvků a komponent v Reactu.
-
11 LekcePondělí 14. 10. 2024 20:00 – 21:30
Props a State ve funkcionálních komponentách
- React props
- Správa statu s pomocí hooku useState
- Rozlišení mezi statem a props
Výstupy z lekce: Umím vysvětlit účel a použití props v komponentách a spravovat local state pomocí hooku useState. Taky rozumím rozdílu mezi props a statem.
Praktické cvičení: Vytvoř základní aplikace React.
-
12 LekceStředa 16. 10. 2024 20:00 – 21:30
Efekty v React
- Úvod k hooku useEffect
- Vedlejší efekty ve funkcionálních komponentách
- Cleanup a závislosti v useEffect
Výstupy z lekce: Umím popsat význam a použití hooku useEffect a zacházet s vedlejšími jevy ve funkcionálních komponentách. Umím implementovat cleanup a rozumím závislostem v rámci useEffect.
Praktické cvičení: Vylepši svou aplikaci o dynamická data.
-
13 LekcePondělí 21. 10. 2024 20:00 – 21:30
Manipulace s eventy & formuláře v Reactu
- Zpracování eventů v Reactu
- Kontrolované komponenty s hookem useState
- Zpracování odeslání formuláře
Výstupy z lekce: Umím zpracovat události jako onClick a onChange v Reactu. Ukládám vstupy formuláře pomocí useState a obsluhuji odesílání formulářů a zpracování dat.
-
14 LekceStředa 23. 10. 2024 20:00 – 21:30
React Context pro správu globálního statu
- Úvod do React Context, jeho principy a užití
- Použití hooku useContext
- Praktické příklady kontextu pro správu statu
Výstupy z lekce: Znám principy React Context a jejich užití. Využívám hook useContext pro přístup k hodnotám kontextu a implementuji praktickou správu stavu pomocí kontextu.
-
15 LekcePondělí 28. 10. 2024 20:00 – 21:30
React Router
- Úvod do React Routeru, jeho principy a využití v aplikaci
- Nastavení linkování pro React aplikaci
- Parametry routy a navigace v aplikaci
Výstupy z lekce: Ovládám základy React Routeru a umím ho využít k vytvoření multistránkové webové aplikace. Dokážu konfigurovat routy pro aplikaci v Reactu a vykreslovat různé části aplikace podle jejich parametrů. Umím se také programově pohybovat mezi stránkami.
-
16 LekceStředa 30. 10. 2024 20:00 – 21:30
Stylování v React
- CSS v React
- Styled Components
- Správa theme a stylů s kontextem a hooky
Výstupy z lekce: Umím implementovat klasické CSS v komponentách React. Umím stylovat komponenty pomocí CSS-in-JS s knihovnou Styled Components. Dokážu spravovat themes a dynamické styly pomocí kontextu a hooků.
Praktické cvičení: Implementuj přepínače themes pomocí kontextu.
-
17 LekcePondělí 4. 11. 2024 20:00 – 21:30
Pokročilé React vzory
- Vykreslování vlastností (krátké představení)
- Higher-order components (krátké představení)
- Složené komponenty pomocí funkcionálních komponent
Výstupy z lekce: Chápu vzory, jako jsou render props a Higher-order components, a vím, kdy je použít. Umím implementovat složené komponenty a popsat pokročilé vzory a jejich výhody.
-
18 LekceStředa 6. 11. 2024 20:00 – 21:30
Optimalizace výkonu v Reactu
- Optimalizace výkonu ve funkcionálních komponentách
- Použití hooků useMemo a useCallback
- Profiling s React DevTools
Výstupy z lekce: Umím rozpoznat úzká místa ve výkonu funkčních komponent a optimalizovat je pomocí useMemo a useCallback. Znám profilování pomocí nástroje React DevTools.
Praktické cvičení: Stránkování a optimalizace v UserListu.
-
19 LekcePondělí 11. 11. 2024 20:00 – 21:30
Podrobně o hoocích
- Vlastní hooky
- Další důležité hooky (useRef, useReducer atd.)
- Vytváření vlastního hooku v praxi
Výstupy z lekce: Umím vytvořit vlastní hook pro opakovaně použitelnou logiku. Používám další hooky Reactu, jako jsou useRef a useReducer.
Praktické cvičení: Pokročilý state a vylepšování aplikace.
-
20 LekceStředa 13. 11. 2024 20:00 – 21:30
Testování funkcionálních komponent v Reactu
- Úvod k testování React funkcionálních komponent
- Použití testovacích knihoven a Jest
- Mockování a simulace uživatelských událostí
Výstupy z lekce: Umím provést základní testování v Reactu a vysvětlit jeho význam. Implementuji unit testy pomocí populárních knihoven, jako je Jest. Zvládám mockovat funkce a simulovat uživatelské události pro testování.
Praktické cvičení: Otestuji aplikaci pomocí knihovny Jest.
-
21 LekcePondělí 18. 11. 2024 20:00 – 21:30
Server-side Rendering s React
- Koncepty server-side rendering (SSR)
- Výhody SSR
- Implementace SSR ve funkcionálních React aplikacích
- NextJS
Výstupy z lekce: Umím vysvětlit principy a výhody SSR a rozpoznat, kdy je třeba jej zavést. Dokážu převést funkcionální aplikace Reactu na podporu SSR.
-
22 LekceStředa 20. 11. 2024 20:00 – 21:30
Deploy & CI/CD pro React aplikace
- Nasazení React aplikace
- Kontinuální integrace & kontinuální dodání
- Hosting React aplikací na platformách jako Firebase
Výstupy z lekce: Umím nasadit aplikaci v Reactu do produkce a znám základy CI/CD pro React aplikace. Dokážu hostovat React aplikace na platformách, jako je Firebase.
Praktické cvičení: Spuštění živého provozu aplikace.
-
23 LekcePondělí 25. 11. 2024 20:00 – 21:30
Knihovny třetích stran a jejich integrace
- Populární knihovny pro zrychlení vývoje v Reactu
- Integrace s API a backend službami
- Přidání funkcí jako notifikace, modální okna atd.
Výstupy z lekce: Znám další populární knihovny, které doplňují React, a umím je nainstalovat. Dokážu napojit React aplikaci na různá API a backendové služby. Zvládnu vylepšit uživatelské rozhraní pomocí pokročilých funkcí, jako jsou notifikace a modály.
-
24 LekceStředa 27. 11. 2024 20:00 – 21:30
Závěrečný přehled & budoucí trendy v React
- Shrnutí obsahu kurzu
- Budoucnost React a co očekávat
- Otevřená diskuze, zpětná vazba a otázky a odpovědi
Výstupy z lekce: Mám přehled, jakým směrem se ubírá React a kde sledovat trendy Reactu a front-endového vývoje.
LEKTOR
![](https://robot-site-static.fra1.digitaloceanspaces.com/cz/ckeditor/course/64-frontend-developer/64-t-lector.webp)
Tomáš Hylský
Front-end Developer, Česká televize
-
Pracuje jako front-end developera u České televize, kde vede technickou skupinu front-end vývojářů.
-
Má více než 9 let praxe v programování. Zajímá se o novinky v technologiích a způsoby, jak zefektivnit vývojářskou práci či UI/UX v rámci vývoje.
-
Pracoval ve společnosti Heureka.cz, kde vytvářel nové administrační rozhraní pro správu obsahu. Působil v digitální agentuře OAK'S LAB, kde začínal jako Full Stack Engineer a vypracoval se na pozici Lead Software Engineer.
-
Získal certifikát Google Associate Cloud Engineer po tréninku na Google Cloud a je také držitelem certifikátu AWS Certified Cloud Practitioner po školení na AWS.
ZÍSKEJ VÍCE INFORMACÍ O KURZU FRONT-END DEVELOPER
Vyplň registrační formulář a připoj se k nám! Náš r_d tým se s tebou spojí co nejdříve, abys získal*a všechny potřebné detaily o obsahu kurzu Front-end developer a jeho ceně.