Durchstarten mit React

Web-Apps einfach und modular entwickeln

Stoyan Stefanov

Stoyan Stefanov

Lektorat: Ariane Hesse

Korrektorat: Sibylle Feldmann

Herstellung: Susanne Bröckelmann

Umschlaggestaltung: Michael Oréal, www.oreal.de

Satz: III-satz, www.drei-satz.de

Druck und Bindung: Media-Print Informationstechnologie, mediaprint-druckerei.de

Bibliografische Information der Deutschen Nationalbibliothek
Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

ISBN

Print:978-3-96009-042-7

PDF:978-3-96010-090-4

ePub:978-3-96010-091-1

mobi:978-3-96010-092-8

Dieses Buch erscheint in Kooperation mit O’Reilly Media, Inc. unter dem Imprint »O’REILLY«. O’REILLY ist ein Markenzeichen und eine eingetragene Marke von O’Reilly Media, Inc. und wird mit Einwilligung des Eigentümers verwendet.

1. Auflage 2017

Copyright © 2017 dpunkt.verlag GmbH

Wieblinger Weg 17

69123 Heidelberg

Authorized German translation of the English edition React: Up & Running, ISBN 9781491931820 © 2016 Stoyan Stefanov. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same.

Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen.

Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen.

Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen.

5 4 3 2 1 0

Für Eva, Zlatina und Nathalie

Inhalt

Vorwort

1Hallo Welt

Einrichten

Hallo React-Welt

Was ist da gerade passiert?

React.DOM.*

Besondere DOM-Attribute

Browsererweiterung React DevTools

Als Nächstes: eigene Komponenten

2Das Leben einer Komponente

Minimalversion

Eigenschaften

propTypes

Standardeigenschaftswerte

Status

Eine zustandsbehaftete Textarea-Komponente

Ein Hinweis zu DOM-Events

Event-Handling in den alten Tagen

Event-Handling in React

Props versus State

Props im initialen Status: ein Anti-Pattern

Von außen auf die Komponente zugreifen

Eigenschaften später ändern

Lifecycle-Methoden

Lifecycle-Beispiel: Alles loggen

Lifecycle-Beispiel: Ein Mixin verwenden

Lifecycle-Beispiel: Der Einsatz einer Kind-Komponente

Performanceverbesserung: Aktualisieren von Komponenten verhindern

PureRenderMixin

3Excel: Eine schicke Tabellen-Komponente

Zuerst die Daten

Schleife über den Tabellenkopf

Die Warnung an der Konsole debuggen

<td>-Inhalte hinzufügen

Wie können Sie die Komponente verbessern?

Sortieren

Wie können Sie die Komponente verbessern?

Sortierhinweise im UI

Daten bearbeiten

Bearbeitbares Feld

Eingabefeld

Sichern

Zusammenfassung und virtuelle DOM-Diffs

Suchen

Status und UI

Inhalte filtern

Wie können Sie die Suche verbessern?

Instant Replay

Wie können Sie die Wiedergabe verbessern?

Eine alternative Implementierung?

Die Tabellendaten herunterladen

4JSX

Hallo JSX

JSX transpilieren

Babel

Clientseite

Die JSX-Transformation

JavaScript in JSX

Whitespace in JSX

Kommentare in JSX

HTML-Entitäten

Anti-XSS

Spread-Attribute

Spread-Attribute vom Eltern-Element

Mehrere Knoten in JSX zurückgeben

Unterschiede zwischen JSX und HTML

Kein class und for

style ist ein Objekt

Schließende Tags

Attribute im camelCase

JSX und Formulare

onChange-Handler

value versus defaultValue

Value in <textarea>

Value in <select>

Die Excel-Komponente in JSX

5Die Umgebung für die Anwendungsentwicklung einrichten

Eine Anwendungsvorlage

Dateien und Ordner

index.html

CSS

JavaScript

JavaScript: modernisiert

Voraussetzungen einrichten

Node.js

Browserify

Babel

React usw

Auf zum Bauen

JavaScript transpilieren

JavaScript verpacken

CSS verpacken

Ergebnisse!

Windows-Version

Während der Entwicklung bauen

Deployment

Nächste Schritte

6Eine Anwendung bauen

Whinepad v.0.0.1

Einrichten

Erster Code

Die Komponenten

Setup

Entdecken

