React Schulung
React: Erstelle eigene Anwendungen mit Hilfe des Frameworks
Zu den TerminenErstelle leistungsstarke, schnelle, benutzerfreundliche und reaktive Webanwendungen mit dem React-Framework. Lerne React, Hooks, Redux, React Routing und vieles mehr kennen und nutzen. Das Training beginnt mit den Grundlagen von React und erklärt, was genau React ist und wie du es verwenden kannst. Danach gehen wir den ganzen Weg von den Grundlagen bis zu den fortgeschrittenen Anwendungen. Wir werden nicht nur an der Oberfläche kratzen, sondern tief in React sowie in beliebte Bibliotheken wie react-router und Redux eintauchen.
Lernziele
Nach dem Besuch der Schulung kennst du die Grundlagen von React, Hooks, Redux, React Routing und vieles mehr und kannst eigene Anwendungen mit Hilfe des React Frameworks erstellen.
Inhalte
React Einführung
Überblick - Was ist React
"Hello World" in React
Vorteile
Alternativen
Projekt erstellen mit dem "Create React App"-CLI
Projekt Ordnerstruktur
Einführung in Komponenten
Einführung in JSX (Javascript XML oder Javascript Syntax Extension)
Komponenten
Funktionskomponenten erstellen
Arbeiten mit mehreren React-Komponenten
Ausgabe von dynamischen Inhalten
Komponenten und "props", "children", "state"
Komponenten und Ereignisverarbeitung
Manipulation von Zuständen
Verwendung des useState()-Hooks zur Zustandsmanipulation
Zustandslose ("Stateless") versus zustandsabhängige ("Stateful") Komponenten
Weitergabe von Methoden zwischen Komponenten
Hinzufügen einer Zweiwegbindung ("Two Way Binding")
Arbeiten mit Listen und Bedingungen
Bedingtes Rendern von Inhalten
Styling von React-Komponenten
Hinzufügen von Styling mit Stylesheets
Arbeiten mit Inline-Stilen
Stile und Klassen dynamisch erstellen und nutzen
Arbeiten mit dem Paket "Emotion"
Arbeiten mit dem Paket "Styled Components"
Komponenten im Detail
Projektstruktur: Aufteilen einer App in Komponenten
Vergleich zwischen zustandslosen und zustandsbehafteten React-Komponenten
Klassenkomponenten vs. Funktionskomponenten
Übersicht über den Lebenszyklus von Komponenten
Verwendung von "useEffect()" in Funktionskomponenten
Optimierung von Funktionskomponenten mit "React.memo()"
Verwendung von "React.Fragment
"Higher-Order-Components" (HOC) nutzen
Verwendung der Context-API: contextType & useContext()
TypeScript
TypeScript Grundlagen: Typendeklarationen, Funktionssignaturen, Type Aliases, Generics (jeweils nach Bedarf)
Typisierung von Komponenten-Props und -Events mit TypeScript
Typisierung von Event-Handlern mit TypeScript
Typisierung verschiedener Hooks mit TypeScript
React und Http-Zugriffe
Http-Anforderungen
Einführung in das Paket "Axios"
Erstellen und Verarbeiten einer Http-GET-Anfrage
Daten an den Server "POST"en
Senden einer DELETE-Anfrage
Fehlerbehandlung in HTTP-Aufrufen
Routing
Routing in "Single Page Application" (SPA)
Arbeiten mit den Paketen "react-router", "react-router-dom"
Einrichten des Routing im Projekt
Navigation mit Links
Verwendung von Router-"props"
Absolute und Relative Pfade
Styling der ausgewählten, aktiven Route
Parameter an Routen übergeben und auswerten
Navigating per Programmcode
Verschachtelte Routen
Umleitung von Anfragen
Schutz von Routen mit "Guards"
Bearbeitung des 404-Errors
"Lazy"-Loading von Routen
React und Formulare
Formulare und Formular-Validierung
Formularkomponenten Verwenden
Umgang mit Benutzereingaben
Benutzerdefinierte Formular-Validierung hinzufügen
Validierungs-Feedback hinzufügen
Fehlermeldungen anzeigen
React und Redux
Die Komplexität der Zustandsverwaltung
Den Redux-Datenfluss verstehen
"Reducer" und "State" einrichten
"Dispatching"-Aktionen definieren
"Subscriptions" hinzufügen
Das "Immutable-Update-Pattern"
Arbeiten mit den Paketen "Redux" und "React Redux"
Hinzufügen von Redux "Middleware"
Verwenden der "Redux Devtools"
Ausführen von Asynchronem Code
Verwenden von "Action Creators"
Verwenden von "GetState"
React und Authentifizierung
Authentifizierung in einer "Single Page Application" (SPA)
Authentifizierungsformulare ertellen (Login, Sign-In, Password-Recovery)
Authentifizierungsservice nutzen
Ressourcen schützen und automatische Weiterleitung
React und Hooks
Einführung in "Hooks"
Verwenden von "useState()" für Zustandsverwaltung
Verwenden von "useEffect()" für das Laden von Daten
Verwenden von "useCallback()"
Verwenden "refs" und "useRef()"
Verwenden von "useReducer()" für HTTP-Zustände
Verwenden von "useContext()"
Optimierung der Leistung mit "useMemo()"
Erstellen und Verwenden von "Custom Hooks"
React und Testing
Einführung in das Testing von React
Testing-Werkzeuge
Tests schreiben
Modul-Tests
Komponenten-Tests
Redux-Tests
E2E-Tests
Bereitstellung von Anwendungen
Übersicht
Projekterstellung
Beispiele
Zielgruppe
Der Kurs richtet sich an Web-Entwickler, Web-Programmierer mit Erfahrung in HTML, CSS und JavaScript, die mit React Web-Anwendungen, Apps erstellen wollen.
Voraussetzungen
Für deinen Besuch des React empfehlen wir Erfahrung in HTML, CSS und JavaScript.
Schulungen, die dich interessieren könnten
Unternehmen in Deutschland, Österreich und der Schweiz, die uns vertrauen
Das sagen unsere Kunden
Wir arbeiten ständig daran uns zu verbessern. Dafür sind wir auf das Feedback unserer Kunden angewiesen.

Kompetentes Online-Training mit Learning by Doing. Besser geht nicht. Jeannette M.
Sehr gute Planung und Organisation aller Microsoft Office Schulungen. Incas Training ist sehr zu empfehlen! Christopher M.
Toller Service. Hatte auf Ihrer Seite KOSTENLOS den Weg gefunden, sämtliche Animationen mit einem Schritt zu entfernen. Hat super geklappt. Vielen lieben Dank dafür. Wenn ich schon nichts bezahlen muss, dann wenigstens eine passenden Bewertung :-) Thomas S.