React und GraphQL (mit TypeScript)

Classroom Schulung | Deutsch | Anspruch

Schulungsdauer: 4 Tage Durchführung gesichert

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

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

Tags

Diese Seite weiterempfehlen