Project Setup

Twee Scenario's

Er zijn twee situaties waarin je met React projecten werkt:

• Bestaand project opstarten - project gecloned of gedownload
• Nieuw project aanmaken - compleet nieuw React project

Bestaand Project Opstarten

Wanneer je een bestaand React project hebt (bijvoorbeeld een opdracht die je hebt gecloned), moet je eerst de dependencies installeren.

Stap 1: Navigeer naar project folder

Open terminal in VSCode en ga naar de juiste folder:

# Voorbeeld: navigeer naar opdracht folder
cd opdracht-01-books

Stap 2: Dependencies installeren

Installeer alle benodigde packages. Dit maakt de node_modules folder aan:

npm install

Stap 3: Development server starten

Start het project:

npm run dev

Je terminal laat dit zien:

VITE v5.0.0  ready in 500 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

Open http://localhost:5173/ in je browser!

Complete Workflow

# 1. Navigeer naar project folder
cd opdracht-01-books

# 2. Installeer dependencies (alleen eerste keer)
npm install

# 3. Start development server
npm run dev

# Server stoppen: Ctrl+C

Nieuw Project Aanmaken

Wanneer gebruik je dit?

Deze instructies zijn voor wanneer je zelf een nieuw React project moet aanmaken. Voor de meeste opdrachten staat het project al klaar.

Stap 1: Repository Aanmaken en Clonen

Repository Aanmaken:

• Maak in GitHub (of GitLab) een public repository aan
• Geef de repository de naam van je project

Repository Clonen:

• Clone de repository met GitHub Desktop
• Open de repository folder in VSCode
• Je gaat nu een React project maken IN deze folder

Stap 2: Nieuw React Project Maken

Open terminal in VSCode en type:

npm create vite@latest

Doorloop alle stappen:

• Project naam: Type een punt (.) om het project in de huidige folder te maken
• Framework: Selecteer React
• Taal: Kies JavaScript

Voorbeeld in terminal:

✔ Project name: … .
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /current-directory...

Done. Now run:

  npm install
  npm run dev

Stap 3: Project Installeren en Starten

1. Dependencies Installeren:

npm install

npm install zorgt ervoor dat de node_modules folder wordt geïnstalleerd. Zonder deze folder werkt het niet!

2. Development Server Starten:

npm run dev

Met npm run dev start je het project. Elke keer als je gaat beginnen met React, type je npm run dev.

Je terminal laat dit zien:

VITE v5.0.0  ready in 500 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

Open http://localhost:5173/ in je browser!

Stap 4: Mappenstructuur

Na installatie heb je deze structuur:

my-repository/
├── node_modules/     ← Nooit verwijderen!
├── public/           ← Images, favicons, fonts
├── src/              ← Hier ga je werken!
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── index.html
├── package.json
├── vite.config.js
└── README.md

Troubleshooting

Server start niet?

• Check of je in de juiste folder zit (moet package.json bevatten)
• Run npm install opnieuw
• Check of poort 5173 vrij is

Module not found errors?

• Run npm install opnieuw
• Check of node_modules folder bestaat
• Restart VSCode

Port already in use?

• Stop andere React projecten (Ctrl+C)
• Of gebruik andere poort: npm run dev -- --port 3000

Quick Reference

# Bestaand project opstarten
cd opdracht-01-books
npm install
npm run dev

# Nieuw project aanmaken
npm create vite@latest
# Type: . (punt)
# Selecteer: React
# Selecteer: JavaScript
npm install
npm run dev

# Server stoppen
Ctrl+C