Úvod do Reactu

Vytvořte v Reactu webovou stránku dle následujícího vzoru.

Stránka plyšáci

Postupujte dle následujících kroků.

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

   npm init kodim-app@latest plysaci react
   

2. Projekt spusťte pomocí npm run start, jak už to znáte z dřívejška.
3. Smažte komponentu App. Vytvořte si proměnnou content a vložte do ní JSX s následujícím obsahem.

   <h1>Plyšáci</h1>
   <div className="plushies"></div>
   

   Nezapomeňte obsah správně obalit do fragmentu. Vaši proměnnou pak použíjte ve funkci render.
4. Vytvořte si dva objekty obsahující informace o plyšácích dle následujícího vzoru.

   const plushy1 = {
     name: 'Silvestr',
     image: 'adresa obrazku',
     text: 'Silvestr rád pozoruje dění za oknem a upřímně se usmívá na všechno kolemjdoucí.',
   };
   const plushy2 = {
     name: 'Ctirad',
     image: 'adresa obrazku',
     text: 'Ctirad tráví svůj čas v blízkosti lednice a s očekáváním pozoruje její bílé dveře.',
   };
   

5. Adresy obrázků si můžeme zkopírovat z těcho odkazů: elephant, mouse.
6. Karta s plyšákem by měla ve výsledné stránce vypadat takto.

   <div class="plushy">
     <img class="plushy__image" src="odkaz na obrazek" />
     <h2 class="plushy__name">Jméno plyšáka</h2>
     <p class="plushy__text">Text o plyšákovi</p>
   </div>
   

   Převeďte tento kód na JSX a vložte jej do elementu s třídou plushies, jednou pro každého plyšáka. Nezapomeňte, že v JSX se místo class píše className. Data pro obě karty vezměte z objektů plushy1 a plushy2.
7. Přidejte do stránky soubor se styly a nastylujte ji dle zadání.