React E-Book

Oliver Zeigermann

• Herausgeber: dpunkt
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Deutsch
• Veröffentlichungsjahr: 2016

Seitenzahl: 374

Beschreibung

React ist ein JavaScript-Framework zur Entwicklung von Benutzeroberflächen sowohl im Browser als auch auf Mobilgeräten. Entwickelt und eingesetzt von Facebook ist es mittlerweile als Open-Source-Projekt verfügbar und hat sich bereits im Einsatz bei diversen namhaften Websites, wie z. B. Airbnb und Netflix, bewährt. Dieses Buch stellt Ihnen die Konzepte von React, React Router und Redux anhand eines durchgehenden Beispiels vor. Sie lernen, wie Sie mit React wiederverwendbare UI-Komponenten entwickeln und wie Sie auf Basis der einzelnen Komponenten ganze Anwendungen zusammenbauen. Unter anderem werden folgende Themen behandelt: - Entwickeln und Testen eigener React-Komponenten auf Basis des JavaScript-Standards ECMAScript 2015 (ES6) - Routing mit dem React Router - Das Architektur-Modell Flux und wie damit komplette Anwendungen umgesetzt werden (am Beispiel des Redux-Frameworks) - Serverseitiges Rendern von React-Komponenten und -Anwendungen - Anbindung eines REST-Backends Die im Buch eingesetzten Sprachfeatures aus ES6 werden in einem eigenen Kapitel vorgestellt, sodass zum Verständnis des Buches Kenntnisse von ES5 ausreichen. Nach der Lektüre des Buches werden Sie in der Lage sein, eigene Projekte mit React umzusetzen.

Leseprobe

Oliver Zeigermann ist Entwickler, Architekt, Berater und Coach. Oliver wendet seine Erfahrungen aus dem Java-Umfeld auch auf die Softwareentwicklung und Architektur mit JavaScript an.

Nils Hartmann ist Software-Enwickler und -Architekt aus Hamburg. Nils hat langjährige Erfahrung mit der Entwicklung von großen Java-Anwendungen. Darüber hinaus beschäftigt er sich mit dem server- und clientseitigen Einsatz von JavaScript.

Zu diesem Buch – sowie zu vielen weiteren dpunkt.büchern – können Sie auch das entsprechende E-Book im PDF-Format herunterladen. Werden Sie dazu einfach Mitglied bei dpunkt.plus+:

www.dpunkt.de/plus

React

Die praktische Einführung in React, React Router und Redux

Oliver ZeigermannNils Hartmann

Oliver Zeigermann

[email protected]

Nils Hartmann

[email protected]

Lektorat: René Schönfeldt

Copy-Editing: Petra Kienle

Satz: Nadine Thiele

Herstellung: Susanne Bröckelmann

Umschlaggestaltung: Helmut Kraus, www.exclam.de

Druck und Bindung: M.P. Media-Print Informationstechnologie GmbH, 33100 Paderborn

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-86490-327-4

PDF   978-3-86491-963-3

ePub   978-3-86491-964-0

mobi   978-3-86491-965-7

1. Auflage 2016

Copyright © 2016 dpunkt.verlag GmbH

Wieblinger Weg 17

69123 Heidelberg

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.

Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buches stehen.

5 4 3 2 1 0

Inhaltsverzeichnis

Teil I   Einleitung

1        Einleitung

1.1     Was ist React?

1.2     Warum React?

1.3     Beziehung zu anderen Technologien

1.4     Vergleich mit anderen Webtechnologien

1.5     Die Beispielanwendung

1.6     Wie man dieses Buch benutzt

1.7     Voraussetzungen für dieses Buch

1.8     Website zum Buch

1.9     Danksagungen

2        Schnelldurchgang – React im Überblick

2.1     JSX

2.2     Komponenten

2.3     Ein Grüßaugust: Unsere erste React-Komponente

2.4     Exkurs: Vergleich mit Angular

2.5     Zusammenfassung

3        Die Beispielanwendung: »Vote as a Service«

3.1     Das Beispiel installieren und ausführen

3.2     Die Beispielanwendung

3.3     Fachliches Modell und REST-API

3.4     Die Anwendung schrittweise entwickeln

3.5     Der Server

3.6     Hintergrund: Der Beispielserver

3.7     Der VoteApp-Server

3.8     Zusammenfassung

4        Die JavaScript-Erweiterung JSX

4.1     Grundlagen

4.2     JavaScript-Ausdrücke in JSX

