Din første React-app med Vite

Jeg viser deg: opsetning af projektet

Vite (udtales “veet,” fransk for “hurtig”) er et verktøy, der forbereder et færdigt React-projektskjelett til deg. Åpne terminalen og gå til, hvor du vil have projektet til at bo (som ditt Skrivebord):

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

Vite spørger måske om noe – bekræft med Enter. Så:

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

• npm install downloader alt, projektet har bruk for (det tar et øyeblikk – React og dets hjelpere downloades til mappen node_modules).
• npm run dev -- --port 3901 starter udviklingsserveren. Terminalen viser adressen http://localhost:3901. Åpne den i nettleseren.

Ser du et snurrende logo og overskriften “Vite + React”? Gratulerer – din første React-app kjører! 🎉

En rundtur i projektet

Åpne mappen my-react-web i VS Code (File → Open Folder). Det ligner mange filer, men kun tre betyder noe for deg akkurat nå:

Ignorer resten for nu (åpne eller slet aldrig node_modules, package.json er en liste over projektets pakker).

Din første endring i koden

Åpne src/App.jsx. Slet alt og skriv:

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;

Lagre – og siden i nettleseren endret sig af sig selv. Her er, hva du ser på:

• App-komponenten er en funktion, der returnerer HTML (denne notation kaldes JSX).
• {name} – krøllede parenteser indsetter JavaScript i HTML. Hva som helst: en variabel, en beregning {2 + 3}, endda en betingelse.
• export default App – “jeg tilbyder denne komponent til andre filer” (main.jsx er den, der tar den).

JSX har to særheder, du vænner deg til: i stedet for class skriver du className (class er et reserveret ord i JavaScript), og en komponent skal returnere ét indpakningselement (derfor er der et <div> omkring det hele).

Nå er det din tur 💪

1. Sett projektet op etter guiden og få det til at kjøre.
2. Rediger App.jsx: en overskrift med ditt navn, et avsnitt om, hva du bygger, og en variabel age, som du viser i setningen I am {age} years old.
3. Slet bevidst et lukketag og se, hvordan feilen ser ut – Vite viser den direkte i nettleseren med linjenummeret. Ret den så.
4. Stop serveren (Ctrl+C i terminalen) og start den igen (npm run dev -- --port 3901) – for at få hele cyklussen under fingrene.

Dette tar du med deg fra leksjonen

• npm create vite@latest setter et projekt op, npm install downloader pakker, npm run dev starter localhost.
• Du skriver kode i src/App.jsx: en komponent er en funktion, der returnerer JSX, {} indsetter JavaScript i HTML.
• I JSX: className i stedet for class, altid ét indpakningselement.

© 2026 Ing. Martin Polak / AlgoRhino · Vilkår for innholdsbruk