Lekce 2 - Vytvoření React projektu

V minulé lekci, Úvod do React, jsme si představili knihovnu React a popsali její základní vlastnosti.

V dnešním React tutoriálu si vytvoříme svou první React aplikaci pomocí nástroje npm. Vysvětlíme si, jak se spouští, a popíšeme si její vnitřní strukturu.

React aplikace obsahují více souborů, dílčích knihoven a nastavení (např. překladače Babel pro podporu JSX). Proto se nevytvářejí ručně, ale generují pomocí různých nástrojů. My použijeme nástroj Vite [čti "vít"]. Pro spuštění tohoto nástroje potřebujeme prostředí Node.js.

Node.js

Node.js je prostředí umožňující spouštět javascriptové aplikace mimo webový prohlížeč. Aplikace tak mohou mít přístup k lokálním souborům a tak např. vygenerovat nový React projekt. Node.js se často používá také na tvorbu serverové části webových aplikací. Jeho výhodou je, že dokáže zpracovat velké množství současných připojení, což je užitečné zejména pro obsluhu různých služeb s různou dobou odezvy. Node.js navíc umožňuje instalovat javascriptové balíčky, čímž můžeme do svých React projektů jednoduše přidávat další knihovny. A my již víme, že React se velmi často používá s více knihovnami.

Instalace Node.js

Pokud Node.js ještě nemáme nainstalované, stáhneme si instalátor pro náš operační systém z https://nodejs.org/ a nainstalujeme podle pokynů instalátoru:

V kurzu si zmíníme jen základní ovládání Node.js, které potřebujeme pro práci s React projekty. Pokud se chcete o Node.js dozvědět více, přejděte na samostatný kurz Node.js.

Příkazový řádek

Pomocí Node.js nyní spustíme nástroj Vite v naší složce s projekty (to je jakákoli složka, kde chceme mít uložené React projekty). Ve Windows jsou hned tři aplikace, které nám umožňují příkazy spouštět:

• Příkazový řádek - nejstarší
• PowerShell
• Terminal - nejnovější, mix dvou výše uvedených

Jednu z těchto aplikací potřebujeme spustit a přejít do naší složky s projekty. To nejjednodušeji uděláme kliknutím pravým tlačítkem myši na naší složku s projekty v průzkumníku Windows za držení klávesy Shift. Výsledkem bude zobrazení kontextového menu, kde bude díky držení Shift navíc volba Otevřít zde okno Power Shell (Win 10) nebo Otevřít v aplikaci Terminal (Win 11):

Po kliknutí na volbu se spustí okno příkazového řádku:

Windows PowerShell
PS C:\Users\sdrac\Dropbox>

Obsah i vzhled konzole se bude lišit v závislosti na operačním systému. Důležité je, aby cesta končila složkou, ve které si přejeme projekt založit (v ukázce výše bude projekt vytvořen ve složce Dropbox/). Pro projekt se vytvoří nová samostatná složka.

Balíčkovací systém npm

Společně s Node.js jde ruku v ruce i balíčkovací ekosystém npm. Je přímo součástí standardní instalace Node.js, takže i vy ho nyní již máte k dispozici. Ovládá se právě pomocí příkazové řádky nebo i v rámci IDE.

Není žádnou novinkou, že většina programovacích jazyků má svého správce knihoven a ve světě JavaScriptu je to právě npm. Pomocí něho můžeme obecně vytvářet projekty, instalovat i spravovat závislosti (pro nás React) ve svých projektech, ale také sdílet a distribuovat svůj javascriptový kód.

K vytvoření a spuštění React projektu budeme potřebovat dva příkazy:

• cd – change directory změní aktuální složku.
• npm – node package manager spravuje všechny balíčky a moduly pro Node.js a umožní nám projekt spustit.

Při práci s npm se mnohdy ještě setkáme s příkazem npx – node package execute. Příkaz npx může spustit libovolný npm balíček, aniž bychom tento balíček instalovali.

Nástroj Vite

Vite je nástroj pro vývoj a následné sestavení frontendových webových aplikací. Jeho hlavní předností je především vysoká rychlost načítání provedených změn v aplikaci během vývoje, čímž zvyšuje naši celkovou produktivitu. Dosahuje toho použitím nejnovějších postupů, webových technologií a standardů.

Vite podporuje řadu populárních frontendových knihoven, mezi nimiž samozřejmě nechybí ani React. K vygenerování React projektu pomocí Vite využijeme příkaz create vite.

Dříve se ke generování React projektů používal příkaz a nástroj Create React App, který se však již nevyvíjí.

Vytvoření projektu

V příkazovém řádku spustíme v naší složce příkaz npm s těmito parametry:

Windows PowerShell
PS C:\Users\sdrac\Dropbox> npm create vite@^6.1.1

Příkaz si můžete zkopírovat z lekce a do příkazového řádku jej vložit pravým tlačítkem myši.

