Schulung · GitHub Copilot · React & Frontend

GitHub Copilot für React- und Frontend-Entwickler:innen

GitHub Copilot professionell nutzen: Completion, Chat, Agent Mode, Coding Agent für Issues und PRs, Code Review und Enterprise-Policies.

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

„GitHub Copilot für React- und Frontend-Entwickler:innen“ ist ein praxisorientiertes Training für Rollen wie React-Entwickler:innen in Produkt- und Agenturteams, Frontend-Engineers mit Next.js, Vite oder vergleichbaren Frameworks und Maintainer von Design-Systemen und Komponentenbibliotheken. Sie lernen GitHub Copilot nicht abstrakt, sondern an Aufgaben aus Ihrem Arbeitsalltag kennen – mit Beispielen, Übungen und Vorlagen aus dem Bereich React & Frontend.

GitHub Copilot hat sich von der reinen Code-Vervollständigung zu einer umfassenden KI-Plattform entwickelt, die den gesamten Entwicklungsprozess begleitet. Im Editor unterstützen Sie Inline-Vorschläge, Next Edit Suggestions und Copilot Chat; im Agent Mode bearbeitet Copilot Aufgaben über mehrere Dateien hinweg und führt Befehle aus. Auf GitHub selbst übernimmt der Coding Agent zugewiesene Issues und liefert Pull Requests. In diesem zweitägigen Training lernen Sie, diese Bausteine gezielt einzusetzen und in Ihren bestehenden Entwicklungsprozess sauber zu integrieren.

Neben der Praxis im Editor geht es um Steuerung und Qualität: Mit Custom Instructions und Prompt-Dateien geben Sie Copilot Projektwissen mit, über MCP binden Sie zusätzliche Werkzeuge an, und mit Copilot Code Review ergänzen Sie den menschlichen Review-Prozess. Für Verantwortliche in Teams und Organisationen behandeln wir Richtlinien auf Organisations- und Enterprise-Ebene, Content Exclusions, Modellfreigaben und Auswertungen der Nutzung. So schaffen Sie die Grundlage für einen sicheren, nachvollziehbaren und wirksamen Einsatz von Copilot im gesamten Unternehmen.

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 nutzen Completion, Chat und Agent Mode von Copilot zielgerichtet für Ihre täglichen Entwicklungsaufgaben.
  • Sie hinterlegen Projektwissen in Custom Instructions und Prompt-Dateien und verbessern damit die Ergebnisqualität.
  • Sie delegieren geeignete Issues an den Coding Agent und prüfen dessen Pull Requests sachgerecht.
  • Sie integrieren Copilot Code Review sinnvoll in Ihren bestehenden Review-Prozess.
  • 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 Copilot im Editor: Completion und Chat
  • Inline-Vorschläge und Next Edit Suggestions effizient annehmen, ablehnen und steuern
  • Copilot Chat für Erklärungen, Fehlersuche und Testgenerierung nutzen
  • Kontext gezielt über Dateien, Auswahl, Workspace und Chat-Variablen setzen
  • Modellauswahl und Unterschiede zwischen IDEs wie VS Code, Visual Studio und JetBrains
Modul 2 Agent Mode und Erweiterungen
  • Mehrstufige Aufgaben im Agent Mode planen und kontrolliert ausführen lassen
  • Terminalbefehle, Testläufe und Fehlerrückmeldungen in den Agenten-Loop einbinden
  • MCP-Server für zusätzliche Werkzeuge und Datenquellen anbinden
  • Änderungen prüfen, teilweise übernehmen oder zurücksetzen
Modul 3 Projektwissen mit Custom Instructions
  • Repository-weite Instructions für Architektur, Stil und Tests formulieren
  • Pfadspezifische Instructions und wiederverwendbare Prompt-Dateien anlegen
  • Persönliche und organisationsweite Vorgaben sinnvoll kombinieren
  • Instructions anhand der Ergebnisqualität laufend verbessern
