React - Intensiv-Schulung für Einsteiger

Zielgruppen:

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 die sich im Thema: React - Intensiv-Schulung für Einsteiger weiterbilden wollen.

Fachliche Voraussetzungen:

Keine besonderen Anforderungen.

Technische Voraussetzungen:

Keine besonderen Anforderungen.

Systematik der Agenturen für Arbeit:

keine Angaben

Inhalte

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


Mit unserer "React - Beratung, Coaching, Workshop, Training" gelingt Ihnen der perfekte Einstieg in das React-Framework. Sie erhalten ein vollständiges Verständnis der Architektur hinter einer React-Anwendung und bekommen alle relevanten Informationen um moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen mit einem der modernsten JavaScript-Frameworks auf dem Markt zu entwickeln.


Die Weiterbildung "React - Intensiv-Schulung für Einsteiger" bieten wir Ihnen als Coaching, Workshop, Training - Live-Online und Vor-Ort an.