GEDOPLAN

React – Power Workshop: Der komplette Einstieg

  • Was ist React und wie nutze ich es richtig?
  • Umfangreicher Einstieg in die Entwicklung von Webanwendungen mit React.
  • Kurs vermittelt Grundlagen, als auch den Weg zu fortgeschrittenen Anwendungen.

Beschreibung

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.

Agenda

  • 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

Teilnehmerkreis und Voraussetzungen

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

Mindestanzahl Teilnehmende: 2 Personen

Schulungstermine

24.03.–26.03.2025

Online
3 Tage
Rabatt ab 2 Personen
ausgebucht

1.860,00 €
Details

28.04.–30.04.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

19.05.–21.05.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

23.06.–25.06.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

28.07.–30.07.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

25.08.–27.08.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

29.09.–01.10.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

27.10.–29.10.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

17.11.–19.11.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

15.12.–17.12.2025

Online
3 Tage
Rabatt ab 2 Personen
Plätze frei

1.860,00 €
Details

Diese Schulung bieten wir auch als maßgeschneiderte Firmenschulung an

GEDOPLAN erstellt für Sie auf Ihre Unternehmensziele zugeschnittene Firmenschulung.
Durch unser modulares Schulungssystem sind wir in der Lage, anhand Ihrer Angaben eine individuelle Schulung zu gestalten. Denn die optimale Weiterbildung Ihrer Mitarbeiter nach Ihren Vorgaben und Anforderungen stehen bei uns im Mittelpunkt.
Bei Interesse nehmen Sie bitte Kontakt, wir führen dann gerne mit Ihnen ein unverbindliches Gespräch

Firmenschulung anfragen

Sie brauchen eine maßgeschneiderte Schulung?

GEDOPLAN erstellt für Sie auf Ihre Unternehmensziele zugeschnittene Firmenschulungen. Durch unser modulares Schulungssystem sind wir in der Lage, anhand Ihrer Angaben eine individuelle Schulung zu gestalten. Denn die optimale Weiterbildung Ihrer Mitarbeiter nach Ihren Vorgaben und Anforderungen stehen bei uns im Mittelpunkt. Bei Interesse nehmen Sie bitte Kontakt mit uns auf, wir führen dann gerne mit Ihnen ein unverbindliches Gespräch.

GEDOPLAN - Telefonkontakt

030 / 20 89 82 63 0

GEDOPLAN - E-Mail Kontakt

Tim.Neumann@GEDOPLAN.de

Firmenschulung anfragen

Weitere Schulungen

Vorträge & News zum Thema
Es wurden keine Ergebnisse gefunden, die deinen Suchkriterien entsprechen.

News aus Schulung, Beratung & Softwareentwicklung

News aus Schulung, Beratung & Softwareentwicklung

News aus Schulung, Beratung & Softwareentwicklung

Das sagen Kursteilnehmer

Das sagen Kursteilnehmer

Das sagen Kursteilnehmer

Unsere Trainer

Unsere Trainer

Unsere Trainer

Kontakt

Brauchen Sie eine individuelle IT-Schulung, eine fundierte Beratung oder eine individuelle Softwareentwicklung? Dann sind Sie hier genau richtig!

Tim Neumann

Geschäftsleitung
GEDOPLAN - Telefonkontakt

030 / 20 89 82 63 0

GEDOPLAN - E-Mail Kontakt

info@gedoplan.de

GEDOPLAN GmbH
Stieghorster Straße 60
33605 Bielefeld

GEDOPLAN GmbH
Kantstraße 164
10623 Berlin

    Kontakt

    Tim Neumann

    Geschäftsleitung
    GEDOPLAN - Telefonkontakt

    030 / 20 89 82 63 0

    GEDOPLAN - E-Mail Kontakt

    info@gedoplan.de

    GEDOPLAN GmbH
    Stieghorster Straße 60
    33605 Bielefeld

    GEDOPLAN GmbH
    Kantstraße 164
    10623 Berlin

    Brauchen Sie eine individuelle IT-Schulung, eine fundierte Beratung oder eine individuelle Softwareentwicklung? Dann sind Sie hier genau richtig!