React - Intensiv-Schulung für Einsteiger

Institut: HECKER CONSULTING
Bereich: Technik, EDV, Telekommunikation

Kurs merken

Anmelden

Kursbeschreibung

Moderne komponentenbasierte Frontend-Anwendungen mit React

Deklarative Ansichten machen Code vorhersehbarer und leichter zu debuggen.

Von der Einrichtung bis zur Bereitstellung deckt unsere "React - Beratung, Coaching, Workshop, Training" alles ab!

Sie erhalten aktuelle Informationen über Komponenten, Formulare, Http-Zugriff, Routing, Zustandsverwaltung einer React-App und vieles mehr.

Ihre individuellen Fragen und Themenwünsche werden dabei natürlich berücksichtigt.

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

Animationen in React

CSS-Übergänge und CSS-Animationen verwenden
Verwendung von ReactTransitionGroup
Die CSSTransition-Komponente
Alternative Animationspakete

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

React Hooks als Ersatz für Redux

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

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

Moderne komponentenbasierte Frontend-Anwendungen mit React

Deklarative Ansichten machen Code vorhersehbarer und leichter zu debuggen.

Von der Einrichtung bis zur Bereitstellung deckt unsere "React - Beratung, Coaching, Workshop, Training" alles ab!

Sie erhalten aktuelle Informationen über Komponenten, Formulare, Http-Zugriff, Routing, Zustandsverwaltung einer React-App und vieles mehr.

Ihre individuellen Fragen und Themenwünsche werden dabei natürlich berücksichtigt.

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…

mehrweniger lesen

Wann & Wo

Website

https://www.hco.de

Datum

auf Anfrage

Uhrzeit

09:00

Dauer

ab 1 Tag nach Vereinbarung

Ort

Virtuelles Klassenzimmer, Live-Online-Seminar

Kontakt

E-Mail

info@hco.de

Kontakt

Peter Hecker

Straße

Erkrather Str. 401

PLZ

40231

Ort

Düsseldorf

Land

Deutschland

Bundesland

---

Tel

+49 211 542 480 40

Voraussetzungen

Keine besonderen Anforderungen.

Ziele

Zielgruppe

Interessenten mit abgeschlossener Berufsausbildung oder Berufserfahrungen im Medienbereich, Kommunikationsbereich oder kaufmännischen Bereich, die sicher im Umgang mit dem PC sind sowie eine Affinität zum Internet und digitalen Medien haben und eineReact - Beratung, Coaching, Workshop, Training suchen!

Weitere Daten

Kursnummer

5fdb66219515d5533ca1

Plätze