React - Power Workshop: Der komplette Einstieg Online-Schulung - Webinar von GEDOPLAN GmbH

• 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

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

• Optional: 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

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

Optional: 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

Erstellen Sie leistungsstarke, schnelle, benutzerfreundliche und reaktive Webanwendungen mit dem React-Framework. Lernen Sie React, Hooks, Redux, React Routing und vieles mehr kennen und nutzen. Dieser Kurs beginnt mit den Grundlagen von React und erklärt, was genau React ist und wie Sie es verwenden können. 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. 

Web-Entwickler, Web-Programmierer mit Erfahrung in HTML, CSS und JavaScript die mit React Web-Anwendungen, Apps erstellen wollen.

• Das ist eine Online-Schulung
• Uhrzeit: 09:00 bis 16:30 Uhr
• Dozent: Peter Hecker
• der Trainer stellt wie üblich die neuen Themen vor
• der Teilnehmer kann jederzeit Fragen stellen
• Übungen werden mit Trainer-Unterstützung durchgeführt
• bei Problemen klinkt sich der Trainer bei dem Teilnehmer auf den Rechner ein
• die digitalen Seminarunterlagen erhalten die Teilnehmer im Vorfeld
• Voraussetzungen für eine Online-Schulung pro Teilnehmer:
• stabiles Internet
• Webcam und Lautsprecher
• ein ruhiger Platz
• Admin-Rechte
• Empfehlung: 2 Bildschirme
• Online-Schulung mit Zoom
• nach weiterer Absprache kann auch ein anderes Tool oder Anbieter eingesetzt werden