2. diel - Vytvorenie React projektu

V minulej lekcii, Úvod do React, sme si predstavili knižnicu React a popísali jej základné vlastnosti.

V dnešnom React tutoriále si vytvoríme našu prvú React aplikáciu pomocou nástroja npm. Vysvetlíme si, ako sa spúšťa, a popíšeme si jej vnútornú štruktúru.

React aplikácie obsahujú viac súborov, čiastkových knižníc a nastavení (napr. prekladače Babel pre podporu JSX). Preto sa nevytvárajú ručne, ale generujú sa pomocou rôznych nástrojov. My použijeme nástroj Vite [čítaj "vít"]. Na spustenie tohto nástroja potrebujeme prostredie Node.js.

Node.js

Node.js je prostredie umožňujúce spúšťať javascriptové aplikácie mimo webového prehliadača. Aplikácie tak môžu mať prístup k lokálnym súborom a tak napr. vygenerovať nový React projekt. Node.js sa často používa aj na tvorbu serverovej časti webových aplikácií. Jeho výhodou je, že dokáže spracovať veľké množstvo súčasných pripojení, čo je užitočné najmä na obsluhu rôznych služieb s rôznou dobou odozvy. Node.js navyše umožňuje inštalovať javascriptové balíčky, čím môžeme do svojich React projektov jednoducho pridávať ďalšie knižnice. A my už vieme, že React sa veľmi často používa s viacerými knižnicami.

Inštalácia Node.js

Pokiaľ ešte nemáme nainštalovaný Node.js, prejdeme na oficiálnu stránku Node.js, prípadne priamo do sekcie download:

Potom z ponuky Get a prebuilt Node.js vyberieme náš operačný systém a kliknutím na tlačidlo Installer (.msi) stiahneme do počítača inštalačný súbor. Ten následne spustíme a podľa inštrukcií nainštalujeme.

V kurze si spomenieme len základné ovládanie Node.js, ktoré potrebujeme na prácu s React projektmi. Pokiaľ sa chcete o Node.js dozvedieť viac, prejdite na samostatný kurz Node.js.

Príkazový riadok

Pomocou Node.js teraz spustíme nástroj Vite v našom priečinku s projektmi (to je akýkoľvek priečinok, kde chceme mať uložené React projekty). Vo Windows sú hneď tri aplikácie, ktoré nám umožňujú príkazy spúšťať:

• Príkazový riadok – najstarší,
• PowerShell,
• Terminal – najnovší, mix dvoch vyššie uvedených.

Jednu z týchto aplikácií potrebujeme spustiť a prejsť do našej zložky s projektmi. Najjednoduchšie to urobíme kliknutím pravým tlačidlom myši na náš priečinok s projektmi v prieskumníku Windows za držania klávesy Shift. Výsledkom bude zobrazenie kontextového menu, kde bude vďaka držaniu Shift navyše voľba Otvoriť tu okno Power Shell (Win 10) alebo Otvoriť v aplikácii Terminal (Win 11):

Po kliknutí na voľbu sa spustí okno príkazového riadka:

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

Obsah aj vzhľad konzoly sa bude líšiť v závislosti od operačného systému. Dôležité je, aby cesta končila priečinkom, v ktorom si prajeme projekt založiť (v ukážke vyššie bude projekt vytvorený v priečinku Dropbox/). Pre projekt sa vytvorí nový samostatný priečinok.

Balíčkovací systém npm

Spoločne s Node.js ide ruka v ruke aj balíčkovací ekosystém npm. Je priamo súčasťou štandardnej inštalácie Node.js, takže aj vy ho teraz už máte k dispozícii. Ovláda sa práve pomocou príkazového riadka alebo aj v rámci IDE.

Nie je žiadnou novinkou, že väčšina programovacích jazykov má svojho správcu knižníc a vo svete JavaScriptu je to práve npm. Pomocou neho môžeme všeobecne vytvárať projekty, inštalovať aj spravovať závislosti (pre nás React) vo svojich projektoch, ale aj zdieľať a distribuovať náš javascriptový kód.

Na vytvorenie a spustenie React projektu budeme potrebovať dva príkazy:

• cd – change directory zmení aktuálny priečinok.
• npm – node package manager spravuje všetky balíčky a moduly pre Node.js a umožní nám projekt spustiť.

Pri práci s npm sa mnohokrát ešte stretneme s príkazom npx – node package execute. Príkaz npx môže spustiť ľubovoľný npm balíček bez toho, aby sme tento balíček inštalovali.

Nástroj Vite

Vite je nástroj pre vývoj a následné zostavenie frontendových webových aplikácií. Jeho hlavnou prednosťou je predovšetkým vysoká rýchlosť načítania vykonaných zmien v aplikácii počas vývoja, čím zvyšuje našu celkovú produktivitu. Dosahuje to použitím najnovších postupov, webových technológií a štandardov.

Vite podporuje rad populárnych frontendových knižníc, medzi ktorými samozrejme nechýba ani React. Na vygenerovanie React projektu pomocou Vite využijeme príkaz create vite.

Predtým sa na generovanie React projektov používal príkaz a nástroj Create React App, ktorý sa však už nevyvíja.

Vytvorenie projektu

V príkazovom riadku spustíme v našom priečinku príkaz npm s týmito parametrami:

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

Príkaz si môžete skopírovať z lekcie a do príkazového riadka ho vložiť pravým tlačidlom myši.

