React-Workshop für Einsteiger

In diesem React-Workshop möchte ich einen schnellen und praktischen Einstieg in die Entwicklung mit dem JavaScript-Framework bieten und alle Bestandteile vorstellen, die man benötigt, um eigene Anwendungen mit dem erfolgreichen und weit verbreiteten System zu entwickeln.

Hierfür erstellen wir zusammen eine kleine Web-Applikation, die den Benutzer eine ToDo-Liste verwalten lässt, in der er neue Tasks anlegen sowie bestehende Tasks löschen und umpriorisieren kann. Im Laufe der Umsetzung werden alle wichtigen Grundprinzipien von React Schritt für Schritt vorgestellt und in die Praxis umgesetzt.

Was ist React?

React-Logo

Bei React handelt es sich um ein von Facebook ins Leben gerufenes Web-Framework für die Entwicklung von Single-Page-Webanwendungen. Die einzelnen Bestandteile unserer Anwendung werden unter React konsequent durch die Realisierung unabhängiger und modularer Komponenten konzeptioniert.

Der Benutzer erfährt hierdurch eine sehr responsive und gesamtheitliche User-Experience, die mit Hilfe des Frameworks sehr einfach und gut strukturiert umgesetzt werden kann.

Welche Kenntnisse werden für den React-Workshop vorausgesetzt?

Da es sich um einen React-Workshop für Einsteiger handelt, wird bewusst auf den Einsatz von weiterführenden Technologien wie npm, TypeScript und Webpack, die eine komfortablere und professionellere Entwicklung unserer Beispielanwendung ermöglichen, verzichtet.

Vorrausgesetzt werden lediglich Grundkenntnisse in den Web-Technologien HTML, CSS und JavaScript ES6.

Hinweis

Aus Platzgründen sind einige der Codebeispiele in diesem React-Workshop minimiert, meist werden nur die Änderungen dargestellt – ein Klick auf den grauen Balken unter den Beispielen genügt jedoch, um den vollständigen Code mit den hervorgehobenen Änderungen anzuzeigen.

1. Das Grundgerüst

Das Grundgerüst unserer Anwendung besteht aus einer HTML- und einer CSS-Datei. Zudem wollen wir die React-Bibliothek in unsere HTML-Datei einbinden und eine JavaScript-Datei als Einstiegspunkt für unsere Anwendung festlegen. Funktionalitäten aus dem React-Framework selbst werden in diesem Schritt aber noch nicht eingesetzt.

1.1. Erstellen der HTML-Datei

In einem beliebigen und leeren Ordner unserer Wahl erstellen wir uns eine neue Datei index.html mit dem folgenden Inhalt:

1.2. Erstellen der Stylesheet-Datei

Um unserer Anwendung eine ansprechende Optik zu verleihen, erstellen wir die im Kopf unserer HTML-Datei referenzierte Stylesheet-Datei css/styles.css mit dem Inhalt des folgenden Listings.

1.3. Einbinden der React-Bibliothek

Die zum Verwenden des React-Frameworks erforderlichen Klassen können direkt vom Facebook-Server in unsere Webseite eingebunden werden. Hierfür müssen die folgenden Script-Tags zum Kopf unserer index.html-Datei hinzugefügt werden:

Hinweis

Um auch offline an unserer Webanwendung arbeiten zu können, besteht die Möglichkeit, diese drei Bibliotheksdateien herunterzuladen und lokal zu referenzieren. PHPStorm oder IntelliJ bieten hierfür beispielsweise einen Quick Fix an.

1.4. Erstellen und Einbinden unserer ersten JavaScript-Quelldatei

Unser erstes eigenes Skript legen wir nun unter js/index.jsx an. Es handelt sich bei diesem Dateiformat nicht um eine reguläre JavaScript-Datei sondern um eine von React ins Leben gerufene Erweiterung, der JavaScript Syntax Extension (JSX). Diese Skripte verwenden den Mime-Type text/jsx und erfordern zum Betrieb die im letzten Schritt eingebundene Bibliothek JSXTransformer. Mit Hilfe dieser an XML angelehnten Template-Sprache steht optional eine Syntax für die Deklaration von React-Komponenten zur Verfügung, die es erlaubt, Javascript-Logik, HTML und CSS in eine React-Komponente zu kapseln und modular innerhalb unserer Web-Applikation einzusetzen.