<Button>-Komponente

Button.css

Button.js

Formulare

<Suggest>

<Rating>-Komponente

Eine <FormInput>-»Fabrik«

<Form>

<Actions>

Dialoge

Anwendungskonfiguration

<Excel>: neu und verbessert

<Whinepad>

Alles zusammen

7Lint, Flow, Test, Repeat

package.json

Babel konfigurieren

scripts

ESLint

Einrichtung

Ausführen

Alle Regeln

Flow

Einrichten

Ausführen

Für die Typprüfung registrieren

<Button> korrigieren

app.js

Mehr zur Typprüfung von props und state

Typen exportieren und importieren

Typecasting

Invarianten

Testen

Einrichten

Erster Test

Erster React-Test

Die <Button>-Komponente testen

<Actions> testen

Mehr simulierte Interaktionen

Vollständige Interaktionen testen

Abdeckung

8Flux

Die Idee

Ein anderer Blick auf Whinepad

Der Store

Store-Events

Den Store in <Whinepad> verwenden

Den Store in <Excel> verwenden

Den Store in <Form> verwenden

Die Grenze definieren

Actions

CRUD-Actions

Suchen und sortieren

Die Actions in <Whinepad> einsetzen

Die Actions in <Excel> verwenden

Zusammenfassung

Immutable

Immutable Store Data

Daten ändern in immutablen Strukturen

Index

Vorwort

Ein weiterer wunderschöner, warmer Abend in Kalifornien. Durch die leichte Meeresbrise fühlt man sich rundum wohl. – »Aaaah!« Der Ort: Los Angeles; die Zeit: Zweitausendirgendwas. Ich war gerade dabei, meine kleine neue Web-App namens CSSsprites.com per FTP auf meinen Server zu laden und der Welt zu zeigen. Dabei dachte ich über ein Problem nach, mit dem ich mich die letzten paar Abende herumgeschlagen hatte: Warum zum Henker braucht man 20 % der Arbeit, um die Kernelemente der App zu erstellen, und verbringt dann die restlichen 80 % damit, sich mit der Benutzeroberfläche herumzuschlagen? Wie viel mehr Tools hätte ich schreiben können, wenn ich nicht die ganze Zeit getElementById() verwenden und mir Gedanken um den Status der App machen müsste? (Ist der Anwender mit dem Hochladen fertig? Was, ein Fehler? Ist das Dialogfenster immer noch offen?) Warum ist die UI-Entwicklung so zeitaufwendig? Und was soll das mit den ganzen verschiedenen Browsern? Nach und nach verwandelte sich das »Aaaah!« in ein »Aaargh!«.

Sprung auf die F8-Konferenz von Facebook im März 2015. Das Team, zu dem ich gehöre, wird zwei Web-Apps ankündigen, die komplett neu geschrieben wurden: unser Kommentartool für fremde Seiten und ein Moderationstool, um die Kommentare zu verwalten. Verglichen mit meiner kleinen CSSsprites.com-App, handelt es sich bei den beiden Anwendungen um richtig große Web-Apps mit weitaus mehr Features, mehr Möglichkeiten und einer unglaublich hohen Traffic-Last. Aber die Entwicklung war ein Klacks. Kollegen, die neu zur App-Entwicklung hinzustießen (und die zum Teil noch nicht einmal Erfahrung mit JavaScript und CSS hatten), waren schnell und problemlos dazu in der Lage, hier ein Feature hinzuzufügen oder dort etwas zu verbessern. Wie ein Teammitglied sagte: »Aha, jetzt verstehe ich, wovon hier alle so begeistert sind!«

Was ist dazwischen passiert? React.

React ist eine Bibliothek, mit der UIs gebaut werden können – es hilft Ihnen dabei, das UI ein für alle Mal zu definieren. Wenn sich dann der Status der Anwendung ändert, reagiert das UI auf diese Änderungen, und Sie müssen sich keine Gedanken mehr darüber machen. Denn schließlich haben Sie das UI schon definiert. Definiert? Eher deklariert. Sie verwenden kleine, handhabbare Komponenten, um eine große und mächtige App zu bauen. In Ihren Funktionen brauchen Sie nicht mehr die Hälfte der Codezeilen, um DOM-Knoten aufzustöbern – stattdessen kümmern Sie sich nur um den state der Anwendung (mit einem guten alten JavaScript-Objekt), während der Rest von allein geschieht.

