React - Intensiv-Schulung für Einsteiger - Inhouse von HECKER CONSULTING

Moderne komponentenbasierte Frontend-Anwendungen mit React

React - Erste Schritte

• Einführung in React
• Was ist React?
• Webanwendungen und Single-Page-Application (SPA) mit React
• Verstehen einseitiger und mehrseitiger Anwendungen
• Einen ersten React Code schreiben
• Warum sollten wir uns für React entscheiden?
• Alternativen zu React

React - Grundlagen und Syntax

• Der Erstellungsablauf
• Verwendung von Create React App
• Verstehen der CRA-Ordnerstruktur
• Grundlagen der Komponenten verstehen
• JSX verstehen und nutzen
• JSX-Besonderheiten und Einschränkungen
• Erstellen einer Funktionskomponente
• Mit Komponenten arbeiten und sie wiederverwenden
• Dynamischen Inhalt ausgeben
• Arbeiten mit Props
• Verstehen der "Child"-Props
• Komponenten-Zustand (State) verstehen und nutzen
• Props und State
• Behandlung von Ereignissen mit Methoden
• Den Zustand manipulieren
• Benennung von Funktionskomponenten
• Verwendung des useState()-Hooks zur Zustandsmanipulation
• Zustandslose vs. zustandsbehaftete Komponenten
• Weitergabe von Methodenreferenzen zwischen Komponenten
• Hinzufügen einer Zwei-Wege-Bindung
• Hinzufügen von Styling mit Stylesheets
• Arbeiten mit Inline-Stilen

React - Arbeiten mit Listen und Bedingungen

• Bedingtes Rendern von Inhalten
• Handhabung dynamischer Inhalte
• Listen verarbeiten und ausgeben
• Listen und Zustand
• Immutability - Unveränderliche Aktualisierung des Zustands
• Über Listen, Index und Schlüssel
• Flexible Listen

React - Gestaltung von Komponenten und Elementen

• Dynamisches Setzen von Stilen
• Dynamisches Setzen von Klassennamen
• Hinzufügen und Verwenden von Radium
• Verwendung von Radium für Media Queries
• Verwendung von Styled Components
• Styled Components und Dynamische Stile
• Arbeiten mit CSS-Modulen
• CSS-Module und Media Queries

React - Komponenten im Detail

• Aufteilen einer App in Komponenten
• Vergleich zwischen zustandslosen und zustandsbehafteten Komponenten
• Klassenbasierte versus Funktionale Komponenten
• Der Lebenszyklus von Klassenbasierten Komponenten
• Was sind "React Hooks"?
• Die Regeln für Hooks
• Zustandsverwaltung mit useState()
• Verwendung von useEffect() in Funktionskomponenten
• Steuerung des useEffect()-Verhaltens
• Aufräumen mit Lifecycle Hooks und useEffect()
• Verwendung von PureComponents
• Verwendung von Komponenten höherer Ordnung (HOC)
• Verwendung von PropTypes
• Verwendung von useCallback()
• Verwendung von Refs und useRef()
• Verwendung von useReducer()
• Verwendung von contextType und useContext()
• Leistungs-Optimierungen mit useMemo()
• Entwicklung von benutzerdefinierten Hooks

React - Http-Zugriff

• Einsatz von Http-Anfragen in React
• Verwendung der Axios-Bibliothek
• Erstellen einer Http-Anforderung für GET-Daten
• Gelesene Daten auf dem Bildschirm darstellen
• Daten transformieren
• Erstellen von Daten mittels POST-Request
• Senden einer DELETE-Anfrage
• Abfangen und Beheben von Kommunikationsfehlern
• Hinzufügen und Entfernen von Interceptoren zu Axios
• Festlegen einer globalen Standardkonfiguration für Axios
• Erstellen und Verwenden von zentralen Axios-Instanzen

React - Routing

• Routing in Single-Page-Application (SPA)
• Einrichten von Links
• Laden des Router-Pakets
• react-router vs. react-router-dom
• Vorbereiten des Projekts für das Routing
• Definieren von Routen
• Rendern von Komponenten für Routen
• Umschalten zwischen Seiten
• Links zum Seitenwechsel verwenden
• Verwendung routenbezogener Props
• Das "withRouter"-HOC und Routen-Properties
• Absolute versus Relative Pfade
• Gestaltung der aktiven Route
• Parameter der Übergaberoute
• Extrahieren von Routen-Parametern
• Analysieren von Abfrageparametern und des Fragments
• Verwenden von Switch zum Laden einer einzelnen Route
• Programmatisch navigieren
• Zusätzliche Informationen zu aktiven Links
• Verschachtelte Routen verstehen
• Dynamisch verschachtelte Routen erstellen
• Umleitung von Anfragen
• Bedingte Weiterleitungen
• Schutz von Routen mit Guards
• Konfiguration des 404-Fehler
• Lazy Laoding für Routen
• Routing und Server-Bereitstellung

React - Formulare und Formularvalidierung

• Erstellen einer benutzerdefinierten dynamischen Eingabekomponente
• Umgang mit Benutzereingaben
• Verarbeitung der Formulardaten
• Hinzufügen von benutzerdefinierter Formularvalidierung
• Validierungs-Feedback hinzufügen
• Anzeigen von Fehlermeldungen
• Behandlung der allgemeinen Formulargültigkeit

React - Zustandsverwaltung mit Redux

• Die Komplexität der Zustandsverwaltung verstehen
• Den Redux-Datenfluss verstehen
• Einrichten von Reducer und Store
• Dispatching von Aktionen
• Hinzufügen von Abonnements
• Verbinden von React mit Redux
• Verbinden des Stores mit React
• Senden von Actions innerhalb einer Komponente
• Unveränderliche Aktualisierung von Objekten und Arrays
• Hinzufügen von Middleware
• Verwendung der Redux-Devtools
• Ausführung von Asynchronen Code
• Einsatz von "Action Creator"
• Verwendung von Action Creators und Get State
• Verwendung von Hilfsfunktionen

React - Bereitstellen der App

• Schritte zur Bereitstellung
• Aufbau des Projekts

Animationen in React

• CSS-Übergänge und CSS-Animationen verwenden
• Verwendung von ReactTransitionGroup
• Die CSSTransition-Komponente
• Alternative Animationspakete

React und Redux-Saga

• Warum Redux-Sagas hilfreich sein können
• Redux Saga installieren
• Unsere erste Redux-Saga erstellen
• Anbindung der Saga an Store und Actions

React Hooks als Ersatz für Redux

• Gründe für den Ersatz von Redux
• 1. Alternative: Verwendung der Context-API
• 2. Alternative: Benutzerdefinierte Store-Hooks

Testing in React

• Was sind Tests?
• Erforderliche Test-Tools
• Was soll getestet werden?
• Einen ersten Test schreiben
• Einführung in Jest und Enzyme
• Test von Komponenten
• Test von Containern
• Test von Redux

Mit unserer "React - Beratung, Coaching, Workshop, Training" gelingt Ihnen der perfekte Einstieg in das React-Framework. Sie erhalten ein vollständiges Verständnis der Architektur hinter einer React-Anwendung und bekommen alle relevanten Informationen um moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen mit einem der modernsten JavaScript-Frameworks auf dem Markt zu entwickeln.