Het Opzetten en Uitvoeren van een React-Project met Vite

Tot nu toe heb je gewerkt met geïsoleerde React-voorbeelden. In de praktijk worden React-applicaties opgezet en uitgevoerd als projecten met een vooraf gedefinieerde structuur en tooling.

In dit hoofdstuk leer je hoe je een React-project opzet en uitvoert met Vite, een modern build-tool dat snel, lichtgewicht en veelgebruikt is in productieprojecten.

Een React-project aanmaken met Vite

Om een nieuw React-project aan te maken, open de terminal en voer het volgende commando uit:

npm create vite@latest

Je wordt gevraagd om:

1. Een projectnaam in te voeren;
2. Een framework te selecteren → kies React;
3. Een variant te selecteren → kies JavaScript.

Zodra de setup voltooid is, navigeer je naar de projectmap:

cd project-name

Installeer de projectafhankelijkheden:

npm install

De ontwikkelserver starten

Om de React-ontwikkelserver te starten, voer uit:

npm run dev

Na het uitvoeren van dit commando:

• Vite start een lokale ontwikkelserver;
• Een lokale URL (meestal http://localhost:5173) verschijnt in de terminal;
• Door deze URL in de browser te openen, wordt de React-app weergegeven.

Alle wijzigingen in de code worden automatisch bijgewerkt in de browser.

Begrijpen wat er zojuist is gebeurd

Toen je de ontwikkelserver startte:

• Vite bundelde je React-code;
• React renderde de applicatie in de browser;
• De app ging in ontwikkelmodus, geoptimaliseerd voor snelle feedback.

Je hebt nu een echt React-project lokaal draaien.