Durch das Erlernen von React haben Sie gleich eine Reihe von Vorteilen – Sie machen sich mit einer Bibliothek vertraut und können diese dann für folgende Bereiche einsetzen:

• Webanwendungen
• native iOS- und Android-Apps
• Canvas-Anwendungen
• TV-Apps
• native Desktopanwendungen

Sie können native Anwendungen mit nativer Performance und nativen Steuerelementen erstellen (wirklich nativen Steuerelementen – nicht Kopien davon, die nur so aussehen) und dabei die gleichen Konzepte für das Erstellen von Komponenten und UIs einsetzen. Es geht nicht um »write once, run everywhere« (bei dem unsere Branche immer noch strauchelt), sondern um »learn once, use everywhere«.

Lange Rede, kurzer Sinn: Erlernen Sie React, und Sie erhalten 80 % Ihrer Zeit zurück, um sich auf die wirklich wichtigen Dinge zu konzentrieren (wie zum Beispiel den Grund, warum Sie die App schreiben).

Über dieses Buch

Dieses Buch konzentriert sich darauf, React aus Sicht der Webentwicklung zu erlernen. In den ersten drei Kapiteln beginnen Sie mit einer leeren HTML-Datei, die Sie nach und nach mit Leben füllen. So können Sie sich auf das Erlernen von React fokussieren und müssen sich nicht gleich mit der neuen Syntax oder zusätzlichen Tools herumschlagen.

In Kapitel 4 wird JSX vorgestellt, bei dem es sich um eine zusätzliche, optionale Technik handelt, die aber meist zusammen mit React zum Einsatz kommt.

Anschließend geht es darum, was Sie zum Entwickeln einer echten Anwendung brauchen und welche Werkzeuge Ihnen dabei helfen können. So werden zum Beispiel Tools zum Packen von JavaScript-Code vorgestellt (Browserify), für das Unit Testing (Jest), Linting (ESLint), die Typisierung (Flow), das Organisieren des Datenflusses innerhalb der Anwendung (Flux) und für immutable Daten (Immutable.js). Bei all diesen Themen werden die Zusatztools aber immer nur kurz präsentiert, denn der Fokus soll weiterhin auf React liegen. Sie werden sich mit diesen Tools vertraut machen und dann selbst entscheiden können, welche Sie einsetzen wollen.

Viel Glück auf Ihrer Reise – sei sie angenehm und ergiebig!

Welchen Konventionen dieses Buch folgt

Die folgenden typografischen Konventionen werden in diesem Buch genutzt:

Kursiv

Für neue Begriffe, URLs, E-Mail-Adressen, Dateinamen und Dateierweiterungen.

Nichtproportionalschrift

Für Programmlistings, aber auch für Codefragmente in Absätzen, wie zum Beispiel Variablen- oder Funktionsnamen, Datenbanken, Datentypen, Umgebungsvariablen, Anweisungen und Schlüsselwörter.

Fette Nichtproportionalschrift

Für Befehle und anderen Text, der genau so vom Benutzer eingegeben werden sollte.

Kursive Nichtproportionalschrift

Für Text, der vom Benutzer durch eigene Werte ersetzt werden sollte.

Der Einsatz von Codebeispielen

Zusätzliches Material (Codebeispiele, Übungen usw.) finden Sie (auf Englisch) zum Herunterladen auf https://github.com/stoyan/reactbook.

Dieses Buch ist dazu gedacht, Ihnen bei der Erledigung Ihrer Arbeit zu helfen. Im Allgemeinen dürfen Sie den Code in diesem Buch in Ihren eigenen Programmen oder Dokumentationen verwenden. Solange Sie den Code nicht in großem Umfang reproduzieren, brauchen Sie uns nicht um Erlaubnis zu bitten. Zum Beispiel benötigen Sie nicht unsere Erlaubnis, wenn Sie ein Programm unter Zuhilfenahme einiger Codestücke aus diesem Buch schreiben. Wollen Sie allerdings einen Datenträger mit Beispielen aus O’Reilly-Büchern verkaufen oder vertreiben, müssen Sie eine Genehmigung von uns einholen. Eine Frage mit einem Zitat oder einem Codebeispiel aus dem Buch zu beantworten, erfordert keine Genehmigung. Signifikante Teile des Beispielcodes aus diesem Buch für die eigene Produktdokumentation zu verwerten, ist dagegen genehmigungspflichtig. Wir freuen uns über eine Quellenangabe, verlangen sie aber nicht unbedingt. Zu einer Quellenangabe gehören normalerweise Autor, Titel, Verlagsangabe, Veröffentlichungsjahr und ISBN, hier also: »Stoyan Stefanov, Durchstarten mit React, O’Reilly Verlag 2017, ISBN 978-3-96009-042-7«.