Uvedením parametru @^6.1.1 vynutíme určitou verzi nástroje Vite (tato vytvoří projekt s React verze 18). Tím si zajistíme, že budeme používat tu stejnou verzi React, pro kterou je kurz v současné době odladěný. Kdybychom však chtěli použít nejaktuálnější verzi nástroje Vite, uvedli bychom místo konkrétní verze klíčové slovo latest.

Ihned po spuštění příkazu budeme dotázáni, zda opravdu chceme nainstalovat potřebné balíčky. Instalaci potvrdíme zadáním znaku y:

Windows PowerShell
PS C:\Users\sdrac\Dropbox> npm create vite@^6.1.1
Need to install the following packages:
create-vite@6.1.1
Ok to proceed? (y) y

Spustí se nám interaktivní konfigurátor nového Vite projektu. Nejprve zvolíme název, například helloworld, poté jako framework React a nakonec jazyk JavaScript:

Windows PowerShell
PS C:\Users\sdrac\Dropbox> npm create vite@^6.1.1
Need to install the following packages:
create-vite@6.1.1
Ok to proceed? (y) y


> npx
> create-vite

√ Project name: ... helloworld
√ Select a framework: » React
√ Select a variant: » JavaScript

Scaffolding project in C:\Users\sdrac\Dropbox\helloworld...

Done. Now run:

  cd helloworld
  npm install
  npm run dev

Přechod do složky

Po zadání všech parametrů se nám vytvoří ve složce s projekty nová složka helloworld/ a v ní spoustu dalších souborů a složek. Zůstaneme v příkazovém řádku a do této složky přejdeme pomocí příkazu cd:

Windows PowerShell
PS C:\Users\sdrac\Dropbox> cd helloworld

Instalace balíčků

Před spuštěním našeho projektu musíme nejprve nainstalovat všechny potřebné balíčky. Učiníme tak zavoláním příkazu npm install uvnitř složky s projektem (helloworld/):

Windows PowerShell
PS C:\Users\sdrac\Dropbox\helloworld> npm install

Nyní počkáme na dokončení instalace, což bude chvíli trvat.

Spuštění projektu

Pro spuštění projektu stačí uvnitř složky s projektem (helloworld/) zadat příkaz npm run dev:

Windows PowerShell
PS C:\Users\sdrac\Dropbox\helloworld> npm run dev

Tento příkaz už spustí naši aplikaci v rámci lokálního serveru, standardně na adrese http://localhost:5173/. Konkrétní adresa aplikace se vypíše do konzole. Na adresu stačí kliknout myší za současného držení klávesy Ctrl, aby se aplikace otevřela v prohlížeči. Výsledek vypadá takto:

Takto jsme nainstalovali kompletní základ React aplikace poháněný lokálním serverem a s podporou kontinuálního překladu JSX. Ten nám mimo jiné nabízí možnost sestavit finální verzi aplikace pro produkční prostředí. Server navíc během svého běhu hlídá změny v souborech aplikace a pokud se něco změní, automaticky aplikaci znovu načte. Nám tedy stačí pouze upravovat kód a instantně uvidíme výsledky našich změn přímo v prohlížeči.

K zastavení serveru v příkazovém řádku použijeme klávesovou zkratku Ctrl + C.

Visual Studio Code

V kurzu budeme používat editor s pokročilými funkcemi – Visual Studio Code. Ještě větší možnosti pak poskytuje IDE WebStorm, které je však placené. Oba tyto nástroje nám při programování velice usnadní práci.

Struktura React projektu

Složku helloworld/ si nyní otevřeme ve VS Code. Snadno tak učiníme, že na ni klikneme pravým tlačítkem myši v Průzkumníku Windows a zvolíme možnost Otevřít v Code. Případně můžeme zavolat příkaz code . v dané složce v příkazovém řádku:

Projekt má několik podsložek a souborů, které si nyní popíšeme. Pro nás důležité soubory a složky jsou vypsané tučně:

• 📁 node_modules/ – Nainstalované nástroje pro naší aplikaci, které si ukládá npm (Node.js).
• 📁 public/ – Složka pro umisťování veřejně dostupných zdrojů jako jsou např. obrázky apod.
• 📁 src/ – Zdrojový kód, aplikace má zatím jednu komponentu App.
  • App.css – CSS styly hlavní komponenty.
  • App.jsx – Kód hlavní komponenty aplikace, s tou budeme za chvíli pracovat.
  • index.css – Sdílené CSS styly napříč všemi komponentami.
  • main.jsx – Soubor, který zavádí hlavní React komponentu naší aplikace do HTML struktury.
• index.html – HTML dokument s elementem #root, do kterého se vloží hlavní komponenta.
• package.json – Definuje, jaké balíčky v jakých verzích aplikace používá.
• README.md – Dokumentace aplikace.
• ... – Různé pro nás momentálně nepodstatné konfigurační soubory.

V příští lekci, První React komponenta - Hello World, si vytvoříme první React komponentu HelloWorld, která do stránky vloží nadpis <h1>.

 

Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.