Eckdaten
Zielgruppe: Entwickler*innen mit JavaScript Erfahrung | Dauer 3 Tage | 9:00–17:00 Uhr | Trainer: New Elements GmbH | Online-Workshop | Teilnehmerzahl: 4-12
Seminarbeschreibung
Ziele
React ist eine der meistverwendeten Libraries zum Erstellen von Single-Page-Anwendungen (SPAs). In dieser Schulung werden die Grundlagen, die allen SPA-Libraries wie React oder Angular zugrunde liegen, sowie die Besonderheiten von React vermittelt. Dabei wird auf aktuelle Technologien wie Hooks eingegangen.
Am Ende der Schulung ist die Fähigkeit erworben worden, Anwendungen verschiedenster Komplexität mit React umzusetzen und dabei Best Practices zu berücksichtigen. Der Einsatz von TypeScript bietet eine bessere Unterstützung durch die Entwicklungsumgebung und führt zu hochwertigem Code.
Zielgruppe
Entwickler*innen mit JavaScript Erfahrung
Voraussetzungen
Erfahrungen mit HTML und JavaScript
Agenda
Entwicklung moderner Frontend-Anwendungen
- Überblick und Gemeinsamkeiten von React, Angular, Vue.js
- deklarative / datengetriebene Architektur
- Komponenten - eigene HTML-Tags definieren
JavaScript Grundlagen für React
- 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
- Types und Interfaces
- Type Assertions, Union Types, Generics
State (Anwendungszustand) verwalten
- Festsetzen und Ändern des Anwendungszustands
- Arbeiten mit dem State-Hook in Funktionskomponenten
- Arbeiten mit setState() in Klassenkomponenten
- Erfassen des Zustands von input-Elementen
React-Templatesprache
- JavaScript-basierte Templatesyntax: JSX
- Binden von Inhalten und Props
- Event-Handler
- Elemente wiederholen
- if / else
- CSS-Klassen und Stile
Komponenten: Grundbausteine moderner Web-Anwendungen
- Einbinden vorgefertigter Komponenten
- Definieren eigener Komponenten
- Props und Events in eigenen Komponenten
- Prop- Event- und State-Typen in TypeScript
- Datenfluss zwischen Komponenten
- Komponenten inspizieren 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
- JavaScript: "this" und seine Eigenheiten
- State in Klassenkomponenten
- Props und Events in Klassenkomponenten
React Router
- Client-seitiges Routing
- Anzeigen verschiedener Ansichten basierend auf der Route
Testen von React-Anwendungen
- Testen von JavaScript-Funktionen mit Jest
- Testen von React-Komponenten mit React Testing Library
Vertiefung
- Erstellen eigener Hooks
- Context: Teilen von Daten über einen Komponentenbaum hinweg
- State Management mit Reducern und reinen Funktionen
- Einsetzen des Reducer-Hooks in React
- Überblick über State Management mit Redux
