Kódím.cz
/ Czechitas / React 1 / Úvod do Reactu / Cvičení: React komponenty
1

Úvod do Reactu

Napíšeme si první aplikace v Reactu a představíme si hlavní principy tohoto moderního frameworku.

Nemá předchozí
lekci
Následujicí
Podmíněné zobrazení
OpakováníPrvní React aplikaceObsah stránky v ReactuVkládání hodnot do JSXCvičení: První React aplikaceReact komponenty a propsDoporučené postupyCvičení: React komponenty
2
Data („datumy“)

  1. Založte si nový reactový projekt:

    npm init kodim-app@latest datumy react

  2. Projekt spusťte pomocí npm run start, jak už to znáte z dřívejška.

  3. Vytvořte komponentu Today, která bude očekávat tři props:

    • day - řetězec s číslem dne, například '07',
    • month - řetězec s číslem měsíce, například '12',
    • year - řetězec s číslem roku, například '2020'.

    Tato komponenta by měla zobrazit datum ve formátu 07.12.2020. Zabalte každou položku datumu do zvláštního span elementu a dejte každé vlastní CSS třídu, abychom mohli den, měsíc i rok nastylovat zvlášť.

  4. Upravte komponentu App tak, aby na stránce zobrazila tři různé datumy pomocí Today.

  5. Pro komponentu Today vytvořte soubor se styly a nastylujte číslo pro den tak, aby bylo zobrazeno tučně, a číslo pro rok tak, aby bylo zobrazeno o 20 % menším fontem.