Unsere erste Skript-Datei js/index.jsx dient als Einstiegspunkt in unsere Applikation und hat vorerst die Aufgabe, den Titel unserer Webseite zu setzen und ihn in der Enwticklerkonsole auszugeben:

Damit dieser JavaScript-Code auch ausgeführt wird, müssen wir diese neu erstellte Quelldatei natürlich noch in den Kopf unserer Webseite in der index.html einbinden:

Die index.html-Datei können wir nun in einem Browser unserer Wahl öffnen. Es sollte der Titel der Webseite zu sehen sein. Zudem können wir in den Developer-Tools unseres Browsers diesen Titel als Ausgabe in der Konsole sehen. Im Körper der Seite wird bisher lediglich unser leeres mainContainer-Div angezeigt.

1.5. Troubleshooting

Sofern wir die Datei über das Dateisystem geöffnet haben, kann es in manchen Browsern vorkommen, dass an dieser Stelle Fehler wie der Folgende in der Konsole erscheinen:

Failed to load file:///C:/Users/stock/workspaces/JavaScript/ReactBasics/js/component/App.jsx: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Das ist eine Sicherheitseinstellung des Browsers, sofern Skriptdateien über unterschiedliche Protokolle geladen werden. Das Problem kann umgangen werden, indem ein anderer Browser, beispielsweise Mozilla Firefox, verwendet wird oder indem das Projekt auf einem Webserver abgelegt und darüber geöffnet wird.

Hinweis

Entwicklungsumgebungen wie PHPStorm oder IntelliJ bieten einen integrierten Webserver, auf dem unsere Webseite ausgeführt werden kann. Hierfür muss im Project-Fenster einfach auf die index.html rechtsgeklickt und der Kontextmenüpunkt Open in Browser genutzt werden.

2. React Components

Um eine eigene React–Komponente zu erstellen, muss die Klasse React.Component erweitert und deren nicht-statische Methode render() überschrieben werden. Diese Methode gibt das Stück HTML-Code in Form eines JSX-Objektes zurück, die diese Komponente verwalten soll.

Um eine Komponente in unser DOM einzuhängen, wird die statische Methode ReactDOM.render() benötigt. Zur Verdeutlichung dieser Funktionsweise wollen wir eine einfache React-Komponente erstellen, die vorerst lediglich den Titel unserer Applikation konfektioniert und diese Komponente anschließend in unser DOM einhängen.

Die Komponente App soll in der Datei js/component/App.jsx definiert werden:

Die Schreibweise zur Definition von JSX-Elementen ist etwas gewöhnungsbedürftig, geht aber nach einiger Zeit leicht von der Hand. Auf die Verwendung von Code innerhalb der geschweiften Klammern wird zu einem späteren Zeitpunkt weiter eingegangen.

Da die render()-Methode nur ein einzelnes Tag zurückgeben darf, schachteln wir unsere Elemente einfach in einem umfassenden div. Somit können wir hier im Laufe unseres Workshops noch weitere Bestandteile unserer App hinzufügen.

Damit unsere Webseite mit unserer Komponente arbeiten kann, müssen wir deren JavaScript-Datei noch zum Kopf unserer Webseite index.html hinzufügen:

Im Anschluss können wir unsere erste React-Komponente in unserer Datei js/index.jsx in das DOM einhängen. Das machen wir über das einzige div-Tag unserer HTML-Datei, das wir über die id mainContainer referenzieren können:

Damit React die Namen unserer eigenen Komponenten von denen der Standard-HTML-Tags abgrenzen kann, ist es obligatorisch, dass wir all unsere Komponenten-Klassen mit einem großen Buchstaben beginnen lassen.

Beim Aktualisieren unserer Webseite wird der HTML-Teil unserer App-Komponente in den mainContainer gerendert und somit das h1-Element mit dem statischen Text auf unserer Webseite angezeigt:

3. Properties

