К содержанию

Základní tutoriál Reactu

Tutoriál k JavaScriptovému frameworku React. Pro začátečníky. Spousta teorie a úloh.

Уроки

Úvod do frameworku React

Instalace frameworku React

Připojení pluginu react-devtools

Úvod do komponentového přístupu v Reactu

Rozložení webu frameworku React

Výsledek práce komponentu

Jazyk JSX

Úvod do jazyka JSX v Reactu

Vrácení vnořených JSX tagů funkcemi

Pravidla pro vrácení funkce při přesunutí tagu dolů v JSX

Zvláštnosti vrácení více tagů v JSX

Vrácení neuzavřené JSX značky

Vrácení prázdného tagu funkcí v JSX

Vkládání hodnot proměnných a konstant do JSX

Nuance při vkládání hodnot proměnných

Vkládání polí v JSX

Vkládání objektů do JSX

Vkládání proměnných a konstant do atributů tagů v JSX

Ukládání tagů do proměnných a konstant JSX

Zvláštnosti ukládání více tagů v konstantách JSX

Značky na různých řádcích v JSX

Vrácení tagů přes return v JSX

Uzavírání tagů v JSX

Korektnost verzování v Reactu

Provádění kódu JavaScript

Podmínky

Použití podmínek v JSX

Zobrazení podle podmínky v Reactu

Podmínky pro vrácení tagu v JSX

Ternární operátor v JSX

Použití operátoru && v JSX

Inverze pro zkrácené podmínky v JSX

Funkce

Používání funkcí v Reactu

Volání funkcí uvnitř tagů v Reactu

Přidávání událostí v JSX

Parametry ve funkci JSX

Objekt Event v React

Objekt Event při předávání parametrů

Tvorba tagů

Tagy v polích JSX

Tvorba pole tagů ve smyčce React

Tvorba elementů z pole s daty v Reactu

Unikátní klíče v poli tagů v Reactu

Výpis pole objektů v Reactu

Unikátní klíče pomocí id v Reactu

Vykreslování pole objektů jako HTML tabulky v Reactu

Unikátní id

Diskuse o jedinečných id v Reactu

Problémy s novými id v Reactu

Náhodné řetězce pro id v Reactu

Generování id v Reactu

Funkce pro generování id v Reactu

Použití funkce id v Reactu

Nesprávné použití funkce id v Reactu

Stavy

Úvod do stavů v Reactu

Používání stavů v Reactu

Reaktivita stavů v React

Logická hodnota ve stavu v React

Čítač na stavech v Reactu

Formuláře

Práce s inputy v Reactu

Změna dat vstupu při jejich výpisu v Reactu

Změna dat pomocí funkce v Reactu

Práce s více vstupy v Reactu

Zpracování dat formuláře po kliknutí na tlačítko v Reactu

Práce s textarea v Reactu

Práce s checkbox v Reactu

Zaškrtávací políčka a podmíněné renderování v Reactu

Práce s select v Reactu

Položky selectu z pole v Reactu

Atributy value v selektu v Reactu

Atributy value selectu z pole v React

Práce s radio v Reactu

Výchozí hodnoty v Reactu

Propojení inputů s polem v Reactu

Propojení vstupů s objektem v Reactu

Data

Reaktivita dat v React

Reaktivní přidávání do pole v Reactu

Reaktivní operace s poli v Reactu

Reaktivní přidávání do pole objektů v Reactu

Reaktivní operace s poli objektů v Reactu

Reaktivní zobrazení dat v Reactu

Komponenty

Úvod do komponent v Reactu

Používání komponent v Reactu

Více instancí komponenty v Reactu

Props komponentů v Reactu

Tvorba podřízených komponentů v Reactu

Pole pro vytváření podřízených komponent v Reactu

Dceřiné komponenty v cyklu React

Předávání stavů do podřízených komponent v Reactu

Předávání id do komponenty v Reactu

Změna stavu rodiče v dětské komponentě v Reactu

Editace stavu rodiče v dětské komponentě v Reactu

Editace stavu ve vnoučecí komponentě v Reactu

Režimy práce přes stavy komponent-potomků v Reactu

Koncepty

Koncepty React při práci s komponentami

Data komponentů v Reactu

Typy komponentů v Reactu

Jednosměrný tok dat v Reactu

Zvedání stavů v Reactu

Jeden zdroj pravdy v Reactu

Stylování

Způsoby stylování React komponent

Použití globálního CSS pro stylování v Reactu

Vkládání dat do atributu style z objektu v Reactu

Vkládání dat do atributu style z samostatného souboru v Reactu

Práce s CSS styly v atributu style v Reactu

Vkládání dat do atributu style z proměnných v Reactu

Stylování pomocí Styled Components v Reactu

Používání props se Styled Components v Reactu

Použití props při podmíněném renderování se Styled Components v Reactu

Pokročilé stylování komponent v Reactu

Začínáme se stylováním s CSS moduly v Reactu

Pokračování ve studiu stylování s CSS moduly v Reactu

Příkaz composes pro třídy v CSS modules v Reactu

Příkaz composes pro soubory v CSS modules v Reactu

Projekty

Checklist Projekt v Reactu

Projekt Notes v Reactu