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
1
Aplikace
  1. Založte si nový reactový projekt: 
    npm init kodim-app@latest aplikace-react react
  2. Projekt spusťte pomocí npm run start, jak už to znáte z dřívejška.
  3. Vytvořte komponentu Header, která bude obsahovat kód pro hlavičku stránky. Jediná její prop bude title udávající obsah elementu h1. Vytvořte pro komponentu speciální složku a správně ji exportujte pomocí export default. V hlavním souboru index.jsx komponentu importujte a použijte ji uvnitř komponenty App.
  4. Následujte stejný postup jako výše a vytvořte komponentu Footer, která bude představovat patičku stránky. Tato komponenta bude mít také jednu prop s názvem author, která udává jméno autora stránky.
  5. Do třetice vytvořte komponentu Main, která bude představovat hlavní obsah stránky. Tato komponenta bude mít opět jednu prop s názvem content, která bude udávat obsah odstavce.