+49 911 65008-222 info@it-seminare.de

React und Redux (mit TypeScript)

Seminardauer: 4 Tage

Seminarinformationen

Seminar - Ziel

In diesem 4-tägigen Seminar "React und Redux (mit TypeScript)" erhalten Sie umfassende Einblicke, wie Sie die Kombination aus React und Redux nutzen, um anspruchsvolle Frontend-Anwendungen zu entwickeln. Diese Technologien werden erfolgreich von großen Plattformen wie Airbnb oder Reddit eingesetzt.

React gilt als führende Bibliothek zur Erstellung von Single-Page-Anwendungen (SPAs). In Verbindung mit Redux lassen sich komplexe Zustände der Anwendung effizient über Reducer verwalten.

Das Seminar behandelt zudem aktuelle Techniken wie Hooks und den Einsatz von TypeScript ausführlich. Nach Abschluss sind die Teilnehmer in der Lage, Anwendungen mit verschiedenen Schwierigkeitsgraden zu entwickeln und dabei bewährte Vorgehensweisen anzuwenden.

Teilnehmer - Zielgruppe

  • Entwickler

Kurs - Voraussetzungen

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

  • Erfahrungen mit HTML und JavaScript

Seminardauer

  • 4 Tage
  • 09:00 Uhr bis 17:00 Uhr

Schulungsunterlagen

  • nach Absprache

Seminar-Inhalt / Agenda

Entwicklung moderner Frontend-Anwendungen

  • Überblick und Gemeinsamkeiten von React, Vue und Angular
  • deklaratives Rendering
  • Komponenten - eigene HTML-Tags definieren
  • Initialisierung eines React-Projektes mittels create-react-app

JavaScript Grundlagen für React (soweit benötigt)

  • Entwicklung mit node.js und npm
  • JavaScript Versionen und Neuerungen
  • Module (import und export)
  • Pfeilfunktionen
  • Funktionale Programmierung in JavaScript

TypeScript Grundlagen für React

  • statische vs dynamische Typisierung
  • Typendeklaration bei Variablen, Funktionen, Arrays und Objekten
  • grundlegende Datentypen
  • Types und Interfaces

State (Anwendungszustand) verwalten

  • deklaratives Rendering
  • Verwalten des Anwendungszustands mittels state-Hook
  • Erfassen des Zustands von input-Elementen

React-Templatesprache

  • JSX: die JavaScript-basierte Templatesprache von React
  • Binden von Inhalten und Props
  • Eventhandler
  • Elemente wiederholen
  • if / else
  • CSS-Klassen und Stile

Komponenten

  • Einbinden vorgefertigter Komponenten
  • Komponentenlibraries für React
  • Definieren eigener Komponenten
  • Props und Events in eigenen Komponenten
  • Prop- Event- und State-Typen in TypeScript
  • Datenfluss zwischen Komponenten
  • Komponenten untersuchen mit den React Developer Tools

APIs aus React abfragen

  • senden von HTTP-Requests via _fetch_
  • verwenden des effect-Hooks, um HTTP-Requests auszulösen

Klassenkomponenten

  • Definieren einer Komponente als Funktion oder als Klasse
  • JavaScript: "this" und seine Eigenheiten
  • State in Klassenkomponenten
  • Props und Events in Klassenkomponenten

React Tools und Libraries

  • React Router
  • Context: Teilen von Daten über einen Komponentenbaum hinweg
  • der Effect-Hook im Detail
  • externe und eigene Hooks (z.B. react-query)
  • Styling Libraries
  • Formular-Libraries

State Management mit Reducern

  • Überblick über State Management
  • State Management mit Reducern und reinen Funktionen
  • Einsetzen des Reducer-Hooks in React
  • Überblick über State Management mit Redux

Testen und Komponentendemos

  • Komponentendemos mit Storybook
  • Testen von JavaScript-Funktionen mit Jest
  • Testen von React-Komponenten mit react-testing-library
  • Snapshot-Tests

App-Entwicklung mit React

  • Progressive Web Apps: Erstellen von installierbaren mobilen und Desktop-Anwendungen
  • Überblick über React Native

Performanceoptimierung und Pre-Rendering

  • React Developer Tools Profiler
  • React.memo, Callback-Hook und Memo-Hook
  • Static Site Generators
  • serverseitiges Rendering
  • Code splitting

Redux

  • State Management in Redux (State, Actions und Reducer)
  • Einrichten eines Redux-Stores mittels Redux Toolkit
  • Verwenden der Redux devtools
  • Einbinden von Redux in ein React-Projekt (Redux Hooks, Container-Komponenten)
  • Aufteilen / Kombinieren von Reducern
  • asynchrone Actions und API-Abfragen mittels Thunk
  • Redux und TypeScript
  • Redux Hilfsfunktionen (createAction, createReducer, createSlice)
  • Selektoren und Memoisation
  • Middleware

Weitere Schulungen zu Thema React

Jakarta EE - Moderne Full Stack Entwicklung mit React und MongoDB

- u.a. in Nürnberg, Berlin, Stuttgart, München, Köln

In diesem 5-tägigen Seminar "Jakarta EE – Moderne Full Stack Entwicklung mit React und MongoDB" erhalten Sie einen umfassenden Überblick über aktuelle Webtechnologien und sind danach in der Lage, ein komplettes Webprojekt mit modernen Tools umzusetzen. Der ...

ASP.NET Core-Entwicklung mit React und Redux

- u.a. in Nürnberg, Berlin, Stuttgart, München, Köln

In diesem 5-tägigen Seminar "ASP.NET Core-Entwicklung mit React und Redux" erlernen Sie die notwendigen Fähigkeiten, um eine moderne Webanwendung zu entwickeln, die JavaScript auf der Client-Seite und ASP.NET Core im Backend nutzt. Sie erhalten grundlegende Kenntnisse in der ...

React und Flux

- u.a. in Bremen, Hamburg, Heidelberg, Koblenz, Darmstadt

In diesem 3-tägigen Seminar "React und Flux" erhalten Sie eine Einführung in die Grundlagen sowie vertiefte Konzepte von React und Flux. Sie erfahren, wie man React-Komponenten mit ES2015 erstellt und nutzen Werkzeuge wie Babel und Webpack. Fortgeschrittene Themen ...

React für Fortgeschrittene

- u.a. in Bremen, Frankfurt am Main, Köln, München, Darmstadt

In diesem 3-tägigen Seminar "React für Fortgeschrittene" vertiefen Sie Ihr Wissen über React und erhalten Einblicke in zahlreiche zusätzliche Libraries aus dem React-Umfeld. Der Fokus liegt auf etablierten Konzepten wie dem Erstellen von Komponenten und dem ...