Sollten Sie das Gefühl haben, Ihre Verwendung der Codebeispiele könnte gegen das Fairnessprinzip oder die Genehmigungspflicht verstoßen, nehmen Sie bitte unter kommentar@oreilly.de Kontakt mit uns auf.

Danksagungen

Ich möchte mich bei allen bedanken, die die verschiedenen Entwurfszustände dieses Buchs gelesen und Rückmeldung sowie Verbesserungsvorschläge liefert haben: Andreea Manole, Iliyan Peychev, Kostadin Ilov, Mark Duppenthaler, Stephan Alber, Asen Bozhilov.

Vielen Dank an die Leute bei Facebook, die an (oder mit) React arbeiten und meine Fragen unermüdlich beantworten. Mein Dank geht auch an die große React-Community, die tolle Tools, Bibliotheken, Artikel und Einsatzmuster liefert.

Danke ebenfalls an Jordan Walke.

Vielen Dank an alle bei O’Reilly, die dazu beigetragen haben, dass dieses Buch entstehen konnte: Meg Foley, Kim Cofer, Nicole Shelby und viele weitere.

Ein großes Dankeschön geht an Yavor Vatchkov, der das UI für die Beispielanwendung entworfen hat, die in diesem Buch aufgebaut wird (probieren Sie sie unter whinepad.com aus).

KAPITEL 1

Hallo Welt

Beginnen wir unsere Reise durch die Anwendungsentwicklung mit React. In diesem Kapitel werden Sie erfahren, wie Sie React einrichten, und dafür werden Sie Ihre erste »Hallo Welt«-Anwendung schreiben.

Einrichten

Zunächst brauchen Sie die React-Bibliothek. Zum Glück stellt sich das als ganz einfach heraus.

Rufen Sie http://reactjs.com auf (was auf die offizielle GitHub-Seite https://face-book.github.io/react/ weiterleiten sollte), klicken Sie auf den Download-Button und dann auf Download Starter Kit, um eine ZIP-Datei herunterzuladen. Packen Sie die Datei aus und kopieren Sie das Verzeichnis darin an einen Ort, an dem Sie es wiederfinden können, zum Beispiel:

mkdir ~/reactbook

mv ~/Downloads/react-15.3.1/ ~/reactbook/react

Jetzt sollte Ihr Arbeitsverzeichnis (reactbook) wie in Abbildung 1-1 gezeigt aussehen.

Abbildung 1-1: Der Inhalt Ihres React-Verzeichnisses

Sie brauchen jetzt zunächst nur die Datei ~/reactbook/react/build/react.js. Über die anderen Dateien werden Sie im weiteren Verlauf mehr erfahren.

Beachten Sie, dass React keine bestimmte Verzeichnisstruktur erwartet – Sie können das Verzeichnis verschieben oder sogar react.js selbst umbenennen, wenn Ihnen das besser passt.

Hallo React-Welt

Beginnen wir mit einer einfachen Seite in Ihrem Arbeitsverzeichnis (~/reactbook/01.01.hello.html):

<!DOCTYPE html>

<html>

<head>

<title>Hallo React</title>

<meta charset="utf-8">

</head>

<body>

<div id="app">

<!-- hier wird meine App gerendert -->

</div>

<script src="react/build/react.js"></script>

<script src="react/build/react-dom.js"></script>

<script>

// der Code meiner App

</script>

</body>

</html>

In dieser Datei geschehen eigentlich nur zwei erwähnenswerte Dinge:

• Sie binden die React-Bibliothek und deren DOM-Add-on ein (per <script src>-Tags).
• Sie definieren, wo Ihre Anwendung auf der Seite unterkommen soll (<div id="app">).

Lassen Sie uns nun den Code für das »Hallo« hinzufügen. Passen Sie 01.01.hello.html an und ersetzen Sie // der Code meiner App durch:

