Konfigurera och Köra ett React-Projekt med Vite

Hittills har du arbetat med isolerade React-exempel. Vid utveckling i verkliga projekt skapas och körs React-applikationer som projekt med en fördefinierad struktur och verktyg.

I detta kapitel lär du dig hur du skapar och kör ett React-projekt med hjälp av Vite, ett modernt byggverktyg som är snabbt, lättviktigt och vanligt förekommande i produktionsprojekt.

Skapa ett React-projekt med Vite

För att skapa ett nytt React-projekt, öppna din terminal och kör följande kommando:

npm create vite@latest

Du kommer att bli ombedd att:

1. Ange ett projektnamn;
2. Välja ett ramverk → välj React;
3. Välja en variant → välj JavaScript.

När installationen är klar, navigera in i projektmappen:

cd project-name

Installera projektets beroenden:

npm install

Köra utvecklingsservern

För att starta React-utvecklingsservern, kör:

npm run dev

Efter att ha kört detta kommando:

• Vite startar en lokal utvecklingsserver;
• En lokal URL (vanligtvis http://localhost:5173) visas i terminalen;
• Om du öppnar denna URL i webbläsaren visas din React-app.

Alla ändringar du gör i koden uppdateras automatiskt i webbläsaren.

Förstå vad som just hände

När du startade utvecklingsservern:

• Vite paketerade din React-kod;
• React renderade applikationen i webbläsaren;
• Appen gick in i utvecklingsläge, optimerat för snabb återkoppling.

Du har nu ett riktigt React-projekt som körs lokalt.