Einführung in React

Objectives

In dieser Schulung lernen Sie wie man die React.js-Bibliothek und JSX nutzt, um einfache datengesteuerte Benutzeroberflächen (UIs) zu erstellen.

Der Kurs beginnt mit einem Überblick über die notwendigen JavaScript-Konzepte, die für die Arbeit mit React erforderlich sind. Anschließend wird React betrachtet, indem zunächst die Beweggründe für die Verwendung von React im Vergleich zu anderen beliebten JavaScript-Frameworks dargelegt werden. Der Kurs behandelt die wichtigsten Konzepte, Komponenten, Architekturen und die Syntax, die bei der Entwicklung von React verwendet werden.

Target audience

Front-End-Entwickler mit Erfahrung in grundlegendem JavaScript.

Requirements

Erfahrungen in JavaScript, HTML und CSS sind wünschenswert.

Agenda

Entwicklung moderner Frontend-Anwendungen

• Überblick und Gemeinsamkeiten von React, Angular, Vue.js
• deklarative / State-basierte Architektur
• Komponenten - eigene HTML-Tags definieren

# JavaScript Grundlagen für React

• Entwicklung mit node.js und npm
• Module (import und export)
• Pfeilfunktionen
• Funktionale Programmierung in JavaScript

# TypeScript Grundlagen für React

• Typendeklaration bei Variablen, Funktionen, Arrays und Objekten
• Type Aliases und Interfaces
• Type Assertions, Union Types, Generics

# State (Anwendungszustand) verwalten

• Konzept der Immutability (Unveränderlichkeit)
• Festsetzen und Ändern des Anwendungszustands
• Arbeiten mit dem State-Hook in Funktionskomponenten
• Erfassen des Zustands von input-Elementen

# JSX: die React-Templatesprache

• JavaScript-basierte Templatesyntax: JSX
• Binden von Inhalten und Properties
• Event-Handler
• CSS-Klassen und Stile
• if / else
• Elemente wiederholen

# Komponenten: Grundbausteine moderner Web-Anwendungen

• Einbinden vorgefertigter Komponenten
• Definieren von Props in eigenen Komponenten
• Definieren von Events in eigenen Komponenten
• Datenfluss zwischen Komponenten
• Komponenten inspizieren mit den React Developer Tools
• Funktionskomponenten und Klassenkomponenten

# Arbeiten mit Hooks

• Funktionsweise von Hooks in React
  Verwenden von eingebauten und externen Hooks

# APIs aus React abfragen

• Senden von HTTP-Requests via fetch
• Verwenden der Libary "react-query"
• Verwenden des effect-Hooks, um HTTP-Requests auszulösen

# React Router

• Client-seitiges Routing
• Anzeigen verschiedener Ansichten basierend auf der Route

# Vertiefung und Ausblick

• Überblick: Context: Teilen von Daten über einen Komponentenbaum hinweg
• Überblick: Erstellen eigener Hooks
• Überblick: Libraries für Styling und Formulare