# Lerne Claude Code kennen: Dein KI-Coding-Partner

Das ist die Lektion, in der es spannend wird. Du lernst gleich das Tool kennen, das Vibe Coding moeglich macht -- Claude Code.

## Was ist Claude Code?

Claude Code ist Anthropics Terminal-nativer KI-Coding-Assistent. Anders als beim Chatten mit Claude in einem Browserfenster laeuft Claude Code **direkt auf deinem Computer**. Es kann deine Projektdateien lesen, deine Codebasis verstehen und echten Code in dein Dateisystem schreiben.

<div class="concept-box">
<h4>Konzept</h4>
Stell dir Claude Code als einen erfahrenen Entwickler vor, der neben dir sitzt -- einen, der sich nie ueber einfache Fragen aergert, so schnell arbeitet wie du tippen kannst und die Dokumentation fuer jedes populaere Framework gelesen hat. Du beschreibst, was du willst; es baut es.
</div>

Der wesentliche Unterschied zum browserbasierten KI-Chat:
- Es **sieht dein Projekt** -- es weiss, welche Dateien du hast, welcher Code geschrieben ist, welche Tools installiert sind
- Es **schreibt echte Dateien** -- keinen Code in einem Chat-Fenster, den du kopieren musst, sondern tatsaechliche Dateien auf deinem Computer
- Es **fuehrt Befehle aus** -- es kann Pakete installieren, Server starten, Tests ausfuehren
- Es **fragt um Erlaubnis** -- du ueberpruefst und genehmigst Aenderungen immer, bevor sie vorgenommen werden

## Claude Code installieren

**Schritt 1: Installation ueber dein Terminal**

Oeffne dein Terminal und fuehre aus:

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

Dies installiert Claude Code global auf deinem Rechner.

**Schritt 2: Authentifizierung**

Navigiere zu deinem Projektordner und fuehre aus:
```
cd waitlist-wizard
claude
```

Beim ersten Ausfuehren oeffnet Claude Code deinen Browser, um dich mit deinem Claude Pro Konto zu authentifizieren. Melde dich an und autorisiere die Verbindung.

**Schritt 3: Ueberpruefen**

Nach der Authentifizierung solltest du den Claude Code Prompt in deinem Terminal sehen. Tippe eine Nachricht zum Testen:

```
What's in this folder?
```

Claude sollte antworten, indem es die Dateien in deinem `waitlist-wizard`-Verzeichnis auflistet (nur die README.md aus der letzten Lektion).

<div class="try-it">
<h4>Probier es aus</h4>
Fuehre <code>claude</code> in deinem Terminal aus und tippe dann: <strong>"Create a file called index.html with a simple hello world page"</strong>. Beobachte, wie Claude die Datei erstellt, und oeffne sie dann in VS Code -- sie ist wirklich da!
</div>

## Das Berechtigungssystem verstehen

Claude Code arbeitet mit einem **Review-und-Genehmigung**-Workflow. Wenn es eine Datei erstellen oder aendern moechte, wird es:

1. Dir genau zeigen, was es vorhat
2. Auf deine Genehmigung warten, bevor Aenderungen vorgenommen werden
3. Erst fortfahren, wenn du zustimmst

Das bedeutet: **Du hast immer die Kontrolle.** Claude aendert deine Dateien nicht ohne deine ausdrueckliche Erlaubnis.

Fuer einfache Aufgaben, bei denen du dem Vorgang vertraust, kannst du den "Accept all"-Modus waehlen -- aber als Anfaenger ist es gute Praxis, jede Aenderung zu ueberpruefen, damit du lernst, was gebaut wird.

## Die CLAUDE.md-Datei

Jedes Projekt kann eine `CLAUDE.md`-Datei haben -- eine Art "Projektgedaechtnis", das Claude ueber deine Praeferenzen, deinen Tech Stack und deine bevorzugte Arbeitsweise informiert.

