Oppsett og Kjøring av et React-prosjekt med Vite

Så langt har du jobbet med isolerte React-eksempler. I reell utvikling opprettes og kjøres React-applikasjoner som prosjekter med en forhåndsdefinert struktur og verktøystøtte.

I dette kapittelet lærer du hvordan du oppretter og kjører et React-prosjekt ved hjelp av Vite, et moderne byggeverktøy som er raskt, lettvektig og ofte brukt i produksjonsprosjekter.

Opprette et React-prosjekt med Vite

For å opprette et nytt React-prosjekt, åpne terminalen og kjør følgende kommando:

npm create vite@latest

Du vil bli bedt om å:

1. Skriv inn et prosjektnavn;
2. Velg et rammeverk → velg React;
3. Velg en variant → velg JavaScript.

Når oppsettet er fullført, naviger inn i prosjektmappen:

cd project-name

Installer prosjektavhengighetene:

npm install

Kjøre utviklingsserveren

For å starte React-utviklingsserveren, kjør:

npm run dev

Etter å ha kjørt denne kommandoen:

• Vite starter en lokal utviklingsserver;
• En lokal URL (vanligvis http://localhost:5173) vises i terminalen;
• Åpner du denne URL-en i nettleseren, vises React-appen din.

Eventuelle endringer du gjør i koden vil automatisk oppdateres i nettleseren.

Forstå hva som nettopp skjedde

Når du kjørte utviklingsserveren:

• Vite pakket React-koden din;
• React gjengav applikasjonen i nettleseren;
• Appen gikk inn i utviklingsmodus, optimalisert for rask tilbakemelding.

Du har nå et ekte React-prosjekt som kjører lokalt.