Tvoja prva React aplikacija z Vite

Pokažem ti: postavitev projekta

Vite (izgovarja se “vit”, po francosko “hiter”) je orodje, ki ti pripravi gotovo okostje React projekta. Odpri terminal in pojdi tja, kjer naj projekt živi (npr. Namizje):

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

Vite te morda kaj vpraša – potrdi z Enter. Nato:

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

• npm install prenese vse, kar projekt potrebuje (traja trenutek – React in pomočniki se prenesejo v mapo node_modules).
• npm run dev -- --port 3901 zažene razvojni strežnik. Terminal pokaže naslov http://localhost:3901. Odpri ga v brskalniku.

Vidiš vrtajočo se logo in naslov “Vite + React”? Čestitamo – tvoja prva React aplikacija teče! 🎉

Ogled projekta

Odpri mapo my-react-web v VS Code (File → Open Folder). Izgleda kot veliko datotek, a zdaj so pomembne le tri:

Za zdaj prezri ostalo (nikoli ne odpiraj ali briši node_modules, package.json je seznam paketov projekta).

Tvoja prva sprememba kode

Odpri src/App.jsx. Izbriši vse in napiši:

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;

Shrani – in stran v brskalniku se je spremenila sama. Kar gledaš:

• Komponenta App je funkcija, ki vrne HTML (ta zapis se imenuje JSX).
• {name} – zavitimi oklepaji vstavijo JavaScript v HTML. Karkoli: spremenljivka, izračun {2 + 3}, celo pogoj.
• export default App – “to komponento ponujam drugim datotekam” (vzame jo main.jsx).

JSX ima dve posebnosti, na kateri se boš navadil: namesto class pišeš className (class je rezervirana beseda v JavaScriptu), komponenta mora vrniti en ovojni element (zato je <div> okoli vsega).

Zdaj si na vrsti 💪

1. Postavi projekt po navodilih in ga zaženi.
2. Uredi App.jsx: naslov s tvojim imenom, odstavek o tem, kaj gradiš, in spremenljivka age, ki jo prikažeš v stavku I am {age} years old.
3. Namerno izbriši zapiralno oznako in poglej, kako izgleda napaka – Vite jo pokaže v brskalniku s številko vrstice. Potem jo popravi.
4. Ustavi strežnik (Ctrl+C v terminalu) in ga znova zaženi (npm run dev -- --port 3901) – da ti je cikel pod prsti.

Kaj si vzameš iz te lekcije

• npm create vite@latest postavi projekt, npm install prenese pakete, npm run dev zažene localhost.
• Kodo pišeš v src/App.jsx: komponenta je funkcija, ki vrne JSX, {} vstavi JavaScript v HTML.
• V JSX: className namesto class, vedno en ovojni element.

© 2026 Ing. Martin Polak / AlgoRhino · Pogoji uporabe vsebine