React und GraphQL (mit TypeScript)

Einführung in moderne Frontend-Anwendungen

• • Vergleich von React, Vue und Angular

  • Deklaratives Rendering

  • Erstellung von benutzerdefinierten HTML-Tags mit Komponenten

  • Initialisierung eines React-Projekts mit create-react-app

JavaScript für React (Grundlagen, falls notwendig)

• • Entwicklung mit Node.js und npm

  • JavaScript-Versionen und Neuerungen

  • Modulmanagement (import und export)

  • Verwendung von Pfeilfunktionen

  • Funktionale Programmierung in JavaScript

TypeScript für React (Grundlagen)

• • Statische vs. dynamische Typisierung

  • Typdeklarationen für Variablen, Funktionen, Arrays und Objekte

  • Grundlegende Datentypen

  • Arbeiten mit Types und Interfaces

Verwalten des Anwendungszustands

• • Deklaratives Rendering in React

  • Verwendung des State-Hooks für Zustandverwaltung

  • Erfassung von Input-Werten aus Formularen

JSX – Die React Templatesprache

• • Erstellen von Templates mit JSX

  • Binden von Inhalten und Props

  • Eventhandler definieren

  • Wiederholung von Elementen mit Schleifen

  • Verwendung von if/else für bedingte Darstellung

  • Styling mit CSS-Klassen

Komponenten in React

• • Nutzung vorgefertigter Komponenten

  • Komponentenbibliotheken für React

  • Definition eigener React-Komponenten

  • Handhabung von Props und Events in eigenen Komponenten

  • Typisierung von Props, Events und State in TypeScript

  • Datenfluss zwischen Komponenten

  • Komponenteninspektion mit React Developer Tools

Abfragen von APIs in React

• • HTTP-Requests mit fetch senden

  • Verwendung des Effect-Hooks für das Auslösen von HTTP-Requests

Arbeiten mit Klassenkomponenten

• • Definition von Komponenten als Funktion oder Klasse

  • Verständnis der „this“-Referenz in JavaScript

  • State-Management in Klassenkomponenten

  • Handhabung von Props und Events in Klassenkomponenten

Werkzeuge und Bibliotheken in React

• • React Router für Navigation

  • Kontext API für die Datenweitergabe im Komponentenbaum

  • Details zum Effect-Hook

  • Nutzung externer und eigener Hooks (z.B. react-query)

  • Styling-Bibliotheken in React

  • Formular-Bibliotheken für Formulareingaben

State Management mit Reducern

• • Überblick über State Management in React

  • Verwendung von Reducern und reinen Funktionen

  • Anwendung des Reducer-Hooks in React

  • Überblick über State Management mit Redux

Testen und Komponentendemos

• • Nutzung von Storybook für Komponenten-Demos

  • Testen von JavaScript-Funktionen mit Jest

  • Testen von React-Komponenten mit react-testing-library

  • Durchführung von Snapshot-Tests

App-Entwicklung mit React

• • Erstellung von Progressive Web Apps (PWA)

  • Einführung in React Native für mobile Anwendungen

Performanceoptimierung und Pre-Rendering

• • React Developer Tools Profiler verwenden

  • Performanceoptimierungen mit React.memo, Callback-Hook und Memo-Hook

  • Einsatz von Static Site Generators

  • Serverseitiges Rendering und Code-Splitting

Einführung in GraphQL

• • Einsatzgebiete und Vorteile von GraphQL

  • GraphQL vs. REST

  • Arbeiten mit dem GraphiQL Explorer

  • Einfache GraphQL-Abfragen erstellen

  • Parametrische Queries in GraphQL

  • Arbeiten mit Mutationen

  • Datenstrukturen in GraphQL

  • Abfragen eines GraphQL-APIs aus JavaScript

  • Integration von GraphQL in React-Anwendungen mit Apollo Client