React ist eine Bibliothek zum Entwickeln von Benutzeroberflächen für Webanwendungen. Sie wird seit dem Jahr 2011 von Facebook entwickelt und steht als Open-Source zur Verfügung. React zeichnet sich durch einen deklarativen und Komponenten-basierten Programmierstil aus. Die Bbliothek verwendet zum Erreichen einer hohen Performance ein Virtual-DOM, und nutzt die Spracherweiterung JSX, um JavaScript und HTML in einer gemeinsamen Datei verwalten zu können. David Losert stellt sich und React kurz vor und erläutert den Ablauf des Videokurses.

Bevor man Anwendungen mit React entwickeln kann, gilt es zunächst, React zu installieren und zu konfigurieren. Dafür stehen verschiedene Möglichkeiten zur Verfügung, von der Verwendung eines CDNs bis zum Einsatz von npm. Außerdem wird ein Webserver benötigt, um die Anwendung zu veröffentlichen. Für die ersten Zeilen und das erste React-Element ist schließlich noch die Frage zu beantworten, ob man mit JSX arbeiten will, wofür man wiederum Babel benötigt. David Losert zeigt, wie man in wenigen Schritten zu einem Setup und einer ersten ausführbaren Anwendung gelangt.

Einer der wichtigsten Aspekte von React ist die Komponentenorientierung, denn React-Components bilden die Grundlage für die Wiederverwendbarkeit von UI-Elementen. React-Components lassen sich sowohl funktional als auch klassenbasiert definieren, und können von Außen über sogenannte Props konfiguriert werden. David Losert zeigt, wie man solche Komponenten schreibt, wie man sie konfiguriert und für komplexere Anwendungen komponiert. Außerdem stellt er verschiedene Wege vor, um in React geschriebene Komponenten per CSS gestalten zu können.

Wer Anwendungen mit React entwickelt, braucht über kurz oder lang einen Bundler wie Webpack. Ein solches Werkzeug ist erforderlich, um React als npm-Modul installieren und weitere Komponenten integrieren zu können. Außerdem vereinfacht ein Bundler das Deployment, da die gesamte Anwendung als eine einzige JavaScript-Datei zusammengefasst wird. David Losert zeigt in dieser Folge, wie man Webpack für React konfiguriert, und integriert schließlich auf dem Weg sogar CSS.

Anwendungen zeigen nicht nur Daten an, sondern nehmen auch Eingaben entgegen und ändern ihren Zustand. Dieser Zustand wird in React als States bezeichnet, und er ist im Gegensatz zu den bereits bekannten Props veränderlich. David Losert zeigt in dieser Folge, wie die State-Verwaltung von React funktioniert und welche Möglichkeiten es gibt, State zu verändern und anzupassen – und auf welche Stolperfallen es dabei zu achten gilt.

Eines der wichtigsten Konzepte für Anwendungen ist das Entgegennehmen und Verarbeiten von Eingaben. React kennt hierfür verschiedene Erweiterungspunkte, über die man ereignisbehandelnde Funktionen anbinden kann. Allerdings gibt es dabei, insbesondere in Verbindung mit dem this-Schlüsselwort, einige Aspekte zu beachten. David Losert zeigt in dieser Folge, wie das alles funktioniert und wie diese Themen mit dem Verwalten von State zusammenhängen.

Nahezu jede Anwendung basiert an der ein oder anderen Stelle auf Formularen. Üblicherweise basieren diese auf verschiedenen Steuerelementen und setzen Validierung und Fehlerbehandlung ein. David Losert zeigt in dieser Folge, wie Formulare mit React integriert werden, wie sich Teile der UI in Abhängigkeit von Bedingungen rendern lassen, und was typische Stolperfallen im Umgang mit Ereignissen sind – und wie sie sich vermeiden lassen.

JSX kann mehr als nur einzelne Elemente rendern, unter anderem auch Listen und komplexe Objekte. Dazu bedarf es jedoch fortgeschrittener Techniken, beispielsweise dem Destructuring oder dem Zugriff auf die untergeordneten Elemente. David Losert erklärt in dieser Folge, welche fortgeschrittenen JSX-Techniken es gibt und wie man sie verwendet, um umfangreiche Komponenten zu entwickeln, beispielsweise eine Tab-Komponente.

Die Hands-On-Folge führt keine neuen Konzepte von React ein, sondern zeigt alles bisher Gelernte im Zusammenspiel – vom Setup und dem Definieren von Komponenten über den Umgang mit State und Formularen bis hin zu den verschiedenen JSX-Techniken. Zu diesem Zweck entwickelt David Losert in dieser Folge eine Anwendung zum Verwalten einer Einkaufsliste.

