React und Redux (mit TypeScript)
Classroom Schulung | Deutsch | Anspruch
Schulungsdauer: 4 Tage
Ziele
Redux ist ein Container für React. Da React-Anwendungen immer komplexer werden, benötigen Entwickler oft mehr Struktur um die Daten oder den Zustand, den sie in ihrer Anwendung verwalten. Die Redux JavaScript-Bibliothek bietet eine elegante Lösung für diesen Bedarf.
Diese Einführung in Redux für React mit TypeScript vermittelt Entwicklern die Fähigkeiten, die sie für die sofortige Verwendung von Redux in ihren React-Anwendungen benötigen.
Zielgruppe
Entwickler mit JavaScript Erfahrung
Voraussetzungen
Erfahrungen mit HTML und JavaScript
Agenda
Entwicklung moderner Frontend-Anwendungen
- Überblick und Gemeinsamkeiten von React, Vue und Angular
- deklaratives Rendering
- Komponenten - eigene HTML-Tags definieren
- Initialisierung eines React-Projektes mittels create-react-app
JavaScript Grundlagen für React (soweit benötigt)
- Entwicklung mit node.js und npm
- JavaScript Versionen und Neuerungen
- Module (import und export)
- Pfeilfunktionen
- Funktionale Programmierung in JavaScript
TypeScript Grundlagen für React
- statische vs dynamische Typisierung
- Typendeklaration bei Variablen, Funktionen, Arrays und Objekten
- grundlegende Datentypen
- Types und Interfaces
State (Anwendungszustand) verwalten
- deklaratives Rendering
- Verwalten des Anwendungszustands mittels state-Hook
- Erfassen des Zustands von input-Elementen
React-Templatesprache
- JSX: die JavaScript-basierte Templatesprache von React
- Binden von Inhalten und Props
- Eventhandler
- Elemente wiederholen
- if / else
- CSS-Klassen und Stile
Komponenten
- Einbinden vorgefertigter Komponenten
- Komponentenlibraries für React
- Definieren eigener Komponenten
- Props und Events in eigenen Komponenten
- Prop- Event- und State-Typen in TypeScript
- Datenfluss zwischen Komponenten
- Komponenten untersuchen mit den React Developer Tools
APIs aus React abfragen
- senden von HTTP-Requests via _fetch_
- verwenden des effect-Hooks, um HTTP-Requests auszulösen
Klassenkomponenten
- Definieren einer Komponente als Funktion oder als Klasse
- JavaScript: "this" und seine Eigenheiten
- State in Klassenkomponenten
- Props und Events in Klassenkomponenten
React Tools und Libraries
- React Router
- Context: Teilen von Daten über einen Komponentenbaum hinweg
- der Effect-Hook im Detail
- externe und eigene Hooks (z.B. react-query)
- Styling Libraries
- Formular-Libraries
State Management mit Reducern
- Überblick über State Management
- State Management mit Reducern und reinen Funktionen
- Einsetzen des Reducer-Hooks in React
- Überblick über State Management mit Redux
Testen und Komponentendemos
- Komponentendemos mit Storybook
- Testen von JavaScript-Funktionen mit Jest
- Testen von React-Komponenten mit react-testing-library
- Snapshot-Tests
App-Entwicklung mit React
- Progressive Web Apps: Erstellen von installierbaren mobilen und Desktop-Anwendungen
- Überblick über React Native
Performanceoptimierung und Pre-Rendering
- React Developer Tools Profiler
- React.memo, Callback-Hook und Memo-Hook
- Static Site Generators
- serverseitiges Rendering
- Code splitting
Redux
- State Management in Redux (State, Actions und Reducer)
- Einrichten eines Redux-Stores mittels Redux Toolkit
- Verwenden der Redux devtools
- Einbinden von Redux in ein React-Projekt (Redux Hooks, Container-Komponenten)
- Aufteilen / Kombinieren von Reducern
- asynchrone Actions und API-Abfragen mittels Thunk
- Redux und TypeScript
- Redux Hilfsfunktionen (createAction, createReducer, createSlice)
- Selektoren und Memoisation
- Middleware
Ziele
Redux ist ein Container für React. Da React-Anwendungen immer komplexer werden, benötigen Entwickler oft mehr Struktur um die Daten oder den Zustand, den sie in ihrer Anwendung verwalten. Die Redux JavaScript-Bibliothek bietet eine elegante Lösung für diesen Bedarf.
Diese Einführung in Redux für React mit TypeScript vermittelt Entwicklern die Fähigkeiten, die sie für die sofortige Verwendung von Redux in ihren React-Anwendungen benötigen.
Zielgruppe
Entwickler mit JavaScript Erfahrung
Voraussetzungen
Erfahrungen mit HTML und JavaScript
Agenda
Entwicklung moderner Frontend-Anwendungen
- Überblick und Gemeinsamkeiten von React, Vue und Angular
- deklaratives Rendering
- Komponenten - eigene HTML-Tags definieren
- Initialisierung eines React-Projektes mittels create-react-app
JavaScript Grundlagen für React (soweit benötigt)
- Entwicklung mit node.js und npm
- JavaScript Versionen und Neuerungen
- Module (import und export)
- Pfeilfunktionen
- Funktionale Programmierung in JavaScript
TypeScript Grundlagen für React
- statische vs dynamische Typisierung
- Typendeklaration bei Variablen, Funktionen, Arrays und Objekten
- grundlegende Datentypen
- Types und Interfaces
State (Anwendungszustand) verwalten
- deklaratives Rendering
- Verwalten des Anwendungszustands mittels state-Hook
- Erfassen des Zustands von input-Elementen
React-Templatesprache
- JSX: die JavaScript-basierte Templatesprache von React
- Binden von Inhalten und Props
- Eventhandler
- Elemente wiederholen
- if / else
- CSS-Klassen und Stile
Komponenten
- Einbinden vorgefertigter Komponenten
- Komponentenlibraries für React
- Definieren eigener Komponenten
- Props und Events in eigenen Komponenten
- Prop- Event- und State-Typen in TypeScript
- Datenfluss zwischen Komponenten
- Komponenten untersuchen mit den React Developer Tools
APIs aus React abfragen
- senden von HTTP-Requests via _fetch_
- verwenden des effect-Hooks, um HTTP-Requests auszulösen
Klassenkomponenten
- Definieren einer Komponente als Funktion oder als Klasse
- JavaScript: "this" und seine Eigenheiten
- State in Klassenkomponenten
- Props und Events in Klassenkomponenten
React Tools und Libraries
- React Router
- Context: Teilen von Daten über einen Komponentenbaum hinweg
- der Effect-Hook im Detail
- externe und eigene Hooks (z.B. react-query)
- Styling Libraries
- Formular-Libraries
State Management mit Reducern
- Überblick über State Management
- State Management mit Reducern und reinen Funktionen
- Einsetzen des Reducer-Hooks in React
- Überblick über State Management mit Redux
Testen und Komponentendemos
- Komponentendemos mit Storybook
- Testen von JavaScript-Funktionen mit Jest
- Testen von React-Komponenten mit react-testing-library
- Snapshot-Tests
App-Entwicklung mit React
- Progressive Web Apps: Erstellen von installierbaren mobilen und Desktop-Anwendungen
- Überblick über React Native
Performanceoptimierung und Pre-Rendering
- React Developer Tools Profiler
- React.memo, Callback-Hook und Memo-Hook
- Static Site Generators
- serverseitiges Rendering
- Code splitting
Redux
- State Management in Redux (State, Actions und Reducer)
- Einrichten eines Redux-Stores mittels Redux Toolkit
- Verwenden der Redux devtools
- Einbinden von Redux in ein React-Projekt (Redux Hooks, Container-Komponenten)
- Aufteilen / Kombinieren von Reducern
- asynchrone Actions und API-Abfragen mittels Thunk
- Redux und TypeScript
- Redux Hilfsfunktionen (createAction, createReducer, createSlice)
- Selektoren und Memoisation
- Middleware