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

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

Apollo für React und GraphQL

- u.a. in Frankfurt am Main, Hannover, Nürnberg, Kassel, Jena

In diesem 2-tägigen Seminar "Apollo für React & GraphQL" beschäftigen Sie sich intensiv mit der modernen Webentwicklung in JavaScript mithilfe des React- und GraphQL-Frameworks Apollo. Sie lernen, wie Apollo genutzt werden kann, um die Entwicklung von React- und ...

Erstellen von Webseiten mit Gatsby

- u.a. in München, Essen, Koblenz, Freiburg, Kassel

In diesem 2-tägigen Seminar "Erstellen von Webseiten mit Gatsby" erhalten Sie einen modernen Einblick in die Entwicklung von Weblösungen, die den Wandel von einem monolithischen CMS hin zu einem Content Mesh mit einer entkoppelten Infrastruktur für Websites ...