Schulung · Claude Code · React & Frontend

Claude Code für React- und Frontend-Entwickler:innen

Agentisches Coding mit Claude Code im Terminal und in der IDE: von CLAUDE.md über Subagents und Hooks bis zu CI und sicheren Berechtigungen.

Dauer
2 Tage (14 Std.)
Format
Online oder vor Ort
Sprache
Deutsch oder Englisch
Teilnehmende
offene Termine oder exklusiv für Ihr Team
Abschluss
Teilnahmebescheinigung

Überblick

In diesem Kurs verbinden wir Claude Code mit den typischen Abläufen im Bereich React & Frontend. Die Teilnehmenden arbeiten an realistischen Szenarien und nehmen sofort einsetzbare Prompts, Workflows und Checklisten mit.

Claude Code ist der agentische Coding-Assistent von Anthropic, der direkt im Terminal und in gängigen IDEs arbeitet. Statt einzelne Codezeilen zu vervollständigen, liest Claude Code Ihr Repository, plant Änderungen über mehrere Dateien hinweg, führt Befehle aus, startet Tests und erstellt Commits. In diesem zweitägigen Training lernen Sie, wie Sie dieses Werkzeug kontrolliert einsetzen: mit klaren Projektanweisungen in CLAUDE.md, bewusstem Kontextmanagement und einem Workflow, bei dem Sie als Entwicklerin oder Entwickler die Richtung vorgeben und jede Änderung nachvollziehen können.

Im Mittelpunkt stehen reale Entwicklungsaufgaben: Bugs analysieren, Features umsetzen, Legacy-Code refaktorieren und Tests ergänzen. Sie konfigurieren Subagents für spezialisierte Aufgaben, automatisieren Qualitätsprüfungen mit Hooks, binden externe Systeme über das Model Context Protocol (MCP) an und bündeln Teamwissen in Skills. Abschließend bringen Sie Claude Code headless in CI-Pipelines und legen Berechtigungen, Sandboxing und Freigaberegeln so fest, dass der Einsatz auch in sicherheitskritischen Umgebungen, etwa mit regulatorischen Vorgaben oder sensiblen Kundendaten, vertretbar bleibt.

Frontend-Entwicklung bedeutet heute komponentenbasierte Architekturen, State Management, Server Components, Design-Systeme, Barrierefreiheit und Performance-Budgets – oft gleichzeitig. KI-Coding-Assistenten und Agenten beschleunigen genau die Arbeit, die viel Zeit frisst: Komponenten aus Designvorgaben ableiten, Class Components auf Hooks umstellen, Storybook-Stories und Tests mit der Testing Library schreiben, ARIA-Fehler beheben oder unnötige Re-Renderings aufspüren. Weil Frontend-Code stark von Konventionen lebt, kommt es auf guten Kontext an: Design Tokens, Ordnerstruktur, Styling-Ansatz und bevorzugte Bibliotheken müssen dem Assistenten bekannt sein. Im Kurs lernen Sie, diese Leitplanken zu setzen und Ergebnisse visuell wie technisch zuverlässig zu prüfen.

Das Training findet live statt – wahlweise online im virtuellen Klassenraum oder vor Ort in unseren Trainingsräumen in München, Salzburg, Berlin, Augsburg, Hannover, Bremen, Stuttgart und Kaiserslautern. Auf Wunsch kommen wir auch exklusiv für Ihr Team zusammen.

Für wen ist das Training?

  • React-Entwickler:innen in Produkt- und Agenturteams
  • Frontend-Engineers mit Next.js, Vite oder vergleichbaren Frameworks
  • Maintainer von Design-Systemen und Komponentenbibliotheken
  • Fullstack-Entwickler:innen mit Frontend-Schwerpunkt
  • UI-Engineers mit Verantwortung für Barrierefreiheit und Performance

Typische Herausforderungen, die wir adressieren

  • Inkonsistente Komponenten und Styles trotz vorhandenem Design-System
  • Schwer nachvollziehbare Re-Renderings, aufgeblähte Bundles und schwache Core Web Vitals
  • Lückenhafte Barrierefreiheit und wachsender Druck durch gesetzliche Anforderungen
  • Legacy-Code mit Class Components, veralteten Patterns und fehlenden Tests

