React und GraphQL (mit TypeScript)

Ziele

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

Zielgruppe

Entwickler mit JavaScript Erfahrung

Voraussetzungen

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