Bei Properties handelt es sich um Eigenschaften, die in die Komponente hineingereicht werden und auf die auch ausschließlich die Komponente selbst Zugriff hat. Somit stellen sie eine klar definierte Schnittstelle nach außen dar, über die beliebige Werte, Callbacks, Arrays oder Objekte zur Initialisierung der Komponente angegeben werden können.

Alle Properties werden in Form von Attributen an das Tag unserer Komponente übergeben und stehen der Komponente innerhalb eines Objekts in dem nicht-statischen Feld props der Klasse React.Component als unveränderbare Werte zur Verfügung.

Um die Funktionsweise zu verdeutlichen, wollen wir den Titel unserer Applikation an unsere App-Komponente übergeben und in deren render()-Methode in das h1-Tag einsetzen.

In unserer Datei js/index.jsx können wir dem App-Tag ein neues Attribut mit dem selbstgewählten Namen title übergeben:

Unsere App-Komponente in der js/component/App.jsx kann nun auf diesen Wert über das nicht-statische Feld props lesend zugreifen und somit den übergebenen Titel in unser h1-Tag einsetzen:

Wie in den letzten beiden Änderungen angewandt, kann innerhalb der JSX-Syntax auf dynamische Werte mittels geschweifter Klammern zugegriffen werden. Innerhalb dieser Klammern ist der Einsatz einer Variablen, der Aufruf einer Funktion oder das Schreiben eines Blockkommentars möglich. Zudem bleibet bei dieser Schreibweise der Datentyp bei der Übergabe an die Komponente erhalten. Kontrollstrukturen die über den Einsatz des ternären Operators hinausgehen sowie runde Klammern sind hier allerdings nicht erlaubt.

4. State

Das State-System bietet unserer React-Komponente einen Mechanismus, mit der veränderbare Werte innerhalb der Komponente gespeichert werden können.

Das nicht-statische Feld state der Klasse React.Component beinhaltet ein Objekt, in dem beliebige Status-Variablen definiert werden können. Genau wie beim Feld props kann auf das Feld state ausschließlich von der React-Komponente selbst zugegriffen werden.

Im Gegensatz zu den Properties können die Werte des States allerdings verändert werden. Das funktioniert ausschließlich über den Aufruf der nicht-statischen Funktion setState() und bewirkt, dass die render()-Methode der Komponente erneut aufgerufen und somit der entsprechende HTML-Teil vom React-System aktualisiert wird.

4.1. Stateful Components

Sobald eine Komponente den beschriebenen State-Mechanismus verwendet, spricht man von einer stateful Component – unsere App-Komponente hatte bisher nur als eine stateless Component fungiert.

In diesem Schritt wollen wir unsere App-Komponente in eine stateful Component umwandeln. Hierfür wollen wir alle aktuell in unserer Anwendung vorhandenen Task-Items in einem String-Array festhalten und dieses über das State-System verwalten.

Da wir unser State-Objekt initialisieren wollen und der Konstruktor der einzige Ort ist, an dem wir das nicht-statische Feld state direkt zuweisen können, überschreiben wir den Konstruktor unserer App-Komponente und setzen dort den initialen State. Testweise können wir in unserer Task-Liste ein paar hardgecodete Task-Items definieren.

Der Konstruktor der Klasse React.Component bekommt alle in die Komponente hineingereichten Properties in dem Parameter props übergeben. Somit besteht hier auch die Möglichkeit, übergebene Property-Werte initial an die State-Variable zu übergeben.

Die erforderliche Erweiterung an der js/component/App.jsx sieht folgendermaßen aus:

Damit wir diese Task-Items nun auch angezeigt bekommen, müssen wir die render()-Methode unserer App-Komponente erweitern. Der unmittelbare Einsatz einer for-Schleife innerhalb der geschweiften Klammer ist leider nicht möglich, allerdings speichern wir die JSX-Elemente in einem Array und zeigen es innerhalb der geschweiften Klammern an. Zu einem späteren Zeitpunkt werden wir diese Erstellung in eine separate Funktion auslagern.