Das können Sie nach dem Training

  • Sie setzen Claude Code für mehrstufige Entwicklungsaufgaben ein und behalten dabei die Kontrolle über jede Änderung.
  • Sie pflegen eine CLAUDE.md, die Projektkonventionen, Befehle und Architekturhinweise wirksam an den Agenten übergibt.
  • Sie erweitern Claude Code mit Subagents, Hooks, MCP-Servern und Skills passend zu Ihrem Team.
  • Sie integrieren Claude Code in Git-Workflows und CI-Pipelines mit nachvollziehbaren, testgesicherten Ergebnissen.
  • Sie lassen KI-Agenten Komponenten, Stories und Tests passend zu Ihrem Design-System erzeugen.
  • Sie nutzen KI gezielt, um Barrierefreiheit, Performance und Legacy-Code systematisch zu verbessern.
  • Sie prüfen generierten Frontend-Code visuell, funktional und hinsichtlich Wartbarkeit, bevor er ausgeliefert wird.

Inhalte & Ablauf

Tag 1

Modul 1 Grundlagen und Arbeitsweise von Claude Code
  • Installation, Anmeldung und Einsatz im Terminal sowie in VS Code und JetBrains-IDEs
  • Agentische Schleife verstehen: Lesen, Planen, Ausführen, Prüfen
  • Plan-Modus nutzen, um Lösungswege vor der Umsetzung abzustimmen
  • Wirksame Aufgabenbeschreibungen mit Ziel, Kontext und Abnahmekriterien formulieren
Modul 2 Projektkontext mit CLAUDE.md und Kontextmanagement
  • CLAUDE.md auf Projekt-, Verzeichnis- und Benutzerebene strukturieren
  • Build-, Test- und Stilkonventionen so dokumentieren, dass der Agent sie zuverlässig befolgt
  • Kontextfenster steuern mit gezielten Dateiverweisen, Kompaktieren und frischen Sitzungen
  • Sitzungen fortsetzen und lange Aufgaben in überschaubare Etappen teilen
Modul 3 Erweitern mit Subagents, Hooks, MCP und Skills
  • Subagents für Code-Review, Recherche oder Testgenerierung definieren
  • Hooks einsetzen, um Formatierung, Linting oder Prüfungen vor und nach Tool-Aufrufen zu erzwingen
  • MCP-Server für Ticketsysteme, Datenbanken oder interne Dokumentation anbinden
  • Eigene Slash-Commands und Skills für wiederkehrende Team-Workflows erstellen
Modul 4 Git-Workflows, Tests und Qualitätssicherung
  • Branches, aussagekräftige Commits und Pull Requests mit Claude Code erstellen
  • Testgetriebenes Arbeiten: erst Tests schreiben lassen, dann implementieren
  • Diffs systematisch prüfen und Änderungen gezielt zurückweisen oder nachschärfen
  • Parallele Arbeit mit Git-Worktrees und mehreren Sitzungen organisieren

Tag 2

Modul 5 Headless-Betrieb, CI und Sicherheit
  • Claude Code nicht-interaktiv in Skripten und CI-Pipelines ausführen
  • Automatisierte Reviews und Issue-Bearbeitung in GitHub- oder GitLab-Workflows
  • Berechtigungsmodi, Allow- und Deny-Regeln sowie Sandboxing konfigurieren
  • Umgang mit Secrets, Prompt-Injection-Risiken und unternehmensweiten Richtlinien
Modul 6 Praxislabor: React & Frontend
  • Komponenten aus Designvorgaben bauen
  • Tests mit der Testing Library
  • Barrierefreiheit prüfen und verbessern
  • Legacy-Code modernisieren
  • Performance optimieren
  • Formulare und Datenabruf
Modul 7 Datenschutz, Qualität & Transfer in den Alltag
  • Seit Geltung des Barrierefreiheitsstärkungsgesetzes müssen viele digitale Angebote barrierefrei sein – generierter UI-Code muss entsprechend geprüft werden. Achten Sie zudem auf Lizenzen übernommener Komponenten und Icons, auf keine Secrets im Client-Bundle und darauf, dass Tracking- oder Consent-Logik den Vorgaben von DSGVO und TTDSG entspricht.
  • Spielregeln für den sicheren KI-Einsatz im Team
  • Ergebnisse prüfen: Fakten, Quellen, Tests und Vier-Augen-Prinzip
  • Persönlicher Umsetzungsplan für die nächsten 30 Tage
  • Offene Fragen, Ausblick und Ressourcen zum Weiterlernen

