Za úkol máš vytvořit stránku, která bude zobrazovat nabídku filmů v místním kině.
Já jsem si úkol sám vypracoval a moje řešení nakonec vypadá nějak takto. Můžeš to použít jako inspiraci, ale je zcela na tobě, jak si svoji stránku nastyluješ.
Tentokrát nebudeš vytvářet aplikaci úplně od začátku pomocí create-czechitas-app
, ale postupuj následovně:
- Předpokládáme, že máš účet na GitHubu. Pokud ne, zaregistruj si ho a přihlaš se do něj.
- Udělej si fork tohoto repozitáře se zadáním (tím se ti úkol zkopíruje do tvého GitHub účtu).
- Naklonuj si repozitář ze svého GitHub účtu k sobě na disk.
- Až budeš mít úkol hotový (viz. dále), tak nezapomeň udělat commit a push zpět na GitHub.
- Úkol budeš odevzdávat jako odkaz na GitHub se svým zpracovaným řešením.
Pokud nevíš, jak s Gitem a GitHubem pracovat, zeptej se nás na Slacku nebo se prosím podívej na následující videa. Jsou z jiného kurzu, ale vše platí i pro náš kurz:
-
I když ty sama jsi projekt nezakládala z nuly pomocí
create-czechitas-app
, projekt je vytvořený pomocí tohoto nástroje a používá se úplně stejně. Jen už v sobě obsahuje i nějaké další připravené podklady, jako obrázky a údaje o filmech. -
Otevři si v editoru složku projektu, kterou sis z GitHubu naklonovala k sobě na disk. Složka, kterou otevíráš, by měla obsahovat soubor
package.json
(a další soubory a složky). -
Otevři si v editoru terminál / příkazovou řádku a spusť příkaz:
npm install
Tím se ti do projektu doinstalují všechny potřebné balíčky závislostí stejně, jako kdybys projekt vytvářela/instalovala pomocí
create-czechitas-app
. -
Známým způsobem zkus projekt spustit. Měla bys vidět stránku, na které je ikonka kamery a text V našem kině právě uvádíme.
Tvým cílem je vytvořit stránku, která bude zobrazovat přehled filmů, které se promítají v místním kině.
-
Prozkoumej složku
src
projektu a všimni si, že:- ve složce
img
je obrázek s ikonkou kamery, který se importuje do hlavníhoindex.jsx
souboru a používá se jako logo v hlavičce - ve složce
assets
jsou plakáty všech filmů, složkaassets
se beze změny kopíruje i do sestavené aplikace, takže se můžeš spolehnout, že cesta k obrázku s plakátem bude vždy/assets/nazev-plakatu.jpg
- ve složce
src
je soubormovies.js
, který obsahuje pole objektů nazvanémovies
s podrobnostmi o všech filmech v našem kině. Pole se ze souboru exportuje, takže ho můžeš importovat do místa, kde ho budeš potřebovat. Podívej se, jako mají data o filmech strukturu.
- ve složce
-
V samostatné složce vytvoř komponentu
Header
a přesuň do ní kód pro hlavičku stránky (nadpis s ikonkou kamery).Do složky s komponentou přesuň i obrázek kamery, ať je hezky pohromadě vše, co komponenta používá. Nezapomeň, že musíš z hlavního
index.jsx
přesunou i řádek s importem obrázku a případně upravit cestu k obrázku (záleží na tom, jak a kam obrázek přesuneš).Komponentu
Header
pak použij uvnitřApp
. -
Vytvoř komponentu
Movie
, která se bude starat o zobrazování jednoho filmu. Jako props bude komponenta přijímat:title
- název filmuposter
- název obrázku s plakátemyear
- rok vydánírating
- hodnocení x/10director
- režisérgenre
- žánrcast
- pole herců a postav, které ve filmu ztvárnili
Zatím ignoruj prop
cast
se seznamem herců a nakóduj komponentu tak, aby zobrazovala ostatní údaje v nějakém rozumné HTML podobě.Vyzkoušej, zda komponenta funguje podle tvých představ, když ji použiješ v
App
a manuálně do ní předáš nějaké parametry. -
Vytvoř komponentu
MovieList
, která se bude starat o zobrazení celého seznamu filmů. Zatím se nestarej o HTML obsah komponenty.Komponenta bude přijímat jedinou prop s názvem
movies
. -
V hlavním souboru
index.jsx
, kde je komponentaApp
, naimportuj mimo komponentuApp
pole s údaji o filmech ze souborumovies.js
ve složcesrc
.Uvnitř
App
použij komponentuMovieList
a naimportované pole do ní předej jako prop s názvemmovies
. -
Vrať se do komponenty
MovieList
. Komponenta v prop s názvemmovies
přijímá pole s údaji o filmech.Každý jeden film v poli má následující datovou strukturu:
{ id: 1, title: 'Pulp Fiction', poster: 'pulp-fiction.jpg', year: 1994, rating: 8.9, director: 'Quentin Tarantino', genre: 'crime, drama', cast: [ { name: 'John Travolta', as: 'Vincent Vega', }, { name: 'Samuel L. Jackson', as: 'Jules Winnfield', }, { name: 'Uma Thurman', as: 'Mia Wallace', }, { name: 'Bruce Willis', as: 'Butch Coolidge', } ], }
Přemapuj toto pole na Reactí seznam. Každá položka v seznamu bude tvořená komponentou
Movie
, kterou jsem vytvořili již dříve. Do komponenty předej příslušné props.React ti pravděpodobně bude v konzoli prohlížeče vyhrožovat, že každá položka v seznamu by měla mít unikátní
key
. Podívej se do dat, která z vlastností filmu by se pro to nejvíc hodila. -
Tvoje aplikace by teď měla zobrazovat seznam všech 10 filmů.
Pokud chceš, můžeš zde s úkolem skončit a odevzdat ho v této podobě.
Máš-li ráda výzvy a chceš na úkolu dále pracovat, pokračuj.
-
Cool. Vítej :) Jsem rád, že to ještě nevzdáváš.
-
V komponentě
Movie
jsme zatím ignorovali seznam herců. Pojďme to napravit.Mohli bychom sice vygenerovat nějaké jednoduché HTML pro zobrazení herce přímo v komponentě
Movie
, ale to není to správné komponentové přemýšlení. -
Vytvoř samostatnou komponentu
Actor
, která bude přijímat dvě props:name
- jméno herečky/herceas
- jméno postavy, kterou ve filmu ztvárnil/a
Nějakým vhodným způsobem v komponentě zobraz oba údaje.
-
V komponentě
Movie
máme v propcast
uložené pole herců hrajících ve filmu. Každý jednotlivý herec v poli má následující datovou strukturu:{ name: 'John Travolta', as: 'Vincent Vega', }
Uvnitř komponenty
Movie
, někde pod údaji o filmu, přemapuj pole uložené vcast
na seznam komponentActor
, do kterých předej příslušné parametry.Jako
key
pro položky v seznamu můžeš použít jméno herce. -
Nebojíš-li se CSS, všechny komponenty nastyluj tak, aby stránka hezky vypadala. Třeba jako na obrázku na začátku tohoto návodu.
-
Nezapomeň udělat
git commit
a potompush
do GitHub repozitáře. Odkaz na repozitář odevzdej jako řešení úkolu.