How to use Claude Code: stap-voor-stap

How to Use Claude Code: Complete Handleiding [2025]

Wat is Claude Code?

• Lezen: Je hele codebase analyseren
• Schrijven: Bestanden creëren en aanpassen
• Uitvoeren: Commando's runnen (tests, builds, etc.)
• Navigeren: Zoeken door je project
• Redeneren: Complexe problemen oplossen

Claude Code vs Andere Tools

Wat Heb Je Nodig?

Systeemvereisten

• Node.js: Versie 18 of hoger
• Terminal: Mac Terminal, Linux bash, of Windows PowerShell
• Git: Aanbevolen voor version control
• Disk space: Minimaal 100MB

Account en Kosten

• Anthropic account: Maak aan op console.anthropic.com
• API key: Genereer in de console
• Credits: Start met ~€5-10 om te experimenteren

Stap 1: Installatie

Mac/Linux

npm install -g @anthropic-ai/claude-code

claude-code --version

Windows

# In PowerShell als Administrator
npm install -g @anthropic-ai/claude-code

# Set execution policy indien nodig
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Via npx (zonder installatie)

npx @anthropic-ai/claude-code

Stap 2: API Key Configureren

Methode 1: Environment Variable (Aanbevolen)

export ANTHROPIC_API_KEY="sk-ant-api03-..."

source ~/.bashrc  # of ~/.zshrc

$env:ANTHROPIC_API_KEY = "sk-ant-api03-..."

Methode 2: Per Sessie

ANTHROPIC_API_KEY="sk-ant-api03-..." claude-code

Methode 3: .env File

ANTHROPIC_API_KEY=sk-ant-api03-...

Stap 3: Je Eerste Sessie

Project Openen

cd ~/projects/mijn-web-app
claude-code

claude-code> 

Eerste Prompt: Project Analyse

claude-code> Geef een samenvatting van dit project

• Technische stack
• Belangrijkste functionaliteiten
• Projectstructuur
• Dependencies

Code Laten Uitleggen

claude-code> Leg uit hoe de authenticatie werkt in dit project

Stap 4: Code Genereren en Aanpassen

Feature Toevoegen

claude-code> Voeg een dark mode toggle toe aan de header

1. Je huidige code analyseren
2. Een plan maken
3. De benodigde bestanden identificeren
4. Code schrijven/aanpassen
5. Uitleggen wat er veranderd is

Bugs Fixen

claude-code> Er is een bug: de form submit werkt niet op mobile. Fix dit.

claude-code> Fix de bug in ContactForm.tsx waar de submit handler niet triggert op iOS Safari. De onclick event lijkt niet te werken op touch devices.

Refactoring

claude-code> Refactor de UserService class om dependency injection te gebruiken in plaats van hardcoded imports

Stap 5: Tests en Quality Assurance

Tests Genereren

claude-code> Schrijf unit tests voor de calculateTotal functie in utils/pricing.ts

Tests Runnen

claude-code> Run de tests en fix eventuele failures

Code Review

claude-code> Review de laatste wijzigingen en geef feedback

Effectieve Prompts Schrijven

Wees Specifiek

Geef Context

claude-code> We gebruiken Tailwind CSS voor styling en shadcn/ui voor componenten. Voeg een modal toe voor het bewerken van gebruikersprofielen.

Splits Complexe Taken

claude-code> Bouw een complete authentication system met login, registratie, password reset, 2FA, en social login

claude-code> Stap 1: Maak de basis login functionaliteit met email/password

Vraag om Uitleg

claude-code> Leg je plan uit voordat je code schrijft voor het implementeren van caching

Slash Commands

Basis Commands

File Operations

Development Commands

Git Integration

CLAUDE.md: Project Instructies

Voorbeeld CLAUDE.md

# Project: MijnWebApp

## Stack
- Frontend: React + TypeScript + Vite
- Styling: Tailwind CSS + shadcn/ui
- Backend: Express + Node.js
- Database: PostgreSQL + Prisma

## Conventies
- Gebruik functionele components met hooks
- Altijd TypeScript strict mode
- Testen met Vitest en React Testing Library
- Commits in conventional commits format

## Belangrijke Folders
- /src/components - UI componenten
- /src/hooks - Custom React hooks
- /src/api - API client functies
- /server - Express backend

## Commands
- `npm run dev` - Start development server
- `npm test` - Run tests
- `npm run build` - Production build

## Notes
- De database draait lokaal op port 5432
- API endpoints beginnen met /api/v1
- Feature flags staan in config/features.ts