Damit React die einzelnen HTML-Elemente performanter im DOM identifizieren und rendern kann, ist es innerhalb einer Komponente erforderlich, gleichen Kindelementen auf der selben Ebene einen eindeutigen key mittels des gleichnamigen Attributs zuzuweisen. Hier noch einmal die App.jsx mit allen Änderungen.

Im Anschluss können wir die statisch erstellten Task-Items auf unserer Webseite sehen:

Die render()-Methode unserer Komponente wird aktuell nur einmalig, nämlich beim initialen Rendern durch das Einbinden der Komponente in das DOM, durchlaufen. Um eine Änderung des States und den somit wiederholten Durchlauf der render()-Methode herbeizuführen, wollen wir im ersten Schritt einen neuen Button direkt in die Komponente einfügen, der beim Anklicken ein neues Task-Item mit dem aktuellen Zeitstempel hinzufügt:

Die Verwendung der JavaScript Arrow-Syntax im onClick-Attribut unseres neu hinzugefügten Buttons ist obligatorisch, da ansonsten die Referenz zu this verloren gehen würde.

Am Ende der nicht-statischen Methode createTask() wird nun der State durch einen Aufruf von setState neu zugewiesen, wodurch die Komponente vom React-System neu gerendert und somit der neu erstellte Task in unserer Task-Liste angezeigt wird.

Wird im State mit Objekten oder Arrays gearbeitet, so muss bei einer Veränderung dieser Elemente immer eine Kopie zugewiesen werden, da das React-System diese andernfalls nicht als eine Veränderung des States interpretiert. Daher erstellen wir vor dem Neuzuweisen eine Kopie unseres Arrays taskList mit Hilfe der Methode Array.slice().

Hinweis

Dies ist eine häufige Fehlerquelle! So mancher Entwickler hat bereits Stunden damit verbracht, herauszufinden, warum eine Komponente vom React-System nicht neu gerendert wird obwohl sich offensichtlich deren State-Werte verändern. Das Problem kann von vornherein ausgeschlossen werden, indem Array und Objekte innerhalb des States bei deren Veränderung nie erneut zugewiesen werden sondern für diese immer eine neue Instanz erzeugt wird.

Beim Einsatz erweiterter Techniken wie Redux ist diese Vorgehensweise zwingend erforderlich. Dafür ermöglicht der konsequente Einsatz dieser Technik die schnelle und problemlose Realisierung von statebezogenen Funktionalitäten wie beispielsweise einer Undo- oder Redo-Funktion.

4.2. Stateless Components

Bei den stateless Components handelt es sich simplerweise um Komponenten, die keinen eigenen State verwalten. Somit haben sie lediglich die Aufgabe, mit den in sie hineingereichten Properties zu arbeiten.

Zur Realisierung einer stateless Component wollen wir die Anzeige unserer Task-Liste in eine separate Komponente TaskList auslagern. Das in der State-Variablen unserer App-Komponente gespeicherte Array können wir an die neue Komponente TaskList dann als Property übergeben.

Zuerst müssen wir für unsere neue Komponente ein neues Skript in unsere index.html einbinden:

Die Realisierung der neuen Komponente TaskList beinhaltet keine neuen Erkenntnisse. Wir wollen hier aber die Erstellung der HTML-Elemente für die Task-Liste in eine separate, nicht-statische Methode auslagern, um die Lesbarkeit unseres Quellcodes zu erhöhen.

Außerdem wrappen wir die Beschreibung unseres Items in ein div-Tag, da wir zu einem späteren Zeitpunkt hier noch weitere Elemente hinzufügen wollen.

Der Quellcode der neuen Datei js/component/TaskList.jsx sieht nun also folgendermaßen aus:

Das Einbinden der neu erstellten stateless Component TaskList erfolgt durch Hinzufügen des gleichnamigen Tags in die render()-Methode unserer App-Komponente. Im Gegenzug kann hier die Erstellung des lokalen Arrays mit den Task-Items entfernt werden, wodurch ebenfalls die Lesbarkeit unserer js/component/App.jsx erhöht wird:

5. Data flow

