Einführung in die ASP.NET Core-Entwicklung mit React und Redux

Ziele

Diese Schulung "Einführung in die ASP.NET Core-Entwicklung mit React und Redux" vermittelt den Teilnehmern die notwendigen Kenntnisse, um eine moderne Webanwendung zu erstellen, die auf JavaScript auf der Client-Seite und ASP.NET Core im Backend basiert.

Die Teilnehmer erwerben grundlegende Kenntnisse in der Entwicklung von Business-Applikationen, einschließlich der Sicherung einer Anwendung mit einem Login, der Erstellung mehrseitiger Anwendungen mit Routing und der Erstellung komplexer Formulare mit Validierung. Die Teilnehmer lernen die Best Practices von React, Redux und ASP.NET Core und deren Verwendung in einer Single Page Application (SPA) kennen.

Zielgruppe

Entwickler aus dem .NET Bereich

Voraussetzungen

Kenntnisse in den Programmiersprachen C# und JavaScript

Agenda

Einführung

.NET Core SDK

• Installation
• Versionsverwaltung
• Command-Line Interface (CLI)
• Hello World Applikation
• Verwendung von Visual Studio Code für C#-Codierung
• Optional: Verwenden von Visual Studio 2019 für die C#-Codierung
• Optional: Verwendung von Visual Studio für Mac für die C#-Codierung

ASP.NET Core Applikations-Architektur

• NuGet-Pakete und Metapakete
• Starten der Anwendung
• Hosting-Umgebungen
• Middleware und die Request Processing Pipeline
• Services und Dependency Injection

Applikation Konfiguration

• Konfigurieren und ConfigureServices
• Configuration Providers und Sources
• Configuration-API
• Options Pattern
• HTTPS, GDPR und HTTP/2

Anfrage-Routing

• RESTful Services
• Endpoint-Routing
• Attribut-basiertes Routing
• Route Templates
• Route Constraints

Models

• Objekt-Relational Mapping
• Entity Framework (EF) Core
• Optional: Persistenz Ignorance
• Optional: Automapper

Controllers

• - Responsibilities
• - Requirements und Conventions
• - Abhängigkeiten
• - Action Results

Application State

• Client-Side vs. Server-Side
• HttpContext.Items
• Session State

Error Handling

• Best Practices
• HTTP Error Status Codes und Status Code Pages
• Developer Exception Page
• Optional: Exception Filters

Logging

• Konfiguration
• ILogger
• Optional: Serilog und Seq

Testing

• Unit-Testing
• xUnit
• Testing Controllers

Einführung in React und Redux

• Was ist React?
• Welches Problem wird mit React gelöst?
• React im Vergleich zu anderen Frameworks

Entwicklungs-Tools

• React-App-Projektgenerator erstellen
• React-Entwickler-Tools
• Ausführen und Debuggen einer React-Anwendung
• Die Rolle von Node.js
• Zweck von React und ReactDOM

Funktionale Komponenten

• Was sind Komponenten?
• Element und JSX erstellen
• Fragmente
• JavaScript-Pfeilfunktionen
• ES2015-Bausteine
• JSX und Ausdrücke
• Sammlungen von Daten anzeigen
• JavaScript-Array-Maps und React Keys
• Übergabe von Daten mit Props
• Validierung von Props mit PropTypes
• Standard-Props
• Optional: Memo verwenden

Klassen-basierte Komponenten

• JavaScript-Klassen und -Erweiterungen
• Status konfigurieren
• Lifecycle-Methoden
• Google Performance-Tool
• Kontext von Event Handlers
• Class Properties und Class Arrow Functions
• PropTypes und Standard-Props für Klassen

Hooks

• Überblick
• State
• Effect
• Ref
• Callback

Optional: Fortgeschrittene Komponenten

• Composition vs. Vererbung
• Patterns: Spezialisierung, Containment und Higher Order Components
• Zustand aufheben
• Weiterleitung von Referenzen
• Kontext

Redux

• Verwaltung des Anwendungsstatus
• Drei Prinzipien von Redux
• Reine Funktionen
• Reducer-Funktionen
• Komposition von Reducer-Funktionen
• Dispatching-Aktionen
• Action-Ersteller

React mit Redux verbinden

• Verbinden Sie React mit Redux mit React-Redux
• React-Redux-Komponenten höherer Ordnung
• React-Redux-Haken
• Zustandsselektoren verwenden
• Zustandsselektoren optimieren

React mit ASP.NET Core REST API verbinden

• JavaScript-Übersicht: Rückrufe, Promises & Async/Await
• Verwendung der Fetch-API mit ASP.NET Core REST API
• Asynchrone Operationen und React/Redux mit Saga
• JavaScript-Generatoren
• Sagas Hilfsmittel
• Deklarative Effekte
• Error Handling
• Verbinden mit Redux

Unit-Tests

• Jest verwenden
• Organisieren von Tests und Test Suites
• Aufsetzen und Entfernen von Tests
• Durchführen von Assertions mit Expect
• Spies verwenden
• Snapshot-Tests
• DOM-Tests
• Shallow-Tests
• Erzeugen von Code Coverage Reports
• React Unit-Tests
• Redux Unit-Tests

React-Router

• Was ist Routing?
• URL als State
• React-Router-Hooks
• Routes konfigurieren
• Seiten-Muster
• Fehlerseite
• Weiterleitungen
• Animierte Übergänge
• Verschachtelte Routes

Optional: Advanced Forms

• Was ist Formik?
• Herausforderungen mit React und Forms
• Formik Higher Order Components
• Optional: Formik Hooks, Validierung, Übermittlung

Authentifizierung

• Einführung
• ASP.NET Core Identity
• Cookie-Middleware
• Autorisierung
• Claims-Based Authorization
• React Login Form
• Login Error Handling
• Integration von Berechtigungen mit Routing