Java Kurse
von Java Profis.

JavaScript

React - Power Workshop: Der komplette Einstieg

React - der komplette Einstieg

3 Tage

Plätze frei - Online
Plätze frei - Online
Plätze frei - Online
Plätze frei - Online
Plätze frei - Online
Plätze frei - Online

  • *Das ist eine Online-Schulung*
  • 3 praxisnahe Schulungstage mit vielen Übungen
  • der Trainer stellt wie üblich die neue Themen vor
  • der Teilnehmer kann jederzeit Fragen stellen
  • Übungen werden mit Trainer-Unterstützung durchgeführt
  • bei Problemen klinkt sich der Trainer bei dem Teilnehmer auf dem Rechner ein
  • Voraussetzungen für eine Online-Schulung pro Teilnehmer:
  • stabiles Internet, Webcam und Lautsprecher und ein ruhiger Platz
  • Dozent: Peter Hecker

exkl. MwSt

1.480,00

Kursinhalte

  • 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

Kurzbeschreibung

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. 

Kursziele

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.

Teilnehmerkreis

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

Über den Dozenten Peter Hecker

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.

Uhrzeiten

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.

Schulungsadresse

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.

Anreise zum Schulungsort

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.

Ask the Experts

Sie haben zu dem Kursthema eine Frage oder stehen vor der Entscheidung, welches JavaScript-Framework das richtige ist? Gerne steht Ihnen Dozent Peter Hecker Rede und Antwort. Schicken Sie uns bitte eine Mail, wir vereinbaren einen kostenfreien Ast the Experts-Termin mit Ihnen.

Tim Neumann: tim.neumann@gedoplan.de

Maßgeschneidert?

Alle Kurse gibt es auch als
individuelle Firmenschulung
und als Remote-Schulung.

Kontaktieren Sie mich oder
nutzen Sie unseren
Schulungskonfigurator!

030 / 755 49 188

Tim.Neumann@GEDOPLAN.de

So läuft's bei uns

Lernen Sie uns Kennen

“Als Agile Native helfe ich Ihnen zu einer modernen agilen Arbeitsweise - für Sie+Ihre Mitarbeiter“

Judith Islitzer

Agile Consultant und Coach

“Als Agile Native helfe ich Ihnen zu einer modernen agilen Arbeitsweise - für Sie+Ihre Mitarbeiter“

“Erfahrungen aus der Projekt-Praxis weitergeben und Teilnehmer fortbilden.”

Jens Seekamp

Consultant, Software-Architekt und Dozent rund um Java EE

“Erfahrungen aus der Projekt-Praxis weitergeben und Teilnehmer fortbilden.”

Marc Löffler

Agile Consultant, Trainer, Buch und Blog Autor, Co-Active Coach

Alle Schulungsleiter bei GEDOPLAN IT Training.

Das erwartet Sie bei uns

Bei Kursen von GEDOPLAN IT Training ist nicht nur der Kaffee gratis.

Kaffee, Tee und kalte Getränke

Wer öfter trinkt, kann besser denken. Deshalb versorgen wir Sie mit ausreichend gratis Getränken.

Gratis Obst, Snacks und Mahlzeiten für einen erfolgreichen Java Kurs

Obst, Kekse und Mahlzeiten

Ein voller Bauch studiert zwar nicht gern, aber nur wer sich wohl fühlt, hat auch Spaß am Seminar.

Sie erhalten Ihre Java Schulungsunterlagen auf einem 32 GB USB-Stick.

Demos und Beispiele zum Mitnehmen

Unsere Kurse haben einen hohen Praxisanteil. Die komplette Übungsumgebung nehmen Sie bei vielen Kursen am Ende auf einem USB-Stick mit.

Ihre erfolgreiche Teilnahme an unserer Java Schulung wird bestätigt

Teilnahmebescheinigung

Nach erfolgreicher Teilnahme erhalten Sie eine Bescheinigung zur Bestätigung Ihrer Teilnahme.

Java EE 7 Buch von Dirk Weil

Dirk Weil schenkt Ihnen bei einer Buchung eines Java EE Kurses sein Buch Java über EE 7 – auf Wunsch mit Signatur und Widmung.