MCP Integraties

Wat is MCP?

• Databases bevragen
• APIs aanroepen
• File systems navigeren
• Custom tools gebruiken

MCP Configureren

{
  "mcpServers": {
    "database": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-postgres"],
      "env": {
        "DATABASE_URL": "postgresql://localhost:5432/mydb"
      }
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-github"],
      "env": {
        "GITHUB_TOKEN": "${GITHUB_TOKEN}"
      }
    }
  }
}

Populaire MCP Servers

VS Code Integratie

Optie 1: VS Code Terminal

1. Open VS Code in je project
2. Open de geintegreerde terminal (Ctrl+`)
3. Run claude-code

Optie 2: Claude Code Extension

• Keyboard shortcuts voor common commands
• Output direct in VS Code panels
• File navigation integratie

Geavanceerde Technieken

Memory en Context Management

claude-code> Onthoud: in dit project gebruiken we altijd Zod voor validation

# Later...
claude-code> Voeg validation toe aan het user registration form
# Claude gebruikt automatisch Zod

Multi-Step Workflows

claude-code> Ik wil een admin dashboard bouwen. Laten we stap voor stap werken.
claude-code> Stap 1: Plan de architectuur
claude-code> Stap 2: Maak de basis layout
claude-code> Stap 3: Voeg de sidebar navigatie toe
# etc.

Git Integration

claude-code> Wat zijn de wijzigingen sinds de laatste commit?
claude-code> Maak een commit met een beschrijvende message
claude-code> Welke branches bestaan er en waar werk ik aan?

Debugging Strategies

claude-code> De app crasht bij het laden van gebruikers. Analyseer de logs en vind de oorzaak.

claude-code> Voeg verbose logging toe aan de authentication flow zodat we kunnen debuggen.

claude-code> Zet breakpoints in de code en leg uit hoe ik kan debuggen.

Best Practices

1. Commit Vaak

claude-code> Commit deze wijziging

2. Review Voordat Je Accepteert

claude-code> Leg uit wat deze wijziging doet voordat ik het accepteer

3. Gebruik Version Control

4. Start Met Kleine Taken

# Goed: klein beginnen
claude-code> Voeg een loading spinner toe aan de submit button
claude-code> Nu voeg error handling toe
claude-code> Voeg success feedback toe

# Minder goed: alles in een keer
claude-code> Maak de complete form met validation, error handling, loading states, en success feedback

5. Wees Expliciet Over Constraints

claude-code> Voeg een search functie toe. Gebruik GEEN externe libraries, alleen native JavaScript.

Troubleshooting

"API key not found"

# Check of de variable is gezet
echo $ANTHROPIC_API_KEY

# Als leeg, set opnieuw
export ANTHROPIC_API_KEY="sk-ant-..."

"Command not found: claude-code"

# Herinstalleer
npm install -g @anthropic-ai/claude-code

# Check npm global path
npm config get prefix

Trage Responses

• Check je internetverbinding
• Grote codebases nemen meer tijd
• Gebruik /compact voor snellere responses

Context Overschrijding

claude-code> /clear  # Reset de conversatie
claude-code> /compact  # Schakel naar kortere responses

Kosten Optimaliseren

Tips om kosten laag te houden:

1. Gebruik /compact mode voor simpele taken
2. Wees specifiek - vage prompts leiden tot meer iteraties
3. Splits grote taken - focus op een ding tegelijk
4. Vermijd onnodige context - niet elk bestand hoeft gelezen
5. Monitor je usage - check regelmatig je API dashboard

Kosten Schatting

Wat Claude Code Niet Kan

• Geen runtime debugging: Claude kan niet live debuggen
• Geen GUI interactie: Puur terminal-based
• Beperkte executie: Niet alle commands worden ondersteund
• Context limieten: Hele grote projecten passen niet in context
• Geen internet toegang: Zonder MCP geen web requests

Conclusie

1. Start simpel - Begin met kleine taken en bouw op
2. Wees specifiek - Goede prompts = goede output
3. Gebruik CLAUDE.md - Geef Claude project context
4. Commit vaak - Git is je vangnet
5. Blijf leren - Claude Code evolueert constant

Veelgestelde Vragen

Gerelateerde Artikelen

• Claude Code: De Complete Handleiding
• Claude Code vs Cursor: Welke Kies Je?
• Claude Code Pricing: Wat Kost Het?
• Claude Code MCP Integraties
• Prompt Engineering: Complete Gids

Hands-on Leren?