Was bietet mir der Workshop?
Der Workshop vermittelt praxisnahes Wissen zu React, TypeScript und Next.js. In drei Tagen entwickeln die Teilnehmer eine vollständige Webanwendung mit Komponenten, Routing, API-Anbindung und Server-Side Rendering. Der Fokus liegt auf moderner Frontend-Entwicklung, performanten Anwendungen und SEO-Optimierung mit Next.js.
Was lernen die Teilnehmer?
Am Ende des Workshops können die Teilnehmer:
- React-Komponenten mit JSX, Props und State erstellen
- Typsicherheit in React durch TypeScript einsetzen
- Next.js für Routing, Layouts und Server-Side Rendering nutzen
- State-Management mit React Context API und SWR umsetzen
- APIs in Next.js integrieren und Daten abrufen
- Styling mit CSS Modules, Tailwind CSS und Styled Components anwenden
- Anwendungen mit Lazy Loading, Code Splitting und Image Optimization optimieren
- Authentifizierung und Autorisierung in Next.js einbinden
- React-Anwendungen mit Jest und React Testing Library testen
- Next.js-Projekte mit Vercel und CI/CD-Pipeline deployen
Für wen ist der Kurs geeignet?
Der Workshop richtet sich an Softwareentwickler und Web Developer, die moderne Webanwendungen mit React, TypeScript und Next.js entwickeln wollen. Voraussetzungen für die Teilnahme sind:
- Grundkenntnisse in JavaScript sind hilfreich, aber nicht zwingend erforderlich
- Erfahrung in Webentwicklung ist von Vorteil
Was erhalten Teilnehmer?
- Live-Workshop von 9–17 Uhr an drei Tagen
- Praktische Übungen zur Entwicklung einer vollständigen Next.js-Anwendung
- Live-Coding-Demos mit React, TypeScript und Next.js
- Austausch mit Trainer Pawel Sawicki, aktiv in der React-Community
- Teilnahmebestätigung nach Abschluss
Warum dieser Workshop?
- Teilnehmer lernen, produktionsreife Webanwendungen mit React, TypeScript und Next.js umzusetzen
- Fokus auf praxisnahen Übungen und Best Practices
- Trainer mit langjähriger Projekterfahrung in React und Next.js
- Entwicklung einer vollständigen Anwendung als Praxisprojekt
- Optimale Vorbereitung auf moderne Frontend-Anforderungen
Agenda
Tag 1: Einführung & Grundlagen
- Einführung in React: Komponenten, JSX, Props & State
- TypeScript für React: Typsicherheit, Interfaces & generische Komponenten
- Next.js Grundlagen: Pages, Routing (app router) & Layouts
- Erste Projektstruktur & Setup mit Next.js und TypeScript
Tag 2: Fortgeschrittene Themen & Best Practices
- Zustand & Datenmanagement: React Context API, Zustand & SWR
- API-Integration mit Next.js: Fetching von Daten, API-Routes
- Server-Side Rendering (SSR) vs. Static Site Generation (SSG)
- Styling: CSS Modules, Tailwind CSS, Styled Components
Tag 3: Performance, Deployment & Praxisprojekt
- Performance-Optimierung in Next.js: Lazy Loading, Code Splitting, Image Optimization
- Authentifizierung & Autorisierung in Next.js
- Testing in React mit Jest und React Testing Library
- Deployment mit Vercel & CI/CD-Pipeline
- Entwicklung einer vollständigen, modernen Next.js-Anwendung mit Best Practices
- Q&A und Best Practices für die Praxis
Lernziele
- Sicherheit im Umgang mit React, TypeScript und Next.js gewinnen
- Verständnis für die Architektur moderner Frontend-Anwendungen entwickeln
- Kompetenzen in API-Integration, State-Management und SSR/SSG aufbauen
- Strategien zur Performance-Optimierung in Next.js umsetzen
- Best Practices für Authentifizierung, Autorisierung und Testing anwenden
- Fähigkeit, produktionsreife Anwendungen eigenständig zu entwickeln
