Tvoja prva React aplikacija s Viteom

Pokazat ću ti: postavljanje projekta

Vite (izgovara se “vit,” francuski za “brz”) je alat koji ti priprema gotov kostur React projekta. Otvori terminal i prijeđi tamo gdje želiš da projekt živi (npr. radna površina):

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

Vite možda nešto pita – potvrdi s Enterom. Zatim:

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

• npm install preuzima sve što projekt treba (traje trenutak – React i pomoćnici se preuzimaju u mapu node_modules).
• npm run dev -- --port 3901 pokreće razvojni server. Terminal će pokazati adresu http://localhost:3901. Otvori je u pregledniku.

Vidiš vrtjeću se logotip i naslov “Vite + React”? Čestitamo – tvoja prva React aplikacija radi! 🎉

Obilazak projekta

Otvori mapu my-react-web u VS Codeu (Datoteka → Otvori mapu). Izgleda kao puno datoteka, ali samo tri su ti sada bitne:

Ostalo zasad ignoriraj (nikad ne otvaraj ili briši node_modules, package.json je popis paketa projekta).

Tvoja prva promjena koda

Otvori src/App.jsx. Obriši sve i 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;

Spremi – i stranica u pregledniku se sama promijenila. Evo što gledaš:

• Komponenta App je funkcija koja vraća HTML (ovaj zapis zove se JSX).
• {name} – vitičaste zagrade ubacuju JavaScript u HTML. Bilo što: varijablu, izračun {2 + 3}, čak i uvjet.
• export default App – “nudim ovu komponentu drugim datotekama” (main.jsx je onaj koji je uzima).

JSX ima dvije mane koje ćeš naviknuti: umjesto class pišeš className (class je rezervirana riječ u JavaScriptu), a komponenta mora vratiti jedan omotni element (zato je <div> oko svega).

Sad si ti na redu 💪

1. Postavi projekt prema vodiču i pokreni ga.
2. Uredi App.jsx: naslov s tvojim imenom, odlomak o tome što gradiš i varijablu age koju prikažeš u rečenici Imam {age} godina.
3. Namjerno obriši zatvarajući tag i pogledaj kako izgleda greška – Vite je prikazuje izravno u pregledniku, s brojem retka. Zatim popravi.
4. Zaustavi server (Ctrl+C u terminalu) i ponovo ga pokreni (npm run dev -- --port 3901) – da ti cijeli ciklus sjedne pod prste.

Što ćeš ponijeti iz ove lekcije

• npm create vite@latest postavlja projekt, npm install preuzima pakete, npm run dev pokreće localhost.
• Kod pišeš u src/App.jsx: komponenta je funkcija koja vraća JSX, {} ubacuje JavaScript u HTML.
• U JSX-u: className umjesto class, uvijek jedan omotni element.

© 2026 Ing. Martin Polak / AlgoRhino · Uvjeti korištenja sadržaja