React und Typescript

Ziele

React ist eine der meistverwendeten Libraries zum Erstellen von Single-Page-Anwendungen (SPAs). In dieser Schulung lernen die Teilnehmer die Grundlagen, die allen SPA-Libraries (wie React oder Angular) zugrunde liegen, sowie die Besonderheiten von React. Dabei wird auf aktuelle Technologien, wie z.B. Hooks, eingegangen.

Am Ende sind sie die Teilnehmer in der Lage, Anwendungen verschiedenster Komplexität mit React umzusetzen und dabei Best Practices zu berücksichtigen. Der Einsatz von TypeScript in dieser Schulung bietet den Teilnehmern eine bessere Unterstützung durch die Entwicklungsumgebung und fürht zu hochwertigem Code.

Zielgruppe

Entwickler 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
• Type Aliases und Interfaces
• Type Assertions, 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

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
• verwenden der Libary "react-query"

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 Web-Anwendungen mit End-to-End-Tests
• 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

Schulungsunterlagen

Mit einer erfolgreichen Teilnahme an einer Schulung bei IT-Schulungen.com erwerben Sie nicht nur Wissen und Kompetenz, sondern erhalten auch zusätzlich zum Teilnahmezertifikat Ihr Open Badge als digitalen Kompetenznachweis.

Diesen erhalten Sie in Ihrem persönlichen und kostenlosen Mein IT-Schulungen.com Account. Ihre erworbenen Badges können Sie anschließend in sozialen Medien einbinden und teilen.

Infos zu den Vorteilen unter Badges