4.3     Kommentare in JSX

4.4     Fallunterscheidungen

4.5     Listen

4.6     Style-Angaben in JSX

4.7     Komponenten

4.8     Rendern von Elementen

4.9     Zusammenfassung

Teil II   React

5        Eine React-Komponente

5.1     Hands-on: Eine Komponente

5.2     React-Komponenten als Funktionen und Klassen

5.3     Konfiguration einer Komponente: Properties

5.4     Zustand einer Komponente: State

5.5     Properties, State und Instanz-Variablen

5.6     Lebenszyklus einer React-Komponente

5.7     Auf native DOM-Elemente zugreifen: refs

5.8     Zusammenfassung

6        Arbeiten mit mehreren Komponenten

6.1     Hands-on: Hierarchien von Komponenten

6.2     Komponenten einbinden

6.3     Arbeiten mit Children

6.4     Listen

6.5     Zusammenfassung

7        Interaktive Komponenten

7.1     Hands-on: An Umfragen teilnehmen

7.2     Hintergrund: Datenfluss in React-Anwendungen

7.3     Ereignisse/Event Handler

7.4     Kommunikation zwischen Komponenten

7.5     Zusammenfassung

8        Formulare mit React

8.1     Hands-on: Ein Editor für Umfragen

8.2     Hintergrund: Databinding

8.3     Controlled Components

8.4     Uncontrolled Components

8.5     Zusammenfassung

Teil III   Eine React-Anwendung

9        Serveraufrufe

9.1     Hands-on: Serveranbindung

9.2     Serverzugriffe in React

9.3     Serverzugriffe mit fetch

9.4     Zusammenfassung

10      Der React Router

10.1   Hands-on: Der React Router im Schnelldurchgang

10.2   Anpassungen an der Vote-Anwendung

10.3   Links und Routen

10.4   Navigation über die History

10.5   Hooks und Login

10.6   Wildcards und optionale Segmente

10.7   Zusammenfassung

11      Serverseitiges Rendering und Universal Web Applications

11.1   Hands-on: Eine Universal Webapp mit React

11.2   Gründe für serverseitiges Rendern

11.3   Universal Rendering im Überblick

11.4   Anpassung in der Vote-Anwendung

11.5   Serverseitiges Rendering mit dem React Router

11.6   Initialen Zustand zur Verfügung stellen

11.7   Zusammenfassung

12      Flux-Architektur am Beispiel von Redux

12.1   Einführung

12.2   Hands-on: Eine Redux-Anwendung

12.3   Redux und Vanilla Flux

12.4   Redux in unserer Beispielanwendung

12.5   Integration von Redux und React Router

12.6   Redux-Thunk für flexibles Pre-Rendering

12.7   Ausblick auf GraphQL, Relay und Falcor

12.8   Zusammenfassung

13      React-Komponenten testen

13.1   Hands-on: Unit-Tests, die außerhalb des Browsers laufen

13.2   Überblick: React-Anwendungen testen

13.3   React-spezifische Testwerkzeuge

13.4   Testen im Browser

13.5   Zusammenfassung

         Anhang

A        Tutorial: ein Build-Prozess für React-Anwendungen

A.1     Ausgangssituation

A.2     Ein Produktionsbuild mit Webpack

A.3     Build-Prozess für die Entwicklung

A.4     Linting von JSX-Code

A.5     Unterschiedliche Konfigurationen für Entwicklung und Produktion

B        Einführung in ES 2015

B.1     Einleitung

B.2     Block-Scope

B.3     Template Strings

B.4     Destructuring

B.5     Klassen

B.6     Vererbung

B.7     Statische Elemente

B.8     Erweiterte Objekt-Literale

B.9     Module, Exporte und Importe

B.10   Arrow Functions

B.11   Default- und Rest-Parameter

B.12   Spread-Operator für Arrays

B.13   Object.assign (ES6) und Spread-Operator bei Objekten (ES8)

B.14   Promises

Index

Teil I

Einleitung

1 Einleitung

1.1 Was ist React?

React1 ist eine von Facebook entwickelte JavaScript-Bibliothek, mit der du Benutzeroberflächen für das Web entwickeln kannst. Facebook stellte das Framework 2013 als Open-Source-Lösung zur Verfügung und verwendet das Framework auch selbst als Basis für eine ganze Reihe von seinen Webseiten. Zum Beispiel ist Instagram komplett auf Basis von React entwickelt. Auch auf anderen großen Webseiten, wie zum Beispiel Netflix, Airbnb oder Wall Street Journal, ist React im Einsatz.