Uvedením parametra @^6.5.0 vynútime určitú verziu nástroja Vite (táto vytvorí projekt s React verziou 19). Tým si zaistíme, že budeme používať tú istú verziu Reactu, pre ktorú je kurz v súčasnosti odladený. Keby sme však chceli použiť najaktuálnejšiu verziu nástroja Vite, uviedli by sme namiesto konkrétnej verzie kľúčové slovo latest.

Po zadaní príkazu npm create vite@^6.5.0 sa vám môže v Termináli či PowerShelli zobraziť chybová hláška:

Windows PowerShell
PS C:\Users\sdrac\Dropbox> npm create vite@^6.5.0
npm : File C:\Program Files\nodejs\npm.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ npm create vite@^6.5.0
+ ~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
PS C:\Users\sdrac\Dropbox>

To je spôsobené predvoleným nastavením zabezpečenia vo Windows, ktoré z bezpečnostných dôvodov blokuje spúšťanie PowerShell skriptov, čo zahŕňa aj príkaz npm. Odporúčaným riešením je spustiť príkaz:

Windows PowerShell
PS C:\Users\sdrac\Dropbox> Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

Spustením tohto príkazu dočasne (iba pre aktuálne okno Terminálu/Power­Shellu) povolíme spúšťanie skriptov. Následne znova spustíme príkaz npm create vite@^6.5.0 a inštalácia už prebehne bez problémov.

Potom budeme dotázaní, či naozaj chceme nainštalovať potrebné balíčky. Inštaláciu potvrdíme zadaním znaku y:

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

Spustí sa nám interaktívny konfigurátor nového Vite projektu. Najprv zvolíme názov, napríklad helloworld, potom ako framework React a nakoniec jazyk JavaScript:

Windows PowerShell
PS C:\Users\sdrac\Dropbox> npm create vite@6.5.0
Need to install the following packages:
create-vite@6.5.0
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

Prechod do priečinka

Po zadaní všetkých parametrov sa nám vytvorí v priečinku s projektmi nový priečinok helloworld/ a v ňom množstvo ďalších súborov a priečinkov. Zostaneme v príkazovom riadku a do tohto priečinka prejdeme pomocou príkazu cd:

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

Inštalácia balíčkov

Pred spustením nášho projektu musíme najprv nainštalovať všetky potrebné balíčky. Urobíme tak zavolaním príkazu npm install vo vnútri priečinka s projektom (helloworld/):

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

Teraz počkáme na dokončenie inštalácie, čo bude chvíľu trvať.

Spustenie projektu

Na spustenie projektu stačí vo vnútri priečinka s projektom (helloworld/) zadať príkaz npm run dev:

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

Ten nám spustí našu aplikáciu v rámci lokálneho servera, štandardne na adrese http://localhost:5173/. Konkrétna adresa aplikácie sa vypíše do konzoly. Na adresu stačí kliknúť myšou za súčasného držania klávesu Ctrl, aby sa aplikácia otvorila v prehliadači. Výsledok vyzerá takto:

To, čo sme nainštalovali, je kompletný základ React aplikácie poháňaný lokálnym serverom a s podporou kontinuálneho prekladu JSX. Ten nám okrem iného ponúka možnosť zostaviť finálnu verziu aplikácie pre produkčné prostredie.

Server navyše počas svojho behu stráži zmeny v súboroch aplikácie a pokiaľ sa niečo zmení, automaticky aplikáciu znovu načíta. Nám teda stačí iba upravovať kód a instantne uvidíme výsledky našich zmien priamo v prehliadači.

Na zastavenie servera v príkazovom riadku môžeme potom použiť klávesovú skratku Ctrl + C.

Visual Studio Code

V kurze budeme používať editor s pokročilými funkciami – Visual Studio Code. Ešte väčšie možnosti potom poskytuje IDE WebStorm, ktoré je však platené. Oba tieto nástroje nám pri programovaní veľmi uľahčia prácu. Ak žiadny z nich nemáte nainštalovaný, nainštalujte si ho prosím teraz.

Štruktúra React projektu

Priečinok helloworld/ si teraz otvoríme vo VS Code (klikneme naň pravým tlačidlom myši v prieskumníku Windows a zvolíme možnosť Otvoriť v Code). Prípadne môžeme zavolať príkaz code . v danej zložke v príkazovom riadku:

Projekt má niekoľko podpriečinkov a súborov, ktoré si teraz popíšeme. Pre nás dôležité súbory a priečinky sú vypísané tučným písmom:

• 📁 node_modules/ – Nainštalované nástroje pre našu aplikáciu, ktoré si ukladá npm (Node.js).
• 📁 public/ – Priečinok pre umiestňovanie verejne dostupných zdrojov ako sú napr. obrázky a pod.
• 📁 src/ – Zdrojový kód, aplikácia má zatiaľ jeden komponent App.
  • App.css – CSS štýly hlavného komponentu.
  • App.jsx – Kód hlavného komponentu aplikácie, s tým budeme za chvíľu pracovať.
  • index.css – Zdieľané CSS štýly naprieč všetkými komponentmi.
  • main.jsx – Súbor, ktorý zavádza hlavný React komponent našej aplikácie do HTML štruktúry.
• index.html – HTML dokument s elementom #root, do ktorého sa vloží hlavný komponent.
• package.json – Definuje, aké balíčky v akých verziách aplikácia používa.
• README.md – Dokumentácia aplikácie.
• ... – Rôzne pre nás momentálne nepodstatné konfiguračné súbory.

V budúcej lekcii, Prvý React komponent - Hello World, si vytvoríme prvý React komponent HelloWorld, ktorý do stránky vloží nadpis <h1>.