Programmieren mit Claude Code lernen

Lade die aktuelle Node.js LTS Version (v22.x oder höher) von nodejs.org herunter und installiere sie. Dies ist die Grundvoraussetzung, um Claude Code über das Terminal auszuführen.

• Prüfe die Installation im Terminal mit node -v und npm -v. Erledigt, wenn: Beide Befehle eine Versionsnummer im Terminal ausgeben.

Führe den Befehl npm install -g @anthropic-ai/claude-code in deinem Terminal aus, um das offizielle Agenten-Tool von Anthropic global zu installieren. Erledigt, wenn: Der Befehl claude --version erfolgreich eine Versionsnummer zurückgibt.

Erstelle einen API Key in der Anthropic Console (console.anthropic.com). Führe claude login aus und folge den Anweisungen, um deinen Key sicher zu hinterlegen.

• Stelle sicher, dass du über ausreichend Credits auf deinem Account verfügst. Erledigt, wenn: Die Meldung 'Successfully authenticated' im Terminal erscheint.

Claude Code arbeitet am besten innerhalb von Git-Repositories. Erstelle einen neuen Ordner claude-learning, wechsle hinein und führe git init aus.

• Claude nutzt Git, um Änderungen zu tracken und Rollbacks zu ermöglichen. Erledigt, wenn: Ein versteckter .git Ordner im Verzeichnis existiert.

Lege im Projektverzeichnis eine Datei namens .claudeconfig an. Definiere darin Standard-Verhaltensweisen (z.B. bevorzugte Test-Frameworks wie Vitest).

• Nutze Claude direkt: claude "Erstelle eine Standard-Konfigurationsdatei für dieses Projekt". Erledigt, wenn: Die Datei .claudeconfig im Root-Verzeichnis liegt.

Starte Claude mit dem Befehl claude. Nutze den Prompt: Erstelle eine Übersicht über die aktuelle Verzeichnisstruktur und schlage eine Roadmap für eine JavaScript-Lern-App vor.

• Beobachte, wie Claude die Dateien analysiert. Erledigt, wenn: Claude eine strukturierte Analyse deines (noch leeren) Projekts ausgibt.

Lass Claude eine Datei basics.js erstellen. Prompt: Erstelle eine JavaScript-Datei, die die Unterschiede zwischen let, const und var sowie die Datentypen String, Number, Boolean und Object erklärt und demonstriert. Erledigt, wenn: Die Datei basics.js existiert und korrekten Code enthält.

Prompt: Erweitere basics.js um Beispiele für if-else, switch-case und verschiedene Loops (for, while, forEach). Lass Claude den Code direkt in die Datei schreiben. Erledigt, wenn: Der Code in basics.js fehlerfrei mit node basics.js ausgeführt wird.

Projekt 1: Nutze Claude, um eine calc.js zu bauen, die Benutzereingaben über das Terminal (readline-sync) entgegennimmt.

• Prompt: Baue einen CLI-Rechner, der Addition, Subtraktion und Multiplikation beherrscht. Installiere notwendige npm-Pakete automatisch. Erledigt, wenn: Du im Terminal node calc.js startest und eine Rechnung durchführen kannst.

Wenn der Kontextverlauf zu lang wird, nutze den Slash-Befehl /compact innerhalb der Claude-Session.

• Dies fasst den bisherigen Verlauf zusammen, um Kosten zu sparen und die Präzision zu erhöhen. Erledigt, wenn: Claude die Meldung zur Kontext-Kompression bestätigt.

Prompt: Erstelle eine Datei async_demo.js. Simuliere einen API-Aufruf mit einer Verzögerung von 2 Sekunden unter Verwendung von Promises und Async/Await.

• Lass Claude erklären, warum await nur in async Funktionen funktioniert. Erledigt, wenn: Die Datei die verzögerte Ausgabe korrekt in der Konsole anzeigt.

Installiere sqlite3 via Claude. Prompt: Erstelle ein Skript db_test.js, das eine SQLite-Datenbank im Speicher erstellt, eine Tabelle 'users' anlegt und zwei Testdatensätze einfügt.

• Nutze deine SQL-Kenntnisse, um die Queries zu validieren. Erledigt, wenn: Das Skript die Daten erfolgreich aus der DB liest und ausgibt.

Prompt: Entwirf ein relationales Schema für eine Aufgabenverwaltung (Tasks, Categories, Users). Erstelle die SQL-Statements und eine JavaScript-Klasse, um darauf zuzugreifen. Erledigt, wenn: Eine Datei models.js mit funktionierenden SQL-Integrationen vorliegt.

Nutze den Befehl /review. Prompt: /review Analysiere meine models.js auf Sicherheitslücken (SQL Injection) und Best Practices.

• Setze die von Claude vorgeschlagenen Korrekturen sofort um. Erledigt, wenn: Claude keine kritischen Fehler mehr in der Datei findet.

