Moderne Webentwicklung mit React

React hat sich seit Jahren als eine der drei großen Single-Page-Lösungen im Frontend etabliert. Die Bibliothek setzt auf einen leichtgewichtigen, komponentenbasierten Ansatz und konzentriert sich auf die Generierung von Benutzeroberflächen. Sie bietet eine hohe Entwicklungsgeschwindigkeit und garantiert eine gute Performance für Anwendungen - nicht anders als von einem Facebook-Projekt zu erwarten.

Dieser Kurs erleichtert Ihnen den Einstieg in die Entwicklung mit React und hilft Ihnen, die Konzepte und Architekturmuster einer React-Applikation kennenzulernen. Sie lernen React von Grund auf kennen und können alle wichtigen Aspekte der Bibliothek praktisch anwenden. Angefangen bei Komponenten über Hooks, Styling und Formularen entwickeln Sie eine voll funktionsfähige Kochbuch-Applikation, die Sie natürlich auch testen und debuggen werden.

Am Ende des Kurses haben Sie eine lauffähige Single-Page-Applikation und wissen genau, wie sie funktioniert und wie Sie sie anpassen und erweitern können. Sie werden in der Lage sein, eigene Anwendungen zu entwickeln, die auch den Anforderungen komplexer Unternehmensanwendungen standhalten können.

Alle Video-Lektionen im Überblick:

• 1. Einführung und Einrichtung

  • Herzlich willkommen zu diesem Kurs

  • Intro

  • Die Grundlagen von React

  • Werkzeuge für den Umgang mit React

  • Applikationen mit Create React App initialisieren

  • Weitere Optionen von Create React App kennenlernen

  • Struktur der Applikation

  • Start der Applikation

  • Quiz: Erste Schritte

• 2. Komponenten-Lifecycle

  • Intro

  • Aufbau des Effect Hooks

  • Einhängen von Komponenten

  • Aktualisierung von Komponenten

  • Entfernen von Komponenten

  • Mit einem Webserver kommunizieren

  • Lesend auf APIs zugreifen

  • Schreibend auf APIs zugreifen

  • Quiz: Komponenten-Lifecycle

• 3. Komponenten

  • Intro

  • Die Komponentenarchitektur von React

  • Funktionskomponenten als Bausteine einer Applikation

  • Thinking in React

  • React-Komponenten erstellen

  • Mehr Dynamik in Komponenten dank JSX

  • Den State einer Komponente richtig typisieren

  • Die State-Definition einer Komponente

  • Informationen mit Props an Komponenten übergeben

  • Umgang mit User-Events

  • Kommunikation zwischen Kind- und Elternkomponente

  • Quiz: Komponenten

• 4. Styling

  • Intro

  • Styling mit dem Style-Attribut und Klassen

  • Mehrere CSS-Klassen in einem Element

  • Mehr Flexiblität beim Stylen von Komponenten mit der Classnames Bibliothek

  • Styling mit SCSS und CSS Modules

  • Styled Components verwenden

  • Material UI einbinden

  • Quiz: Styling

• 5. Context

  • Intro

  • Zentrale Informationen im Context vorhalten

  • Zugriff auf den Context

  • Quiz: Context

• 6. Custom Hooks

  • Intro

  • Funktionalität in Custom Hooks auslagern

  • Quiz: Custom Hooks

• 7. Formulare

  • Intro

  • Grundlegender Aufbau eines Formulars

  • Formularelemente mit dem State synchronisieren

  • Ein umfangreicheres Formular aufbauen

  • Das Formular absenden

  • Formulardaten zum Server senden

  • Grundlagen der Formularvalidierung

  • Formularbehandlung mit Formik

  • Formularvalidierung mit Formik und Yup

  • Validierungsschema definieren

  • Quiz: Formulare

• 8. Refs

  • Intro

  • Refs

  • Dateien in React hochladen

  • Die übrigen Hooks

  • Quiz: Refs

• 9. Routing

  • Intro

  • Einführung in den React Router

  • Routen mit Variablen umsetzen

  • Direkte Steuerung des Routers

  • UI-Elemente mit dem Router steuern

  • Quiz: Routing

• 10. Testing

  • Intro

  • Unittests mit Jest

  • Tests organisieren

  • Weiterführende Test-Themen

  • React-Komponenten testen

  • Events testen

  • Abhängigkeiten mocken

  • Snapshot-Tests mit Jest

  • Quiz: Testing

• 11. Debugging und Tools

  • Intro

  • Die Applikation mit den Browser-Dev-Tools analysieren

  • Ein Blick in den Komponentenbaum mit den React-Dev-Tools

  • React-Applikationen profilen

  • Quiz: Debugging und Tools

• 12. Build

  • Intro

  • Build und Deployment einer React-Applikation

  • Die Konfiguration mit Umgebungsvariablen beeinflussen

  • Quiz: Build

• 13. Klassenkomponenten

  • Intro

  • Einführung in die Klassenkomponenten von React

  • Zustand und Props bei Klassenkomponenten

  • Der Lifecycle einer Klassenkomponente

  • Refactoring der Klassenkomponenten

  • Unterschiede zwischen Klassen- und Funktionskomponenten

  • Quiz: Klassenkomponenten

  • Fazit und Kursabschluss

So lernen Sie mit diesem Videokurs:

In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in viele kleine Lernschritte und Aufgaben unterteilt - Sie können den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen, die Sie interessieren.  Die persönliche Lernumgebung der heise Academy bietet Ihnen viele Funktionen, die Sie beim Lernen unterstützen:

• Flexibler Videoplayer mit vielen Steuerungsmöglichkeiten

• Wissensquizzes zur Lernkontrolle

• Lernhistorie und Lernfortschritt

• Lesezeichen und Notizen 

• Volltextsuche in den Videos

• Frage-den-Experten-Modul

• Übungsmaterial zum Mitmachen

• Responsive Web-App und Videostreaming für alle Endgeräte

Technische Voraussetzungen:

Für diesen Videokurs wird lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.