Eines der wichtigsten Konzepte von React ist der unidirektionale Datenfluss. Die beiden Komponenten App und TaskList sind hierarchisch aufgebaut und der Datenfluß findet immer „Top-Down“ von der Komponente App in Richtung TaskList statt.

React wurde zudem so designed, dass es nicht vorgesehen ist, eine Referenz einer Komponente an eine andere Komponente zu übergeben. Lediglich die Properties können verwendet werden, um Daten an eine, innerhalb des Rendering-Prozesses eingebundene, Komponente zu übergeben.

Zudem sind die Properties und auch der State so ausgelegt, dass sie nur innerhalb der eigenen Komponente verwendet werden können. Um eine Komponente mit einer anderen Property auszustatten, muss sie also von außen neu gerendert werden.

Somit lassen sich durch den Einsatz des React-Frameworks Web-Anwendungen sehr modular und gut gekapselt designen und realisieren.

Oftmals ist es natürlich trotzdem erforderlich, dass die eingebundene Komponente mit der Parent-Komponente kommunizieren muss. In unserem Fall wollen wir im nächsten Schritt hinter den einzelnen Task-Items unserer TaskList-Komponente Buttons anzeigen, mit der jedes Task-Item gelöscht oder umsortiert werden kann. Da diese Task-Items allerdings innerhalb der App-Komponente verwaltet werden, scheint diese Anforderung erstmal schwierig umzusetzen.

Umsetzen lässt sich dieses Problem mittels Callbacks, die als Properties in die Child-Komponente hineingereicht werden. Wir können der Komponente TaskList drei neue Properties übergeben, in denen wir Callbacks der Komponente App übergeben. Zudem definieren wir die drei nicht-statischen Methoden zum Löschen, Aufpriorisieren und Abpriorisieren unserer Task-Items in der App-Komponente, da hier die Task-Items im State verwaltet werden.

Die Erweiterungen an der js/component/App.jsx sehen folgendermaßen aus:

und

Die drei neuen Methoden deleteTask, moveTaskUp und moveTaskDown arbeiten nach dem selben Prinzip wie unsere createTask-Methode und entfernen dementsprechend ein Task-Item aus dem kopierten Array oder ändern dessen Reihenfolge.

Diese Callbacks können wir nun in unserer Komponente TaskList über die Properties ansprechen. Hierfür können wir die folgenden drei Buttons mit dem folgenden Code zu unserer Datei js/component/TaskList.jsx hinzufügen:

Im Anschluss werden die Buttons in unserer Task-Liste angezeigt und wir können sie nutzen, um erstellte Task-Items zu löschen oder umzupriorisieren.

6. Controlled und uncontrolled components

Im Bezug auf Formulare gibt es in React zu beachten, dass das Standardverhalten von Forms generell verändert werden muss, da das Absenden eines Formulars standardmäßig eine neue Webseite öffnet, was natürlich nicht im Sinne einer Single-Page-Applikation ist.

Auch bei der Verwendung von Formularfeldern kann das Standardverhalten des DOMs komplett von der React-Komponente selbst übernommen werden. Daher unterscheidet man in React zwischen controlled und uncontrolled components.

6.1. Uncontrolled components

Dabei handelt es sich um Komponenten, die Formularfelder nutzen, aber diese nicht über eigene State-Variablen kontrollieren. Zur Verdeutlichung dieser Technik wollen wir die dritte und letzte Komponente TaskInput erstellen, die ein Eingabefeld für das Erstellen neuer Task-Items repräsentieren und verwalten soll.

Diese neue Skriptdatei müssen wir zuerst zu unserer index.html hinzufügen:

Die Datei js/component/TaskInput.jsx definiert unsere Komponente, die das Eingabeformular zum Erstellen neuer Tasks verwaltet. Diese Datei besteht aus dem folgenden Code:

In dem Form-Tag unseres Formulars wird über das onSubmit-Attribut der Aufruf der nicht-statischen Methode onFormSubmit zugewiesen, die beim Versenden des Formulars aufgerufen wird. Darin wird mit event.preventDefault() unterbunden, dass der Browser einen neuen URL-Request ausführt.