Prompt: Erstelle ein neues React-Projekt mit Vite im Unterordner 'frontend'. Nutze TypeScript.

• Claude wird die Befehle npm create vite@latest etc. vorschlagen oder direkt ausführen. Erledigt, wenn: Der Standard-Vite-Screen nach npm run dev im Browser erscheint.

Lass Claude Tailwind CSS in das React-Projekt integrieren. Prompt: Installiere Tailwind CSS im frontend-Ordner und konfiguriere es. Erstelle eine modern gestylte Login-Komponente. Erledigt, wenn: Die Login-Komponente mit Tailwind-Klassen im Browser korrekt angezeigt wird.

Prompt: Erstelle eine TodoList-Komponente in React. Nutze useState für die Aufgaben und useEffect, um Daten aus einem (simulierten) API-Endpunkt zu laden. Erledigt, wenn: Aufgaben hinzugefügt und als erledigt markiert werden können.

Nutze die JSONPlaceholder API. Prompt: Schreibe eine Funktion in React, die echte User-Daten von https://jsonplaceholder.typicode.com/users abruft und in einer schicken Grid-Ansicht anzeigt. Erledigt, wenn: Echte Namen und E-Mails der Test-API in deiner App erscheinen.

Erstelle einen Ordner backend. Prompt: Initialisiere einen Express-Server in backend/server.js. Erstelle eine GET-Route /api/tasks, die Daten aus unserer SQLite-Datenbank zurückgibt. Erledigt, wenn: Ein Aufruf von localhost:3000/api/tasks die JSON-Daten der DB zeigt.

Prompt: Konfiguriere das React-Frontend so, dass es Daten von meinem Express-Backend abruft. Behebe dabei eventuelle CORS-Probleme.

• Claude wird das cors Paket installieren und konfigurieren. Erledigt, wenn: Das Frontend die Daten direkt aus deiner lokalen SQLite-DB anzeigt.

Prompt: Installiere Vitest und schreibe einen Test für meine Berechnungslogik in calc.js. Führe die Tests aus.

• Lerne, wie Claude Testfälle generiert und Fehler in der Logik findet. Erledigt, wenn: npm test einen grünen Haken für alle Tests zeigt.

Füge absichtlich einen Fehler in deinen Code ein. Nutze Claude mit: Hier ist ein Fehler in der Komponente, sie rendert nicht. Finde und bezebe ihn.

• Achte darauf, wie Claude den Stacktrace analysiert. Erledigt, wenn: Claude den Fehler identifiziert und einen funktionierenden Fix anwendet.

Prompt: Füge JWT-basierte Authentifizierung zu meinem Express-Backend hinzu. Erstelle Routen für /register und /login. Verschlüssele Passwörter mit bcrypt. Erledigt, wenn: Du einen Token nach dem Login erhältst und diesen für geschützte Routen nutzen kannst.

Prompt: Schreibe eine Express-Middleware, die den JWT-Token im Header prüft. Nur authentifizierte Nutzer dürfen Aufgaben löschen. Erledigt, wenn: Ein Löschversuch ohne Token mit Status 401 fehlschlägt.

Prompt: Analysiere meine SQL-Queries. Füge Indizes hinzu, wo sie sinnvoll sind, und erkläre mir den Performance-Unterschied.

• Nutze EXPLAIN QUERY PLAN über Claude. Erledigt, wenn: Die Datenbank-Indizes in der SQLite-Datei angelegt sind.

Prompt: Generiere eine Swagger/OpenAPI Dokumentation für mein Backend, damit ich die Endpunkte testen kann. Erledigt, wenn: Unter /api-docs eine interaktive Dokumentation aufrufbar ist.

Prompt: Erstelle ein Dockerfile für das Backend und eine docker-compose.yml, die das Frontend, das Backend und die DB verbindet. Erledigt, wenn: Das gesamte Projekt mit docker-compose up in Containern startet.

Prompt: Erstelle eine GitHub Action Workflow-Datei, die bei jedem Push automatisch die Tests ausführt und den Code auf Linting-Fehler prüft. Erledigt, wenn: Die .github/workflows/main.yml Datei existiert und valide ist.

Prompt: Scanne das gesamte Projektverzeichnis auf Sicherheitsrisiken, offenliegende API-Keys oder veraltete Abhängigkeiten. Nutze npm audit und deine interne Analyse. Erledigt, wenn: Alle 'High' und 'Critical' Vulnerabilities behoben sind.

Nutze alles Gelernte. Prompt: Baue eine finale App, die aus einer SQL-Datenbank Projekte ausliest und diese als statische HTML-Seite (mit deinem CSS-Wissen) exportiert. Nutze Claude Code für das gesamte Refactoring. Erledigt, wenn: Eine fertige index.html mit deinen Projektdaten generiert wurde.