Modul 4 Coding Agent und Code Review auf GitHub
  • Issues so formulieren, dass der Coding Agent sie zuverlässig umsetzen kann
  • Pull Requests des Agenten prüfen, kommentieren und iterieren lassen
  • Copilot Code Review als ergänzende Prüfinstanz im PR-Prozess einsetzen
  • Entwicklungsumgebung des Agenten über Setup-Schritte und Actions konfigurieren

Tag 2

Modul 5 Administration, Policies und Sicherheit
  • Lizenzzuweisung und Richtlinien auf Organisations- und Enterprise-Ebene
  • Content Exclusions, Modellfreigaben und Filter für öffentlichen Code
  • Audit-Logs und Nutzungsmetriken für Steuerung und Einführung auswerten
  • Sicherheitsrisiken, Secrets und Verantwortlichkeiten für KI-generierten Code klären
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 entwickeln regelmäßig Software, arbeiten mit Git und GitHub (Issues, Pull Requests) und nutzen eine moderne IDE. Praktische Erfahrung mit React und modernem JavaScript oder TypeScript sowie Grundkenntnisse in CSS, npm und Git.

Technische Voraussetzungen

Eigener Laptop mit VS Code oder einer JetBrains-IDE, installierter Copilot-Erweiterung und einem GitHub-Konto mit aktiver Copilot-Lizenz; für den Coding Agent wird ein passender Plan 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
  • Do, 10. Dezember 2026 – Fr, 11. Dezember 2026 Stuttgart Anfragen
  • Mi, 13. Januar 2027 – Do, 14. Januar 2027 Online Anfragen
  • Do, 21. Januar 2027 – Fr, 22. Januar 2027 Berlin Anfragen
  • Mi, 3. Februar 2027 – Do, 4. Februar 2027 Online Anfragen
  • Mi, 10. Februar 2027 – Do, 11. Februar 2027 München Anfragen

Häufige Fragen

Was ist der Unterschied zwischen Agent Mode und Coding Agent?

Der Agent Mode läuft in Ihrer IDE: Sie arbeiten interaktiv mit Copilot, sehen jeden Schritt und geben Befehle frei. Der Coding Agent arbeitet dagegen eigenständig auf GitHub, sobald Sie ihm ein Issue zuweisen, nutzt eine eigene Ausführungsumgebung und legt einen Pull Request an, den Sie anschließend wie den Beitrag eines Teammitglieds prüfen.

Wie stellen wir sicher, dass Copilot unsere Unternehmensrichtlinien einhält?

Auf Organisations- und Enterprise-Ebene lassen sich Funktionen, Modelle und Erweiterungen gezielt freigeben oder sperren. Content Exclusions halten sensible Dateien aus dem Kontext heraus, und Audit-Logs machen die Nutzung nachvollziehbar. Im Kurs zeigen wir, wie Sie diese Hebel mit Datenschutz, Informationssicherheit und internen Coding-Standards zusammenbringen.

Lohnt sich der Kurs, wenn wir Copilot schon länger nutzen?

Ja, gerade dann. Viele Teams nutzen nur die Vervollständigung und lassen Chat, Agent Mode, Custom Instructions und den Coding Agent weitgehend ungenutzt. Der Kurs zeigt, wie Sie diese Funktionen strukturiert einsetzen, Ergebnisse durch Projektwissen verbessern und typische Fehlerquellen vermeiden. Erfahrene Nutzer profitieren besonders von den Abschnitten zu Review und Governance.

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 „GitHub Copilot 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 GitHub Copilot

Alle 32 Kurse zu GitHub Copilot

GitHub Copilot · MünchenGitHub Copilot · SalzburgGitHub Copilot · BerlinGitHub Copilot · AugsburgGitHub Copilot · HannoverGitHub Copilot · BremenGitHub Copilot · StuttgartGitHub Copilot · KaiserslauternGitHub Copilot · Online