React für Fortgeschrittene

Ziele

Dieser React-Aufbaukurs bietet Ihnen sowohl eine Vertiefte Behandlung von React selbst als auch einen Einblick in die vielen zusätzlichen Libraries aus dem React-Umfeld. Bekannte Konzepte wie das Schreiben von Komponenten und Hooks werden vertieft und zugehörige Entwurfsmuster und Konzepte werden vorgestellt.

Sie lernen erweiterte Funktionalitäten von React kennen, wie z.B. Refs, Context, Portale, Error-Boundaries und Techniken zur Performance-Optimierung. Darüber hinaus erhaltenb Sie einen Überblick zu beliebten Werkzeugen und Libraries aus dem React-Universum und lernen z. B. React-Query, Next.js, Redux, Styling- und Test-Tools kennen.

Zielgruppe

Entwickler

Voraussetzungen

Besuch des Kurses "Einführung in React" oder vergleichbare Kenntnisse

Agenda

React im Detail

nach Bedarf: TypeScript für React

Hooks im Detail

• Hintergründe und Regeln von Hooks
• Eigene Hooks erstellen

Komponenten im Detail

• Inhalte an Komponenten übergeben
• "Wrapper" für bestehende HTML-Elemente
• Entwurfsmuster: Render-Props
• Entwurfsmuster: HOC (Higher-order Component)
• "Prop Drilling" und Abhilfen

JSX im Detail

• Kompilierung
• Sicherheit und XSS

Effect-Hook im Detail (Problem des veralteten States)

Context

• Context-Definition mit und ohne State
• Context und TypeScript

Refs

• Refs zum Ablegen von Daten
• Ref-Property zum Zugriff auf HTML-Elemente

Performance-Optimierung

• Messen der Performance
• Einsetzen von "memo" und "useCallback" zur Optimierung
• Lazy-Loading von Komponenten

Reducer-Hook und State Management mit Reducern

• Portale
• Error Boundaries
• Strict-Mode

React Libraries und Tools

API-Kommunikation

• Libraries für die API-Kommunikation
• Abfragen von APIs mit react-query
• GraphQL-Queries in React mit Apollo

next.js

• Pre-Rendering von Routen mit next.js
• Routing in next.js

Testen und Komponentendemos

• Komponentendemos mit Storybook
• Überblick über automatisierte Tests in JavaScript
• E2E-Tests mit Cypress
• Testen von React-Komponenten mit react-testing-library

State Management und Redux

• Überblick über State Management Tools: Redux, MobX, Zustand
• Libraries für Redux: redux toolkit, thunk, ...
• Immutability-Hilfslibraries: immutable.js, immer.js

Styling Tools

• Emotion
• Styled-Components

Überblick über weitere Tools

• Überblick: PWAs mit React
• Überblick: React Native
• Überblick: Authentifizierung mit React
• Überblick: Internationalisierung mit React