Din første React-app med Vite

Vis mig: opsætning af projektet

Vite (udtales “veet,” fransk for “hurtig”) er et værktøj, der forbereder et færdigt React-projektskelet til dig. Åbn terminalen og gå til, hvor du vil have projektet til at bo (som dit Skrivebord):

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

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

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

• npm install downloader alt, projektet har brug for (det tager et øjeblik – React og dets hjælpere downloades til mappen node_modules).
• npm run dev -- --port 3901 starter udviklingsserveren. Terminalen viser adressen http://localhost:3901. Åbn den i din browser.

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

En rundtur i projektet

Åbn mappen my-react-web i VS Code (File → Open Folder). Det ligner mange filer, men kun tre betyder noget for dig lige nu:

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

Din første ændring i koden

Åbn 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;

Gem – og siden i browseren ændrede sig af sig selv. Her er, hvad du kigger på:

• App-komponenten er en funktion, der returnerer HTML (denne notation kaldes JSX).
• {name} – krøllede parenteser indsætter JavaScript i HTML. Hvad 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 tager den).

JSX har to særheder, du vænner dig 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).

Nu er det din tur 💪

1. Sæt projektet op efter guiden og få det til at køre.
2. Rediger App.jsx: en overskrift med dit navn, et afsnit om, hvad du bygger, og en variabel age, som du viser i sætningen I am {age} years old.
3. Slet bevidst et lukketag og se, hvordan fejlen ser ud – Vite viser den direkte i browseren 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.

Det tager du med fra denne lektion

• npm create vite@latest sætter 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, {} indsætter JavaScript i HTML.
• I JSX: className i stedet for class, altid ét indpakningselement.

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