Čím jsou naše webové aplikace rozsáhlejší, tím je těžší se ve zdrojovém kódu orientovat, obzvláště pokud je celý obsažen v jednom souboru index.js. Naše aplikace se tedy snažíme rozdělovat na jednotlivé komponenty a jejich kód budeme vkládat do oddělených souborů. Díky tomu se dokážeme abychom ve struktuře aplikace lépe vyznat.

Oddělování komponent

Pojďme si dělení kódu aplikace do vícero souborů vyzkoušet na našem nákupním seznamu. Stáhněte si zdrojový kód již funkční a nastylované aplikace. Struktura souborů pro výslednou aplikaci bude vypadat takto.

├──img
│  └──background.svg
├──ShoppingItem
│  ├──index.js
│  └──style.css
├──ShoppingList
│  ├──index.js
│  └──style.css
├──index.html
├──index.js
└──style.css

Cvičení - Oddělování komponent

1

Přestupky 2

to dáš

Stáhněte si zdrojové soubory aplikace pro zaznamenávání dopravních přestupků. Prohlédněte si obsah HTML, CSS i JavaScriptu. Vaším úkolem bude rozčlenit obsah projeku do složek podle jednotlivých komponent tak, aby projekt zůstal nadále funkčni.

  1. Vytvořte složku pro kompnentu Offence. Založte v ní soubory index.js a style.css a přesunťe do nich JavaScriptový a CSS kód odpovídající této komponentě.
  2. Nalinkujte tyto soubory správně do hlavního index.html. Vyzkoušejte, že stránka správně funguje.
  3. Opakujte stejný postup pro komponentu OffencesList. Vytvořte pro ni složku s odpovídajícím obsahem nalinkujte soubory v index.html.
  4. Na konci by ve vašem hlavním souboru index.js měla zbýt pouze funkce localTime, pole data a obsluha kliknutí na tlačíko. V hlavním souboru style.css by měly zbýt pouze styly, které se netýkají žádné konkrétní komponenty.

Webpack

V předchozí části jsme rozdělili komponenty v projektu Nákupní seznam do jednotlivých souborů, což velmi pomáhá nám programátorům. Do našeho HTML však kvůli tomu musíme vložit celkem šest souborů.

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="ShoppingItem/style.css" />
<link rel="stylesheet" href="ShoppingList/style.css" />

...

<script src="ShoppingItem/index.js"></script>
<script src="ShoppingList/index.js"></script>
<script src="index.js"></script>

Prohlížeč tak musí kvůli dvěma komponentám stáhnout šest různých souborů. Reálné aplikace však obsahují desítky, stovky a tisíce komponent.

https://github.com/facebook/react/issues/9463#issuecomment-295643228

Webpack je nástroj, který slouží ke spojení zdrojových JavaScriptových souborů do jednoho výsledného souboru, který pak prohlížeč může stáhnout najednou. Tomuto procesu se říká sestavení build . K tomu, aby se náš projekt správně sestavil, potřebujeme Webpack správně nakonfigurovat. Vytvořít takovou konfiguraci od základu je už relativně pokročilá dovednost. V našem případě tedy budeme pracovat s již předem připravenou konfigurací, která se hodí na většinu jednoduchých frontendových projektů.

Postup založení nového projektu

Tento postup následujte vždy, když chcete založit nový frontendový projekt založený na Webpacku.

  1. Z tohoto odkazu si stáhněte ZIP soubor s připravenou konfigurací.
  2. Rozbalte ZIP soubor do nějaké složky a přejmenujte si složku project-starter dle názvu svého projektu, například muj-projekt.
  3. Otevřete složku muj-projekt vs VS Code. Spusťte terminál a uvnitř této složky spusťte příkaz
    npm install
    
  4. Spusťte příkaz
    npm run start
    
├──node_modules
├──src
│  ├──img
│  │  └──background.svg
│  ├──ShoppingItem
│  │  ├──index.js
│  │  └──style.css
│  ├──ShoppingList
│  │  ├──index.js
│  │  └──style.css
│  ├──index.html
│  ├──index.js
│  └──style.css
├──package-lock.json
└──package.json

Import a export

Cvičení - Základy Webpacku

2

Citát

to dáš

Vyzkoušejte si založení vlastního Webpack projektu s jednoduchou stránkou.

  1. Podle návodu z této lekce si založte nový webpack projekt. Pojmenujte si jej quotes.
  2. Uvnitř elementu #app vytvořte HTML a CSS pro stránku zobrazující nějaký známý citát. Co se týče vzhledu stránky, můžete se inspirovat třeba zde.
  3. Převeďte zobrazování citátu na JavaScriptovou komponentu jménem Quote. Ve složce src si vytvořte složku Quote se soubory index.js a style.css. Do souboru Quote/index.js vložte kód komponenty a do souboru Quote/style.css její CSS styly.
  4. V souboru Quote/index.js správně importujte soubor se styly a správně exportujte funkci komponenty.
  5. V hlavním souboru src/index.js správně importujte komponentu Quote a použijte ji k vytvoření obsahu stránky.

Doporučené úložky na doma

3

Světový čas pomocí Webpacku

to dáš

Stáhněte si řešení aplikace pro zobrazování světového času. Následujte postup pro založení nového Webpack projektu a předělejte toto řešení tak, aby využívalo Webpack.

  1. Dle šablony a návodu z této lekce si založte nový Webpackový projekt.
  2. Do složky src zkopírujte zdrojový kód stažený výše.
  3. V souboru index.js správně importujte soubory HTML a CSS. V tutu chvíli by měla vaše aplikace fungovat.
  4. Rozdělte komponenty Time a Timezone do svých vlastních složek. Dejte si pozor na správné importy a exporty. Vyzkoušejte, že aplikace funguje.
  5. Zkuste si malinko pohrát se styly a dát aplikaci o trochu hezčí vzhled. Nezapomeňte vždy v příslušných komponentách správne importovat vaše CSS soubory.