React Einstieg
React ist die meistgenutzte UI-Bibliothek für moderne Webanwendungen und bildet die Grundlage für Frameworks wie Next.js. Mit TypeScript und modernen Patterns wie TanStack Query und React Server Components entwickeln Teams heute skalierbare, wartbare Frontend-Applikationen. Sie lernen React von den Grundlagen bis zu produktionstauglicher Architektur, mit TypeScript als Standard von Anfang an.
Ziele
Sie erwerben das Fundament, um React-Anwendungen mit TypeScript professionell zu entwickeln. Sie lernen, wie Komponenten, Props und State typsicher gestaltet werden, wie Hooks das State Management vereinfachen und warum TanStack Query serverseitiges Datenfetching strukturierter löst als natives fetch. React Server Components und ihre Rolle in Next.js werden als strategisches Konzept eingeführt.
Behandelte Themen
Die Module im Überblick
Modul 1: React-Grundlagen und Projekteinrichtung
- Vite + React + TypeScript: Projektsetup in 5 Minuten
- JSX-Syntax und der Unterschied zu HTML
- Funktionskomponenten: Aufbau und Rückgabe
- React DevTools: Komponentenbaum inspizieren
Modul 2: Komponenten und TypeScript-Integration
- Props typisieren: interface vs. type
- Komponentenkomposition: Kinder-Props und Slot-Pattern
- Bedingte Darstellung und Listenrendering
- Ereignistypen: React.MouseEvent, React.ChangeEvent
Modul 3: State Management mit Hooks
- useState: lokaler Zustand in Komponenten
- useEffect: Seiteneffekte und Cleanup
- useReducer: komplexerer State mit Reducer-Pattern
- Context API mit TypeScript: globaler State ohne Bibliothek
Modul 4: Formulare und Nutzereingaben
- Kontrollierte vs. unkontrollierte Inputs
- React Hook Form: performantes Formularmanagement
- Validierung mit Zod und zodResolver
- Fehleranzeige und UX-Feedback
Modul 5: Serverseitiges Datenfetching mit TanStack Query
- Warum nicht nur fetch: Caching, Loading-States und Revalidierung
- useQuery: Daten laden und Fehlerbehandlung
- useMutation: POST, PUT und DELETE-Operationen
- Optimistic Updates und Cache-Invalidierung
Modul 6: Routing mit React Router
- createBrowserRouter und Route-Definition
- Link, NavLink und useNavigate
- Dynamische Routen und URL-Parameter
- Protected Routes mit Loader-Funktionen
Modul 7: React Server Components (RSC)
- Client Components vs. Server Components: konzeptioneller Unterschied
- Was RSC kann und was es nicht kann
- RSC in Next.js als Referenzimplementierung
- Datenabruf in Server Components: kein useEffect nötig
Modul 8: Architektur, KI-Tools und nächste Schritte
- Custom Hooks: Logik aus Komponenten auslagern
- Projektstruktur: Feature-based vs. Layer-based
- GitHub Copilot und Claude Code für React-Entwicklung: Prompt-Strategien
- Wege zu Next.js, Testing und Performance-Optimierung
Kodschul-Trainer & Team
Lernen Sie von Experten - erfahrene Fachleute mit praktischem Know-how
Erfahrene Trainer mit praktischer Technik-Erfahrung
Über 3000 Fachkräfte in zwei Jahren geschult
Praxisnahe Expertise und tiefes Branchenwissen
Wirkungsvolles Lernen mit realen Anwendungen
Über 300+ Projekte gemeinsam abgeschlossen
Experte für IT & KI, Trainer
Experte für IT & KI, Trainer
Experte für IT & KI, Trainer, CEO
Experte für IT & KI, Trainer
Experte für IT & KI, Trainer
Experte für IT & KI, Trainer
Joelle Keim
Key Account Manager
Selina Schmid
Seminar Manager
Elisa Saleh
Back Office
Lars Gerigk
Portfolio Manager
Axel Kamga
Trainer & Vertrieb
Sebastian Carnal
HR & People
So läuft das Training ab
Unsere Schulungen sind 100% hands-on, mit einem praktischen Anteil von 70% und 30% Theorie. Sie finden vor Ort, bei uns oder online (auf allen gängigen Plattformen) statt. Zusätzlich erhalten die Teilnehmenden kostenfrei Hands-outs und Unterlagen, die sie zur Vertiefung und weiteren Anwendung nutzen können.
Grundlagen
Zu Beginn sorgen wir dafür, dass alle Teilnehmenden auf denselben Wissensstand gebracht werden, unabhängig von ihrem Ausgangsniveau. So wird jeder optimal auf die weiteren Themen vorbereitet, und niemand bleibt zurück.
Durchführung
Wir starten mit einer Einführung in das Thema, gefolgt von Demos und praxisnahen Beispielen. Anschließend üben die Teilnehmenden eigenständig, während der Trainer individuelles Feedback gibt und bei Bedarf Korrekturen vornimmt.
Anwendungsfälle
Das Gelernte wird auf konkrete Anwendungsfälle der Teilnehmenden angewendet. In einer praxisorientierten Session erarbeiten wir gemeinsam Lösungen, die den Teilnehmern helfen, das Wissen direkt in ihren Arbeitsalltag zu integrieren.
Am häufigsten gestellte Fragen
Für wen ist dieser Kurs konzipiert?
+Wie kann ich mich für den Kurs anmelden?
+Wie hoch sind die Kosten für den Kurs?
+Brauche ich Vorkenntnisse zum Thema des Kurses?
+Werde ich das Gelernte in diesem Kurs anwenden können?
+Welche Software oder Tools benötige ich für den Kurs?
+Lassen Sie uns über Ihr nächstes Training sprechen.
Unser Team steht Ihnen rund um die Uhr zur Verfügung und freut sich auf Ihre Anfrage. Einfach anrufen oder eine Nachricht hinterlassen – wir kümmern uns schnellstmöglich um Ihre Anfrage, ob es um eine Schulung, einen Vortrag oder eine Präsentation geht. Jetzt loslegen!
Joelle Keim
Key Account Manager