React für Fortgeschrittene

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

Voraussetzungen

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

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

Zielgruppe

• Entwickler