React und GraphQL (mit TypeScript)

Objectives

GraphQL ist eine neue und innovative Möglichkeit, Datendiagramme abzufragen und zu mutieren, je nach den wünschen und Bedürfnissen des GraphQL-Verbrauchers.

Target audience

Entwickler mit JavaScript Erfahrung

Requirements

Erfahrungen mit HTML und JavaScript

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