React - Power Workshop: Der komplette Einstieg

• 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. 

Nach dem Seminarbesuch kennen Sie die Grundlagen von React, Hooks, Redux, React Routing und vieles mehr und können eigene Anwendungen mit Hilfe dem React Framework erstellen.

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

Peter Hecker ist im Vorstand der GFU Cyrus AG aus Köln. Er arbeitet seit 1985 als Softwareentwickler und Trainer. Sein Steckenpferd sind Internet- und Web-Projekte, von denen er seit 1995 eine Vielzahl realisiert hat. Die Teilnehmer seiner Schulungen schätzen seine praktischen Erfahrungen und die praxisnahe und pragmatische Wissensvermittlung. Seit 2009 beschäftigt er sich vorwiegend mit der Entwicklung von mobilen Websites und Anwendungen.

Startzeit für den ersten Schulungstag:
10:00 Uhr - 17:00 Uhr.
Endzeit am letzten Schulungstag:
max. 16:00 Uhr.
Normale Schulungszeit:
09:00 - 16:30 Uhr.

GEDOPLAN GmbH
Kantstraße 164
10623 Berlin.
GEDOPLAN befindet sich in der 25. Etage im Gebäude "Upper West".
-> Google Maps.
-> Weg vom Zoo zum Upper West.
Das Gebäude ist übrigens bei Google Street View (noch) nicht sichtbar.

Am schnellsten und unkompliziertesten erreichen Sie uns mit den öffentlichen Verkehrsmittel, Haltestelle "Zoologischer Garten". Mit Ihrer Berlin Welcome Card sind die Fahrten für Sie kostenlos!

-> U- und S-Bahnplan Berlin.
-> BVG zum Zoologischen Garten.
-> Weg vom Zoo zum Upper West.

Tipp: Falls Sie mit dem ICE aus Hannover anreisen: Steigen Sie schon in Spandau aus und nehmen Sie den Regional Express (RE 63982) in Richtung Hauptbahnhof, Haltestelle "Zoologischer Garten" aussteigen.