PR252 | TypeScript und React-Programmierung - Grundlagen

In der heutigen digitalen Welt ist die Entwicklung moderner, leistungsfähiger und skalierbarer Web-Anwendungen von entscheidender Bedeutung für den Erfolg eines Unternehmens. TypeScript und React sind zwei zentrale Technologien, die es ermöglichen, robuste und wartbare Frontend-Anwendungen zu erstellen, die sowohl die Benutzerfreundlichkeit als auch die Entwicklungseffizienz verbessern.

Dieses dreitägige Seminar bietet eine umfassende Einführung in die Entwicklung moderner Frontend-Anwendungen mit TypeScript und React. Teilnehmer lernen die grundlegenden Konzepte von TypeScript und React kennen, einschließlich der deklarativen und datengetriebenen Architektur, der Erstellung und Nutzung von Komponenten sowie der Integration von APIs. Praktische Übungen und Projekte helfen, das Gelernte zu festigen und auf reale Anwendungsfälle anzuwenden.

• Verständnis der Unterschiede und Gemeinsamkeiten von React und Next.js
• Beherrschung der Grundlagen von JavaScript für die React-Entwicklung
• Erstellung und Nutzung von React-Komponenten
• Anwendung von TypeScript zur Typisierung in React-Projekten
• Implementierung von client-seitigem Routing mit React Router
• Integration von APIs in React-Anwendungen

Dieses Seminar richtet sich an Web-Entwickler, die ihre Kenntnisse in der modernen Frontend-Entwicklung erweitern möchten. Es ist ideal für Entwickler, die TypeScript und React nutzen möchten, um robuste und skalierbare Web-Anwendungen zu erstellen.

Sie sollten über grundlegende Kenntnisse in JavaScript und Web-Entwicklung verfügen. Erfahrung mit modernen JavaScript-Frameworks und -Tools wie Node.js und npm ist von Vorteil, aber nicht zwingend erforderlich.

Entwicklung moderner Frontend-Anwendungen

• Überblick und Gemeinsamkeiten von React / Next.js
• Deklarative / datengetriebene Architektur
• Komponenten - eigene HTML-Tags definieren

JavaScript Grundlagen für React

• Entwicklung mit node.js und npm
• JavaScript Versionen und Neuerungen
• Module (import und export)
• Pfeilfunktionen
• Funktionale Programmierung in JavaScript

React-Templatesprache

• JavaScript-basierte Templatesyntax: JSX
• Binden von Inhalten und Props
• Event-Handler
• Elemente wiederholen
• if / else
• CSS-Klassen und Stile

Komponenten: Grundbausteine moderner Web-Anwendungen

• Einbinden vorgefertigter Komponenten
• Definieren eigener Komponenten
• Props und Events in eigenen Komponenten
• Prop- Event- und State-Typen in TypeScript
• Datenfluss zwischen Komponenten
• Komponenten inspizieren mit den React Developer Tools

React Router

• Client-seitiges Routing
• Anzeigen verschiedener Ansichten basierend auf der Route

APIs aus React abfragen

• Senden von HTTP-Requests via fetch
• Verwenden des effect-Hooks, um HTTP-Requests auszulösen

TypeScript Grundlagen für React

• Statische vs Dynamische Typisierung
• Typendeklaration bei Variablen, Funktionen, Arrays und Objekten
• Type Aliases und Interfaces
• Type Assertions, Generics