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 dir den Einstieg in die Entwicklung mit React und hilft dir, die Konzepte und Architekturmuster einer React-Applikation kennenzulernen. Du lernst React von Grund auf kennen und kannst alle wichtigen Aspekte der Bibliothek praktisch anwenden. Angefangen bei Komponenten über Hooks, Styling und Formularen entwickelst du eine voll funktionsfähige Kochbuch-Applikation, die du natürlich auch testen und debuggen wirst.

Am Ende des Kurses hast du eine lauffähige Single-Page-Applikation und weißt genau, wie sie funktioniert und wie du sie anpassen und erweitern kannst. Du wirst 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 lernst du mit diesem Videokurs:

In den Videokursen der heise academy lernst du IT-Themen anschaulich und verständlich. Du siehst den Experten bei der praktischen Arbeit zu und lässt dir dabei alles genau erklären. Das Wissen ist in kompakte Lerneinheiten unterteilt, sodass du den Kurs Schritt für Schritt durcharbeiten oder gezielt zu Lektionen springen kannst, die dich interessieren. Die persönliche Lernumgebung der heise academy hält viele Funktionen für dich bereit, die dich 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.