Tvoja prvá React aplikácia s Vite

Priprav si skutočný React projekt, spusti ho a zorientuj sa v tom, čo vzniklo.

Ukážem ti: nastavenie projektu

Vite (vyslovuje sa „vit”, po francúzsky „rýchly”) je nástroj, ktorý ti pripraví hotovú kostru React projektu. Otvor terminál a prejdi tam, kde má projekt žiť (napríklad na Plochu):

cd Desktop
npm create vite@latest my-react-web -- --template react

Vite sa možno niečo opýta – potvrď Enterom. Potom:

cd my-react-web
npm install
npm run dev -- --port 3901

npm install stiahne všetko, čo projekt potrebuje (chvíľu to trvá – React a pomocníci sa stiahnu do priečinka node_modules).
npm run dev -- --port 3901 spustí vývojový server. Terminál ukáže adresu http://localhost:3901. Otvor ju v prehliadači.

Vidíš točiacu sa logo a nadpis „Vite + React”? Gratulujem – tvoja prvá React aplikácia beží! 🎉

💡

Čo je localhost? „Server” bežiaci len na tvojom počítači. Vidíš ho len ty – je to tvoje súkromné ihrisko. A najlepšie: keď zmeníš kód a uložíš, stránka sa okamžite sama obnoví. Už žiadne nekonečné F5!

Prehliadka projektu

Otvor priečinok my-react-web vo VS Code (File → Open Folder). Vyzerá to ako veľa súborov, ale teraz záležia len na troch:

Súbor	Čo to je
`index.html`	jediné HTML na celom webe – takmer prázdne, len `<div id="root">`
`src/main.jsx`	štartér: vezme aplikáciu a vloží ju do toho divu
`src/App.jsx`	hlavný komponent – tu budeš písať kód
`src/App.css`	štýly – obyčajné CSS, ako poznáš

Zvyšok zatiaľ ignoruj (nikdy neotváraj ani nemaž node_modules, package.json je zoznam balíčkov projektu).

Tvoja prvá zmena v kóde

Otvor src/App.jsx. Zmaž všetko a napíš:

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

Ulož – a stránka v prehliadači sa sama zmenila. Pozeráš sa na:

Komponent App je funkcia, ktorá vracia HTML (táto notácia sa volá JSX).
{name} – zložené zátvorky vložia JavaScript do HTML. Čokoľvek: premennú, výpočet {2 + 3}, aj podmienku.
export default App – „ponúkam tento komponent iným súborom” (main.jsx ho berie).

JSX má dve zvláštnosti, na ktoré si zvykneš: namiesto class píšeš className (class je rezervované slovo v JavaScripte) a komponent musí vrátiť jeden obalový prvok (preto je okolo všetkého <div>).

Teraz ty 💪

Postav projekt podľa návodu a spusti ho.
Uprav App.jsx: nadpis s tvojím menom, odstavec o tom, čo staviaš, a premenná age, ktorú zobrazíš vo vete I am {age} years old.
Úmyselne zmaž uzatvárací tag a pozri sa, ako vyzerá chyba – Vite ju ukáže priamo v prehliadači s číslom riadku. Potom ju oprav.
Zastav server (Ctrl+C v termináli) a znova ho spusti (npm run dev -- --port 3901) – aby si mal celý cyklus v prstoch.

✅

Skontroluj sa: Projekt beží na localhoste, vieš ho zastaviť a spustiť a keď upravíš App.jsx a uložíš, prehliadač sa sám prekreslí. Vývojársky cyklus točí!

Čo si z tejto lekcie odnášaš

npm create vite@latest pripraví projekt, npm install stiahne balíčky, npm run dev spustí localhost.
Kód píšeš v src/App.jsx: komponent je funkcia vracajúca JSX, {} vkladá JavaScript do HTML.
V JSX: className namiesto class, vždy jeden obalový prvok.

Táto lekcia je súčasťou plateného levelu

Ukážem ti: nastavenie projektu

Prehliadka projektu

Tvoja prvá zmena v kóde

Teraz ty 💪

Čo si z tejto lekcie odnášaš