Die Hands-On-Folge führt keine neuen Konzepte von React ein, sondern zeigt alles bisher Gelernte im Zusammenspiel – vom Setup und dem Definieren von Komponenten über den Umgang mit State und Formularen bis hin zu den verschiedenen JSX-Techniken. Zu diesem Zweck entwickelt David Losert in dieser Folge eine Anwendung zum Verwalten einer Einkaufsliste.

Hooks sind in React die moderne Variante der Lifecycle-Methoden, stehen allerdings nur in funktionalen Komponenten zur Verfügung. An die Stelle von componentDidMount, componentWillMount & Co. treten nun Funktionen wie useState, useEffect, … Wie funktionieren Hooks und worauf gilt es bei ihrem Einsatz zu achten?

Die vergangenen Folgen der Einführung in React haben die Grundlagen der Entwicklung von Anwendungen mit React vermittelt. Diese Folge zeigt rückblickend noch einmal die Grundlagen in einer Zusammenfassung und legt auf dem Weg das Fundament für die fortgeschrittenen Themen, die David Losert in den kommenden Folgen behandeln wird.

React-Anwendungen debuggen zu können, ist eine wichtige Voraussetzung, um Fehler im Code aufzuspüren und anschließend zu beheben. In dieser Folge zeigt David Losert, welche Möglichkeiten React zu diesem Zweck bietet, welche Kniffe es dabei gibt und auf welche Stolperfallen es zu achten gilt.

Zur professionellen Entwicklung mit React gehört auch das Aufspüren und Beheben von Fehlern. Für diesen Zweck stehen verschiedene Werkzeuge zur Verfügung, allen voran die React-Developer-Tools. In dieser Folge stellt David Losert die Developer-Tools im Detail vor und zeigt, wie man sie für die Fehlersuche nutzen kann.

Prop-Types sind eine Erweiterung für React, mit der die Props von React-Komponenten typsicher gestaltet werden können. Sie bilden eine gute Grundlage, um die Qualität des Codes einer React-Anwendung zu erhöhen und Fehler einfacher und zielgerichteter aufzuspüren. In dieser Folge erklärt David Losert, wie Prop-Types funktionieren.

Die vorgefertigten Prop-Types genügen nicht allen Anforderungen, die in der Entwicklung von React-Anwendungen auftreten. Das ist beispielsweise dann der Fall, wenn React-Elemente an eine Komponente übergeben werden sollen oder wenn eine eigene Validierung benötigt wird. Was lässt sich in einem solchen Fall machen?

Im Oktober 2020 gab es gleich zwei wichtige Updates für Entwicklerinnen und Entwickler, die mit React arbeiten. Zum einen wurde React 17 veröffentlicht, zum anderen ist Webpack 5 erschienen. Daher gibt David Losert in dieser Folge einen Überblick über die Neuerungen und zeigt, wie das Update auf die neuen Versionen gelingt und was es dabei zu beachten gilt.

React-Anwendungen können außer in JavaScript auch in TypeScript geschrieben werden. Um TypeScript für React nutzen zu können, gilt es zunächst, den Compiler und andere dafür erforderliche Werkzeuge zu installieren. David Losert erklärt in dieser Folge, wie das funktioniert und worauf es zu achten gilt.

TypeScript in React zu nutzen bedeutet, verschiedene Typen explizit anzugeben. Das betrifft in erster Linie Komponenten, den useState-Hook, Domain-Objekte und Events beziehungsweise Eventhandler. In dieser Folge zeigt David Losert, welche Typen zu dem Zweck zur Verfügung stehen, wie die Typen anzugeben sind und worauf bei der Typisierung zu achten ist.

TypeScript in React zu nutzen bedeutet nicht nur, Komponenten und State zu typisieren, sondern auch, sich um Spezialfälle zu kümmern. Dazu zählen unter anderem Services, asynchrone Funktionen, Hooks wie useEffect und klassenbasierte Komponenten. In dieser Folge zeigt David Losert, wie das alles funktioniert und worauf es dabei zu achten gilt.

ESLint ist ein Werkzeug für die statische Codeanalyse von JavaScript und TypeScript, und kann auch zum Überprüfen von React- und JSX-Code verwendet werden. David Losert zeigt in dieser Folge, wie man ESLint für React und JSX einsetzt, wie man es konfiguriert und worauf es zu achten gilt.

Um in React geschriebene Komponenten zu testen, lässt sich das Test-Framework Mocha verwenden. Allerdings gilt es dabei einige Besonderheiten zu beachten, vor allem wenn die Tests in TypeScript geschrieben werden sollen. Wie das alles funktioniert, zeigt David Losert in dieser Folge des React-Tutorials.