ReactDOM.render(

React.DOM.h1(null, "Hallo Welt!"),

document.getElementById("app")

);

Laden Sie 01.01.hello.html in Ihren Browser, wird Ihre neue Anwendung ausgeführt (Abbildung 1-2).

Abbildung 1-2: Hallo Welt in Aktion

Herzlichen Glückwunsch, Sie haben gerade Ihre erste React-Anwendung gebaut!

In Abbildung 1-2 sehen Sie in den Chrome Developer Tools auch den durch Ihre React-App generierten Code, der den Inhalt des Platzhalters <div id="app"> ersetzt.

Was ist da gerade passiert?

In dem Code für Ihre erste App gibt es ein paar interessante Stellen.

Schauen Sie sich zuerst den Einsatz des React-Objekts an. Alle für Sie verfügbaren APIs erreichen Sie über dieses Objekt. Die API ist absichtlich minimal gehalten, sodass Sie sich nicht so viele Methodennamen merken müssen.

Es gibt hier auch ein Objekt ReactDOM. Dieses besitzt nur ein paar Methoden, von denen render() die nützlichste ist. Die Methoden dieses Objekts waren zuvor Teil des React-Objekts, sind aber seit Version 0.14 davon getrennt, um zu verdeutlichen, dass das eigentliche Rendern der Anwendung ein eigenständiges Thema ist. Sie können eine React-App erstellen, die in unterschiedlichen Umgebungen gerendert wird – zum Beispiel in HTML (dem Browser-DOM), Canvas oder nativ in Android oder iOS.

Als Nächstes wollen wir auf das Konzept der Komponenten eingehen. Sie bauen Ihr UI mithilfe von Komponenten auf, die Sie nach Wunsch kombinieren. In Ihren Anwendungen werden Sie Ihre eigenen Komponenten erstellen, aber für einen einfachen Start bietet React Wrapper um die HTML-DOM-Elemente an. Diese Wrapper erreichen Sie über das Objekt React.DOM. Im ersten Beispiel wird dabei die h1-Komponente verwendet. Diese entspricht dem HTML-Element <h1>, und Sie nutzen sie über einen Aufruf von React.DOM.h1().

Schließlich gibt es noch den guten alten DOM-Zugriff per document.getElement ById("app"). Damit teilen Sie React mit, wo die Anwendung auf der Seite untergebracht werden sollte – die Brücke zwischen der altbekannten DOM-Bearbeitung und dem gelobten neuen React-Land.

Nachdem Sie jetzt wissen, was jede einzelne Zeile tut, schauen wir uns das große Ganze an. Was ist hier passiert? Sie haben eine React-Komponente in einem DOM-Element Ihrer Wahl gerendert. Sie rendern immer eine Komponente auf oberster Ebene, die wiederum so viele Kind-Komponenten (und Enkel-Komponenten usw.) haben kann, wie Sie brauchen. Tatsächlich besitzt selbst in diesem einfachen Beispiel die h1-Komponente ein Kind – den Text »Hallo Welt!«

React.DOM.*

Wie Sie jetzt wissen, können Sie eine ganze Reihe von HTML-Elementen über das Objekt React.DOM als React-Komponenten einsetzen (in Abbildung 1-3 sehen Sie, wie Sie eine vollständige Liste über die Konsole Ihres Browsers erhalten). Schauen wir uns diese API genauer an.

Abbildung 1-3: Liste der Eigenschaften von React.DOM

Schauen wir uns die Parameter an, die alle Methoden von React.DOM.* übernehmen. Werfen Sie dazu noch mal einen Blick auf die »Hallo Welt!«-Anwendung:

ReactDOM.render(

React.DOM.h1(null, "Hallo Welt!"),

document.getElementById("app")

);

Beim ersten Parameter von h1() (der in diesem Fall null ist) handelt es sich um ein Objekt, in dem Eigenschaften (stellen Sie sich DOM-Attribute vor) an Ihre Komponente übergeben werden. So ist zum Beispiel Folgendes möglich:

React.DOM.h1(

{

id: "my-heading"

},

"Hallo Welt!"

),

Den von diesem Beispiel generierten HTML-Code sehen Sie in Abbildung 1-4.

Abbildung 1-4: Durch einen Aufruf von React.DOM erzeugter HTML-Code