Das restliche Handling aber wird dem DOM überlassen. Damit der Wert aus dem Eingabefeld ausgelesen und selbiges auch wieder geleert werden kann, ist ein Zugriff auf das Eingabefeld über das DOM erforderlich. Somit stellt diese Komponente eine uncontrolled component dar.

Damit wir diese neue Komponente in unserer Anwendung sehen, müssen wir sie noch in unsere App-Komponente einbauen und den bestehenden Button entfernen. Die Callback-Funktion onTaskCreate zum Erstellen eines neuen Tasks übergeben wir, wie gewohnt, als Property an unsere Komponente TaskInput. Der Code unserer js/component/App.jsx ist dementsprechend folgendermaßen abzuändern:

Wir können nun in unserer Web-Applikation neue Task-Items erstellen, wobei die eingegebene Beschreibung zu unserer Task-Liste hinzugefügt wird. Wird vom Benutzer ein leerer String im Formularfeld abgesendet, so färbt sich das Eingabefeld rot und weist auf diesen Fehler hin. Das Eingabefeld färbt sich erst wieder um, nachdem das Formular erneut mit einer gültigen Eingabe abgesendet wurde.

6.2. Controlled components

Im Gegensatz zu den uncontrolled components wird bei den controlled components die volle Kontrolle über die Bestandteile unserer Formulare übernommen und keine Kontrolle an das DOM abgegeben. Somit können wir zudem erreichen, dass sich unsere Anwendung noch responsiver anfühlt.

Wir wollen unsere TaskInput-Komponente nun in eine controlled component überführen. Hierfür führen wir ein State-Handling in diese Komponente ein und halten hier den aktuellen Inhalt unseres Eingabefeldes fest. Selbiges erweitern wir mit den Attributen value und onChange, sodass jede Änderung am Inhalt dieses Feldes eine sofortige Änderung des States unserer Komponente zur Folge hat.

Die genannten Änderungen äußern sich in unserer js/component/TaskInput.jsx wie folgt:

Die Änderungen haben nun zur Folge, dass sich im Falle einer falschen Eingabe das rot eingefärbte Eingabefelde bei der ersten Eingabe eines Zeichens wieder zurückfärbt und der Benutzer somit eine responsivere User Experience erfährt.

Controlled Components bieten uns somit alle Möglichkeiten, die wir für die Realisierung unserer Benutzerschnittstelle benötigen, da wir die Kontrolle über alle UX-Elemente behalten und alle Elemente über den State unserer Komponente unmittelbar verwalten können.

7. Component lifecycle callbacks

Die Klasse React.Component bietet bestimmte nicht-statische Methoden zum Überschreiben an, die wir bei Bedarf innerhalb unserer React-Komponente definieren können. Hierüber können wir bestimmte Rückmeldungen vom React-System erhalten – beispielsweise wenn eine Komponente unmittelbar vor dem erneuten Rendern steht – sodass wir die Gelegenheit haben, in diesem Vorfeld beliebige eigene Aktionen durchzuführen. Das kann beispielsweise der Aufruf einer Tracking-Methode oder eines asynchronen Ladevorgangs sein.

Zum Testen dieses Mechanismus können wir die folgenden Methoden zu unserer App-Komponente in der js/component/App.jsx hinzufügen:

In der Konsole unserer Entwicklerwerkzeuge können wir nun beobachten, wann diese lifecycle callbacks aufgerufen werden.

React FTW

Das React-Framework bietet sehr gute Möglichkeiten zur Erstellung und Verwaltung von modular aufgebauten und somit gut strukturierten Frontend-Anwendungen. Vor allem in Kombination mit anderen Frameworks entfaltet React seine volle Flexibilität und Stärke.

Der Code dieses Beispielprojekts befindet sich auf GitHub.

Mein Ziel ist es, mit meinem React-Workshop einen schnellen Einstieg in das Framework zu geben – und ich hoffe, dass mir das gut gelungen ist. Wie immer bin ich für Feedback unter christopher.stock@mayflower.de erreichbar und dankbar.

Unser React-Workshop


Für neue Blogupdates anmelden:


3 Gedanken zu “React-Workshop für Einsteiger

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.