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 príkazu Create React App. Na spustenie tohto príkazu 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ľ Node.js ešte nemáme nainštalované, stiahneme si inštalátor pre náš operačný systém z https://nodejs.org/ a nainštalujeme podľa pokynov inštalátora:

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 príkaz Create React App 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íčkovacie systémy npm a npx

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ť tri príkazy:

• npx - node package execute spúšťa balíčky npm. Príkaz npx môže spustiť ľubovoľný npm balíček bez toho, aby sme tento balíček inštalovali.
• 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ť.

Vytvorenie projektu

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

Windows PowerShell
PS C:\Users\sdrac\Dropbox> npx create-react-app@^5.0.1 helloworld

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 @^5.0.1 vynútime určitú verziu príkazu Create React App (táto vytvorí projekt s React verzia 18). Tým si zaistíte, že budete používať tú istú verziu React, pre ktorú je kurz v súčasnej dobe vyladený. Parameter helloworld je potom názov nového React projektu, ktorý si prajeme vytvoriť.

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

Prechod do priečinka

Akonáhle skript dobehne, vytvorí sa nám 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

Spustenie projektu

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

Ten nám spustí našu aplikáciu v rámci lokálneho servera, štandardne na adrese http://localhost:3000/. Rovno ju tiež otvorí v predvolenom prehliadači. Výsledok by mal hneď po inštalácii vyzerať nejak 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):

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á npx (Node.js).
• 📁 public/ - Priečinok pre umiestňovanie verejne dostupných zdrojov ako je index.html a ďalej napr. obrázky a pod.
  • index.html - HTML dokument s elementom #root, do ktorého sa vloží hlavný komponent.

• 📁 src/ - Zdrojový kód, aplikácia má zatiaľ jeden komponent App.
  • App.css - CSS štýly.
  • App.js - Kód hlavného komponentu aplikácie, s tým budeme za chvíľu pracovať.
  • index.js - Súbor, ktorý zavádza React komponent našej aplikácie do HTML štruktúry.
  • ... - Ďalšie, pre nás momentálne nepodstatné súbory našej aplikácie, ktoré je možné aj premazať.

• package.json - Definuje, aké balíčky v akých verziách aplikácia používa.
• README.md - Dokumentácia aplikácie.

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