Der zweite Parameter (in diesem Beispiel "Hallo Welt!") definiert ein Kind der Komponente, im einfachsten Fall ein Text-Kind (in DOM-Sprache ein Text-Knoten), wie im vorigen Beispiel zu sehen. Aber Sie können so viele verschachtelte Kind-Komponenten nutzen, wie Sie möchten, und diese als zusätzliche Funktionsparameter übergeben, zum Beispiel:

React.DOM.h1(

{id: "my-heading"},

React.DOM.span(null, "Hallo"),

" Welt!"

),

Ein weiteres Beispiel, dieses Mal mit verschachtelten Komponenten (das Ergebnis sehen Sie in Abbildung 1-5):

React.DOM.h1(

{id: "my-heading"},

React.DOM.span(null,

React.DOM.em(null, "Hall"),

"o"

),

" Welt!"

),

Abbildung 1-5: HTML-Code, der durch verschachtelte React.DOM-Aufrufe erstellt wurde

ReactDOM.render(

<h1 id="my-heading">

<span><em>Hall</em>o</span> Welt!

</h1>,

document.getElementById("app")

);

Besondere DOM-Attribute

Es gibt ein paar besondere DOM-Attribute, die Sie beachten sollten: class, for und style.

class und for können Sie nicht verwenden, weil es sich dabei in JavaScript um reservierte Wörter handelt. Stattdessen müssen Sie className und htmlFor einsetzen:

// falsches Beispiel

// dieser Code funktioniert nicht

React.DOM.h1(

{

class: "pretty",

for: "me",

},

"Hallo Welt!"

);

// richtiges Beispiel

// dieser Code funktioniert

React.DOM.h1(

{

className: "pretty",

htmlFor: "me",

},

"Hallo Welt!"

);

Beim style-Attribut können Sie nicht einfach, wie bei normalem HTML, einen String verwenden, Sie müssen ein JavaScript-Objekt einsetzen. Es ist immer eine gute Idee, Strings zu vermeiden, um das Risiko von Cross-Site-Scripting-(XSS-) Angriffen zu verringern, daher ist das hier eine willkommene Änderung.

// falsches Beispiel

// dieser Code funktioniert nicht

React.DOM.h1(

{

style: "background: black; color: white; font-family: Arial",

},

"Hallo Welt!"

);

// richtiges Beispiel

// dieser Code funktioniert

React.DOM.h1(

{

style: {

background: "black",

color: "white",

fontFamily: "Arial",

}

},

"Hallo Welt!"

);

Beachten Sie, dass Sie bei CSS-Attributen die JavaScript-API-Namen verwenden müssen, also zum Beispiel fontFamily statt font-family.

Browsererweiterung React DevTools

Haben Sie Ihre Browserkonsole geöffnet, während Sie mit den Beispielen in diesem Kapitel spielen, sind Sie eventuell über folgende Nachricht gestolpert: »Download the React DevTools for a better development experience: https://fb.me/react-devtools.« Rufen Sie die URL auf, finden Sie Links zum Installieren einer Browsererweiterung, die beim Debuggen von React-Anwendungen sehr nützlich sein kann (Abbildung 1-6).

Abbildung 1-6: Erweiterung von Chrome durch die React DevTools

Auf den ersten Blick mag diese Erweiterung verwirrend sein, aber wenn Sie sich bis Kapitel 4 vorgearbeitet haben, werden sie Sie ausgesprochen sinnvoll finden.

Als Nächstes: eigene Komponenten

Sie sind jetzt mit der einfachen »Hallo Welt!«-Anwendung fertig und wissen nun:

• wie Sie die React-Bibliothek installieren, einrichten und verwenden (es sind wirklich nur zwei <script>-Tags),
• wie Sie eine React-Komponente an einer beliebigen DOM-Position rendern (zum Beispiel React.DOM.render(reactWhat, domWhere)) und
• wie Sie vorgefertigte Komponenten als Wrapper normaler DOM-Elemente einsetzen (zum Beispiel React.DOM.div(attributes, children)).

Die Möglichkeiten von React können Sie aber nur richtig ausspielen, wenn Sie eigene Komponenten nutzen, um das UI Ihrer App zu bauen (und aktuell zu halten!). Schauen wir uns das im nächsten Kapitel an.