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

React und GraphQL (mit TypeScript)

Seminardauer: 4 Tage

Seminarinformationen

Seminar - Ziel

In diesem 4-tägigen Seminar "React und GraphQL (mit TypeScript)" erhalten Sie einen umfassenden Einblick in die Kombination von React und GraphQL, um komplexe Frontend-Oberflächen zu gestalten und Daten effizient von APIs abzurufen. Beide Technologien stammen von Facebook und werden von vielen bekannten Websites eingesetzt.

React gilt als führende Bibliothek zur Erstellung von Single-Page-Anwendungen (SPAs). Zusammen mit GraphQL ermöglicht es eine effektive Kommunikation mit serverseitigen APIs.

Das Seminar behandelt außerdem aktuelle Techniken wie Hooks und den Einsatz von TypeScript ausführlich. Nach Abschluss sind die Teilnehmer in der Lage, React-Anwendungen mit unterschiedlichen 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

GraphQL

  • Einsatzgebiete für GraphQL
  • GraphQL vs REST
  • GraphiQL Explorer
  • einfache GraphQL Beispiele
  • parametrische Queries
  • Mutationen
  • Datentypen
  • Abfragen eines GraphQL-APIs aus JavaScript
  • Anbinden einer React-Anwendung mittels Apollo Client

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 Schwerpunkt ...

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 ...

Einführung in React

- u.a. in Frankfurt am Main, Düsseldorf, Heidelberg, Freiburg, Nordhausen

In diesem 3-tägigen Seminar "Einführung in React" erfahren Sie, wie Sie die React.js-Bibliothek sowie JSX einsetzen, um einfache, datenbasierte Benutzeroberflächen (UIs) zu entwickeln. Dabei erhalten Sie einen Überblick über die wesentlichen JavaScript-Konzepte, die für ...

React für Fortgeschrittene

- u.a. in Frankfurt am Main, Hamburg, München, Virtual Classroom, Marburg

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 Einsatz von ...