Opsætning og Kørsel af et React-Projekt med Vite

Indtil nu har du arbejdet med isolerede React-eksempler. I virkelig udvikling oprettes og køres React-applikationer som projekter med en foruddefineret struktur og værktøjer.

I dette kapitel lærer du, hvordan du opretter og kører et React-projekt ved hjælp af Vite, et moderne build-værktøj, der er hurtigt, letvægts og ofte anvendt i produktionsprojekter.

Oprettelse af et React-projekt med Vite

For at oprette et nyt React-projekt skal du åbne din terminal og køre følgende kommando:

npm create vite@latest

Du vil blive bedt om at:

1. Indtaste et projektnavn;
2. Vælge et framework → vælg React;
3. Vælge en variant → vælg JavaScript.

Når opsætningen er færdig, skal du navigere ind i projektmappen:

cd project-name

Installer projektets afhængigheder:

npm install

Kørsel af udviklingsserveren

For at starte React-udviklingsserveren skal du køre:

npm run dev

Efter at have kørt denne kommando:

• Vite starter en lokal udviklingsserver;
• En lokal URL (typisk http://localhost:5173) vises i terminalen;
• Når du åbner denne URL i browseren, vises din React-app.

Alle ændringer, du foretager i koden, opdateres automatisk i browseren.

Forståelse af hvad der lige skete

Når du kørte udviklingsserveren:

• Vite bundtede din React-kode;
• React gengav applikationen i browseren;
• Appen gik i udviklingstilstand, optimeret til hurtig feedback.

Du har nu et ægte React-projekt kørende lokalt.