Den Kern von React bilden Komponenten und ihre Komposition zu einer Anwendung. Durch eine solche Komposition wird bestimmt, was dargestellt werden soll. Oder aus einer anderen Perspektive: wie man den Zustand einer Anwendung in ihre Darstellung transformiert.

Dabei ist der Kern von React erst einmal losgelöst vom Web: React kann in unterschiedlichen Szenarien funktionieren, auch in nativen Anwendungen. Allerdings ist neben dem reinen Konzept ebenso die Programmiersprache JavaScript festes Element. React ist in JavaScript geschrieben und auch deine Programme müssen entweder in JavaScript geschrieben oder nach JavaScript übersetzt werden.

In diesem Buch werden wir uns aber auf die Webentwicklung beschränken und daher auch davon ausgehen, dass du eine Webanwendung mit React bauen willst. Eine solche Anwendung wird früher oder später im DOM des Browsers – der Objektrepräsentation der dargestellten Elemente – gerendert werden. Dazu gibt es zwei Möglichkeiten. Entweder renderst du deine Anwendung auf dem Server – das erfordert natürlich eine JavaScript-Engine auf der Serverseite – oder du tust dies im Browser. React unterstützt beides, sogar beide Möglichkeiten zusammen: Du renderst die Anwendung auf dem Server, überträgst das fertige HTML an den Browser und der bringt das HTML in den DOM. Von da an werden alle Updates im Browser gerendert. Das ist sehr praktisch zum Beispiel für eine schnelle erste Anzeige der Anwendung.

React 15

Mit dem React Release 15 (Stand Drucklegung April 2016) wechselt React auf ein neues Versionierungsschema. Während die vorherigen Versionen 0.13 und 0.14 hießen, passt Facebook sich in React 15 bestehenden Realitäten an: Sprünge von 0.13 auf 0.14 waren tatsächlich eher Major-Releases und trotz Major-Nummer 0 ist React seit 2013 stabil und produktiv nutzbara.

Als vielleicht wichtigstes neues Feature von React 15b werden nun alle SVG-Tags und -Attribute unterstützt. Die data-reactid Attribute verschwinden ebenso wie span-Elemente um als Expression expandierte Textblöcke. Als Nebenprodukt wird React 15 dabei um ca. 10% schneller als 0.14. Dazu gibt es ein paar Bugfixes, weitere Warnungen und einige neue Deprecations. Die Trennung von React auf ReactDOM ist mit React 15 abgeschlossen und Funktionen, die dazu in 0.14 deprecated wurden, sind nun ganz verschwunden.

a. http://facebook.github.io/react/blog/2016/02/19/new-versioning-scheme.html

b. http://facebook.github.io/react/blog/2016/03/07/react-v15-rc1.html

Komponenten

Keine Templates

Das zentrale Konzept bei React ist eine Komponente. Eine React-Komponente enthält alles Notwendige, um sich darzustellen. Dabei trennt React nicht zwischen dem Template und der Darstellungslogik, beides ist in der Komponente. Genauer gesagt: Es gibt kein Template, es gibt nur eine einfache Funktion, die für die Darstellung zuständig ist. Dies hier könnte die einfachste mögliche React-Komponente als reine Funktion sein:

Komponente als Funktion

function HelloMessage() {  return React.createElement    ('h1', null, 'Hello, World');}

Komponente als ES6-Klasse

Alternativ dazu kann eine Komponente auch als ES6-Klasse geschrieben werden. Zu den Unterschieden kommen wir im Laufe des Buchs. An dieser Stelle zeigen wir nur das Pendant unserer Komponente als ES6-Klasse2. Wichtig dabei ist, dass die Methode, die die Darstellung zurückliefert, render heißt:

class HelloMessage extends React.Component {   Render() {    return React.createElement      ('h1', null, 'Hello, World');  }}

Damit definieren wir die Komponente HelloMessage, die bei ihrem Aufruf ein h1-Element mit dem Inhalt Hello World rendert. Dafür benutzen wir , das ein HTML-Element erzeugt. Der Tag-Name des Elements lautet gemäß des ersten Parameters . Wir haben keine weiteren Properties für und drücken das mit dem zweiten Parameter aus. Alle weiteren Parameter sind die Kinder-Elemente, in diesem Fall also einfach nur ein Text.