Praxisszenarien aus Ihrem Bereich

Komponenten aus Designvorgaben bauen

Aus Screenshots, Design-Spezifikationen oder Figma-Exporten erzeugt der Assistent typisierte React-Komponenten, die vorhandene Design Tokens und Bibliotheken nutzen, und ergänzt passende Storybook-Stories für alle Zustände. Abweichungen vom Design werden iterativ korrigiert.

Tests mit der Testing Library

Die KI schreibt nutzerzentrierte Komponententests mit React Testing Library und Vitest oder Jest, simuliert Interaktionen, mockt API-Aufrufe und deckt Lade-, Fehler- und Leerzustände ab. Implementierungsdetails bleiben dabei bewusst außen vor.

Barrierefreiheit prüfen und verbessern

Der Agent analysiert Komponenten auf semantisches HTML, ARIA-Attribute, Fokusführung und Kontraste, wertet axe-Ergebnisse aus und behebt Befunde nachvollziehbar entlang der WCAG-Kriterien. Dazu gehören auch Tastaturbedienung und Screenreader-Ausgaben.

Legacy-Code modernisieren

Class Components werden auf Funktionskomponenten mit Hooks umgestellt, Prop-Drilling durch Context oder ein State-Management-Konzept ersetzt und PropTypes durch TypeScript-Typen abgelöst – mit Tests als Sicherheitsnetz.

Performance optimieren

Die KI identifiziert unnötige Re-Renderings, schlägt Memoization, Code Splitting und Lazy Loading vor, analysiert Bundle-Reports und erklärt, wie sich Maßnahmen auf Kennzahlen wie LCP und INP auswirken.

Formulare und Datenabruf

Komplexe Formulare mit Validierungsschemas, Fehlermeldungen und optimistischen Updates entstehen ebenso wie Datenabruf-Logik mit Caching, Retry und sauberem Umgang mit Lade- und Fehlerzuständen. Bestehende Bibliotheken für Formulare und Datenabruf werden konsequent genutzt.

Mögliche Praxisprojekte im Kurs

Interaktives KPI-Dashboard

Ein React-Dashboard mit Diagrammen, Filtern und responsivem Layout, das Daten aus einer REST-API lädt und vollständig per KI-Agent aus einer kurzen Spezifikation entsteht.

Komponentenbibliothek mit Storybook

Eine kleine, barrierefreie Komponentenbibliothek mit Buttons, Dialogen und Formularfeldern, inklusive Design Tokens, Storybook-Dokumentation und automatisierten Tests. Sie dient als Grundlage für einheitliche Oberflächen in mehreren Projekten.

Accessibility-Checker für Pull Requests

Ein Skript, das Storybook-Stories automatisiert mit axe prüft und die Befunde als übersichtlichen Bericht für Pull Requests aufbereitet. Neue Barrierefreiheitsprobleme fallen so schon vor dem Merge auf.

Voraussetzungen

Sie verfügen über praktische Programmiererfahrung in mindestens einer Sprache und arbeiten sicher mit Git und der Kommandozeile. Praktische Erfahrung mit React und modernem JavaScript oder TypeScript sowie Grundkenntnisse in CSS, npm und Git.

Technische Voraussetzungen

Eigener Laptop mit Administratorrechten, Git, Node.js-Laufzeit und einem aktuellen Editor; ein Claude-Abonnement oder ein Anthropic-API-Zugang wird für die Übungen benötigt.

Datenschutz & Compliance

Seit Geltung des Barrierefreiheitsstärkungsgesetzes müssen viele digitale Angebote barrierefrei sein – generierter UI-Code muss entsprechend geprüft werden. Achten Sie zudem auf Lizenzen übernommener Komponenten und Icons, auf keine Secrets im Client-Bundle und darauf, dass Tracking- oder Consent-Logik den Vorgaben von DSGVO und TTDSG entspricht.

Terminvorschläge

