Din första React-app med Vite

Jag visar: sätta upp projektet

Vite (uttalas “veet”, franska för “snabb”) är ett verktyg som förbereder ett färdigt React-projektskelett åt dig. Öppna terminalen och gå dit du vill ha projektet (som skrivbordet):

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

Vite kan fråga något – bekräfta med Enter. Sedan:

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

• npm install laddar ner allt projektet behöver (det tar en stund – React och hjälparna hamnar i mappen node_modules).
• npm run dev -- --port 3901 startar utvecklingsservern. Terminalen visar adressen http://localhost:3901. Öppna den i webbläsaren.

Ser du en snurrande logotyp och rubriken “Vite + React”? Grattis – din första React-app kör! 🎉

En rundtur i projektet

Öppna mappen my-react-web i VS Code (File → Open Folder). Det ser ut som många filer, men bara tre spelar roll för dig just nu:

Ignorera resten för nu (öppna eller radera aldrig node_modules, package.json är en lista över projektets paket).

Din första ändring i koden

Öppna src/App.jsx. Radera allt och 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;

Spara – och sidan i webbläsaren ändrades av sig själv. Här är vad du tittar på:

• Komponenten App är en funktion som returnerar HTML (den här notationen kallas JSX).
• {name} – klammerparenteser sätter in JavaScript i HTML. Vad som helst: en variabel, en uträkning {2 + 3}, till och med ett villkor.
• export default App – “jag erbjuder den här komponenten till andra filer” (main.jsx är den som tar den).

JSX har två egenheter du vänjer dig vid: i stället för class skriver du className (class är ett reserverat ord i JavaScript), och en komponent måste returnera ett omslagselement (därför finns en <div> runt allt).

Nu är det din tur 💪

1. Sätt upp projektet efter guiden och få det att köra.
2. Redigera App.jsx: en rubrik med ditt namn, ett stycke om vad du bygger, och en variabel age som du visar i meningen I am {age} years old.
3. Radera medvetet en avslutande tagg och se hur felet ser ut – Vite visar det direkt i webbläsaren, med radnummer. Fixa det sedan.
4. Stoppa servern (Ctrl+C i terminalen) och starta den igen (npm run dev -- --port 3901) – för att få hela cykeln under fingrarna.

Det här tar du med dig från lektionen

• npm create vite@latest sätter upp ett projekt, npm install laddar ner paket, npm run dev startar localhost.
• Du skriver kod i src/App.jsx: en komponent är en funktion som returnerar JSX, {} sätter in JavaScript i HTML.
• I JSX: className i stället för class, alltid ett omslagselement.

© 2026 Ing. Martin Polak / AlgoRhino · Villkor för innehållsanvändning