Kódím.cz
3

Šablony a komponenty

Postupně se začneme seznamovat s komponentami a jak pomocí nich vytvářet složitější webové aplikace.

2
Letenky
Vytvořte komponentu pro zobrazení jednoho letu.

Vytvořte si repozitář ze šablony letenky-zadani se stránkou, která se tváří, že zobrazuje výsledky vyhledávání letů. Vaším úkolem bude vytvořit dle tohoto vzoru komponentu Flight, která bude zobrazovat jeden let.

  1. Spusťte si připravenou stránku a prohlédněte si strukturu HTML. Do tohoto repozitáře nebudeme nic vkládat, je to pouze ukázka.
  2. Založte si úplně nový JSX projekt pomocí již známého postupu.
  3. Vytvořte v projektu komponentu Flight. Ta bude na vstupu očekávat takovéto props:
    {
      cityFrom: 'Praha',
      cityTo: 'Londýn',
      timeFrom: '3. srpna 2022, 13:30',
      timeTo: '3. srpna 2022, 14:00',
    }
    
    Komponenta nechť vytvoří HTML pro jeden let dle vzoru, který najdete ve vzorovém projektu v index.html.
  4. Ze vzorového projektu vykraďte CSS styly. Ty, které patří ke komponentě Flight, vložte do souboru style.css ve složce komponenty a správně je importujte. Styly pro celou stránku nechte v hlavním souboru stránky index.css.
  5. Už známým postupem vložte pomocí komponenty Flight do stránky jeden vyhledaný let. Stránka by měla vypadat úplně stejně jako v původním projektu.