React für Fortgeschrittene

In dieser 3-tägigen Schulung "React für Fortgeschrittene" lernen Sie eine vertiefte Behandlung von React und erhalten Einblicke in viele zusätzliche Libraries aus dem React-Umfeld. Der Kurs konzentriert sich auf bekannte Konzepte wie das Schreiben von Komponenten und die Verwendung von Hooks, während zugehörige Entwurfsmuster und Konzepte vorgestellt werden.

Sie werden erweiterte Funktionalitäten von React kennenlernen, wie z.B. Refs, Context, Portale, Error-Boundaries und Techniken zur Performance-Optimierung. Außerdem werden Sie einen Überblick über beliebte Werkzeuge und Libraries aus dem React-Universum erhalten, darunter React-Query, Next.js, Redux, Styling- und Test-Tools. Dieser Kurs baut auf Ihren vorhandenen React-Kenntnissen auf und ermöglicht es Ihnen, React effektiver und effizienter in Ihren Projekten einzusetzen.

Zum Seminar: React für Fortgeschrittene

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