SchulungenProgrammierungJavaReact – Power Workshop
Lade Schulungen
vollständiger Stern vollständiger Stern vollständiger Stern vollständiger Stern halber Stern
4.8
(101)

React – Power Workshop

React – Power Workshop: Erstelle eigene Anwendungen mit Hilfe des React Frameworks

Erstelle leistungsstarke, schnelle, benutzerfreundliche und reaktive Webanwendungen mit dem React-Framework. Lerne React, Hooks, Redux, React Routing und vieles mehr kennen und nutzen.

Der React – Power Workshop 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 React

Nach dem Besuch des React – Power Workshop 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

React Einführung

  • Überblick – Was ist React
  • „Hello World“ in React
  • Vorteile von React
  • React Alternativen
  • Projekt erstellen mit dem „Create React App“-CLI
  • Projekt Ordnerstruktur
  • Einführung in React-Komponenten
  • Einführung in JSX (Javascript XML oder Javascript Syntax Extension)

React-Komponenten

  • Funktionskomponenten erstellen
  • Arbeiten mit mehreren React-Komponenten
  • Ausgabe von dynamischen Inhalten
  • React-Komponenten und „props“, „children“, „state“
  • React-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“

React-Komponenten im Detail

  • Projektstruktur: Aufteilen einer App in React-Komponenten
  • Vergleich zwischen zustandslosen und zustandsbehafteten React-Komponenten
  • Klassenkomponenten vs. Funktionskomponenten
  • Übersicht über den Lebenszyklus von React-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()

React mit 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 in React
  • 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

React und 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

React und Bereitstellung von Anwendungen

  • Übersicht
  • Projekterstellung
  • Beispiele

Wir schulen auch bei dir vor Ort!

Diese React Schulung führen wir auch bei dir im Unternehmen als individualisierte React-Firmenschulung durch.

React – Power Workshop Zielgruppe: React

Der React – Power Workshop richtet sich an Web-Entwickler, Web-Programmierer mit Erfahrung in HTML, CSS und JavaScript, die mit React Web-Anwendungen, Apps erstellen wollen.

React – Power Workshop Voraussetzungen: React

Für deinen Besuch des React – Power Workshop empfehlen wir Erfahrung in HTML, CSS und JavaScript.

Bewertungen

React Schulung
Daumen nach oben (Bewertungsübersicht)
4.8
101 Bewertungen
vollständiger Stern vollständiger Stern vollständiger Stern vollständiger Stern halber Stern
Kundenstimme männlich
Michael W.
Ernst & Young Retail Services GmbH
vollständiger Sternvollständiger Sternvollständiger Sternvollständiger Sternvollständiger Stern
Ich fühlte mich in diesem Seminar hervorragend betreut. Es war sehr praxisorientiert und anschaulich.
Kundenstimme männlich
Wolfgang N.
ThyssenKrupp Nirosta
vollständiger Sternvollständiger Sternvollständiger Sternvollständiger Sternvollständiger Stern
Eine gute Adresse für das Erlernen scheinbar schwieriger und trockener Themen, die hier gut aufbereitet werden.
Kundenstimme männlich
Thomas M.
Aldi GmbH & Co. KG
vollständiger Sternvollständiger Sternvollständiger Sternvollständiger Sternvollständiger Stern
Lernen in einem sehr entspannten und angenehmen Klima. Prima!
Close Modal

Lade dir ein PDF mit allen Infos zur Schulung herunter

Unterrichtszeiten

Schulungsort

Live Online Schulung

Technische Voraussetzungen

Hinweise zur Anreise

Hinweise zum Schulungsort

Anfrage

Deine Daten für die gewünschte Anfrage

*“ zeigt erforderliche Felder an

Hidden
Bitte gib eine Zahl von 1 bis 99 ein.
Dieses Feld dient zur Validierung und sollte nicht verändert werden.