Alle Termine sind Vorschläge – Ihr Wunschtermin ist jederzeit möglich.

  • Do, 26. November 2026 – Fr, 27. November 2026 Online Anfragen
  • Mo, 7. Dezember 2026 – Di, 8. Dezember 2026 Stuttgart Anfragen
  • Mi, 20. Januar 2027 – Do, 21. Januar 2027 Online Anfragen
  • Do, 4. Februar 2027 – Fr, 5. Februar 2027 Berlin Anfragen
  • Di, 16. Februar 2027 – Mi, 17. Februar 2027 Online Anfragen
  • Mi, 3. März 2027 – Do, 4. März 2027 München Anfragen

Häufige Fragen

Worin unterscheidet sich Claude Code von klassischer Code-Vervollständigung?

Code-Vervollständigung schlägt die nächsten Zeilen vor, während Claude Code als Agent ganze Aufgaben bearbeitet: Es durchsucht das Repository, plant Änderungen über mehrere Dateien, führt Tests und Befehle aus und korrigiert sich anhand der Ergebnisse. Sie formulieren das Ziel und prüfen das Resultat, statt jede Zeile selbst zu steuern.

Ist Claude Code für den Einsatz im Unternehmen sicher genug?

Claude Code fragt standardmäßig vor Dateiänderungen und Befehlen nach Freigabe. Über Berechtigungsregeln, Sandboxing, verwaltete Einstellungen und Hooks lässt sich genau festlegen, was der Agent darf. Im Kurs lernen Sie, diese Mechanismen passend zu Ihren Sicherheits- und Datenschutzvorgaben zu konfigurieren und Risiken wie Prompt Injection einzuschätzen.

Funktioniert Claude Code mit meiner Programmiersprache und meinem Stack?

Ja. Claude Code arbeitet sprachunabhängig, weil es mit Dateien, Terminalbefehlen und Ihren vorhandenen Build- und Test-Tools arbeitet. Ob Python, Java, TypeScript, Go, ABAP-nahe Projekte oder Infrastruktur als Code: Entscheidend ist eine gute CLAUDE.md, die Ihre Befehle und Konventionen beschreibt. Den fachlichen Schwerpunkt setzt die jeweilige Kursvariante.

Kann die KI Designs pixelgenau umsetzen?

KI-Assistenten setzen Layouts aus Screenshots oder Spezifikationen inzwischen erstaunlich gut um, besonders wenn sie Ihre Design Tokens und Komponenten kennen. Pixelgenauigkeit entsteht aber erst durch Iteration: Im Kurs lernen Sie, visuelle Abweichungen gezielt zurückzumelden und Storybook sowie visuelle Tests als Kontrollinstanz einzusetzen.

Spielt das verwendete Framework eine Rolle?

Der Kurs ist auf React ausgerichtet, die Arbeitsweisen lassen sich aber auf Next.js, Remix oder Vite-basierte Setups übertragen. Wir zeigen, wie Sie Framework-spezifische Regeln wie Server- und Client-Komponenten oder Routing-Konventionen in Anweisungsdateien festhalten, damit der Assistent passenden Code erzeugt. Die Grundprinzipien bleiben dabei gleich.

Was kostet die Schulung „Claude Code für React- und Frontend-Entwickler:innen“?

Die Schulung kostet pauschal 949 € zzgl. gesetzl. MwSt. pro Teilnehmer:in – unabhängig davon, ob sie online oder vor Ort stattfindet. Enthalten sind 2 Trainingstag(e) mit Live-Trainer:in, Kursunterlagen, Übungsumgebung und Teilnahmebescheinigung.

Kann ich einen eigenen Wunschtermin angeben?

Ja. Unsere Terminvorschläge sind eine Orientierung. Im Anfrageformular können Sie jederzeit einen Wunschtermin oder Zeitraum im Freitext angeben – wir prüfen die Verfügbarkeit und bestätigen innerhalb eines Werktags.

Findet der Kurs online oder vor Ort statt?

Beides ist möglich: live online im virtuellen Klassenraum oder vor Ort in München, Salzburg, Berlin, Augsburg, Hannover, Bremen, Stuttgart oder Kaiserslautern. Auf Wunsch führen wir das Training auch exklusiv für Ihr Team durch.

Weitere Kurse für React- und Frontend-Entwickler:innen

Weitere Kurse zu Claude Code

Alle 77 Kurse zu Claude Code

Claude Code · MünchenClaude Code · SalzburgClaude Code · BerlinClaude Code · AugsburgClaude Code · HannoverClaude Code · BremenClaude Code · StuttgartClaude Code · KaiserslauternClaude Code · Online