<div class="try-it">
<h4>Probier es aus</h4>
Tippe in deiner Claude Code Sitzung: <strong>/init</strong>
<br><br>
Das erstellt eine CLAUDE.md-Datei. Bearbeite sie dann (in VS Code oder ueber Claude), um Folgendes einzufuegen:
<br><br>
<code>This is a beginner project. Explain changes simply. Use Next.js with TypeScript and Tailwind CSS.</code>
</div>

Claude liest diese Datei zu Beginn jeder Konversation, sodass es immer den Kontext deines Projekts kennt.

## Plan Mode: Erst denken, dann bauen

Eines der maechtigsten Features von Claude Code ist der **Plan Mode**. Anstatt direkt in den Code zu springen, bittet der Plan Mode Claude, das Problem zu analysieren und zuerst Schritte zu skizzieren.

Wann du den Plan Mode nutzen solltest:
- Komplexe Features, die mehrere Dateien betreffen
- Alles, worueber du unsicher bist
- Wenn du den Ansatz verstehen willst, bevor du dich festlegst

Wann du ihn ueberspringen kannst:
- Einfache Aenderungen in einer Datei
- Schnelle Fixes und kleine Anpassungen

Um den Plan Mode zu starten, tippe `/plan` gefolgt von deiner Anfrage:

```
/plan Add an email signup form to the landing page that validates the email and shows a success message
```

Claude antwortet mit einem Schritt-fuer-Schritt-Plan. Du kannst den Plan diskutieren, aendern oder genehmigen, bevor Code geschrieben wird.

## Wichtige Befehle -- Spickzettel

| Befehl | Was er tut |
|--------|-----------|
| `/help` | Alle verfuegbaren Befehle anzeigen |
| `/clear` | Neue Konversation starten |
| `/compact` | Konversation zusammenfassen, um Kontext zu sparen |
| `/plan` | Plan Mode starten -- erst denken, dann bauen |
| `/model` | Zwischen Sonnet (schnell) und Opus (gruendlich) wechseln |

<div class="pro-tip">
<h4>Pro-Tipp</h4>
Nutze <strong>Sonnet</strong> fuer schnelle Aufgaben wie einen Tippfehler beheben oder ein einfaches Element hinzufuegen. Nutze <strong>Opus</strong> fuer komplexe Features, knifflige Debugging-Probleme oder wenn Sonnets Ausgabe nicht ganz passt. Sonnet ist schneller und guenstiger; Opus ist intelligenter und gruendlicher.
</div>

## Deine erste echte Interaktion

Lass uns etwas Echtes machen. Probiere in deiner Claude Code Sitzung diesen Prompt:

```
Delete the index.html file and replace it with a proper Next.js project. 
We'll set that up in the next lesson, so for now, just clean up.
```

Claude wird die Testdatei entfernen und dein Projekt fuer den naechsten Schritt vorbereiten.

<div class="honest-note">
<h4>Ehrlicher Hinweis</h4>
Claude Code ist dein Co-Pilot, nicht dein Autopilot. Je besser du kommunizierst, was du willst, desto besser sind die Ergebnisse. Vage Prompts liefern vagen Code. Spezifische, beschreibende Prompts liefern genau das, was du brauchst. Wir ueben diese Faehigkeit im gesamten Kurs.
</div>

## Wichtigste Erkenntnis

Claude Code ist installiert, authentifiziert und einsatzbereit. Du hattest dein erstes Gespraech, hast deine erste Datei erstellt und die wichtigsten Befehle gelernt. Ab jetzt ist Claude dein Partner beim Bau von Waitlist Wizard.

<div class="checkpoint">
<h4>Checkpoint</h4>
Claude Code ist installiert und funktioniert. Du hast eine Testdatei erstellt und geloescht, CLAUDE.md eingerichtet und die wichtigsten Befehle gelernt. Als Naechstes: Den richtigen Tech Stack fuer dein Projekt waehlen.
</div>