Hugendubel.info - Die B2B Online-Buchhandlung 

Merkliste
Die Merkliste ist leer.
Bitte warten - die Druckansicht der Seite wird vorbereitet.
Der Druckdialog öffnet sich, sobald die Seite vollständig geladen wurde.
Sollte die Druckvorschau unvollständig sein, bitte schliessen und "Erneut drucken" wählen.
E-BookEPUBePub WasserzeichenE-Book
402 Seiten
Deutsch
dpunkt.verlagerschienen am10.12.2019überarbeitete und erweiterte Auflage
Das bewährte und umfassende Praxisbuch zu React - jetzt komplett aktualisiert und erweitert! - Vom Einstieg bis zur professionellen React-Anwendung - Lernen mit einem durchgehenden Beispiel - Mit Tipps aus der Entwicklungspraxis der erfahrenen Autoren, z.B. zur Performance-Optimierung - Mit einer Einführung in TypeScript Mit diesem Buch lernst du von Grund auf, wie du mit React professionelle Single-Page-Anwendungen entwickelst. In der Neuauflage ihres bewährten React-Arbeitsbuchs zeigen dir Nils Hartmann und Oliver Zeigermann alles Wesentliche von den Anfängen bis zur produktreifen React-Anwendung. Sie erklären dir dabei, wie du mit TypeScript typsicher und nachhaltig entwickelst und große Anwendungen u.a. mit dem React Context und Redux strukturierst. An vielen Stellen versorgen sie dich zudem mit hilfreichen Tipps aus ihrer eigenen React-Entwicklungspraxis. Unter anderem wirst du folgende Themen kennenlernen: - Anwendungen entwickeln mit der Hooks API und TypeScript - Komponenten gestalten mit CSS - Automatisiertes Testen mit der React Testing Library - Client-Server-Kommunikation mit REST und GraphQL - Navigation im Browser mit dem React Router - Statemanagement mit React Context und Redux - Serverseitiges Rendern von React-Anwendungen - Strategien zur Performance-Optimierung Eigene Kapitel widmen sich den eingesetzten modernen JavaScript-Features sowie TypeScript, sodass zum Verständnis des Buches Kenntnisse von ES5 ausreichen. Neu in der 2. Auflage sind unter anderem: - Die React Hooks API - Testen mit der React Testing Library - Typsichere Anwendungen mit TypeScript - GraphQL-Clients mit React

Nils Hartmann ist freiberuflicher Softwareentwickler, -architekt, Trainer und Coach. Er hat langjährige Erfahrung in der Entwicklung mit Java sowie JavaScript/TypeScript, ist Autor von Fachartikeln und unterstützt Teams mit Trainings und Coaching beim Einstieg in JavaScript und die Entwicklung von modernen Webanwendungen. Kontakt: 'nilshartmann.net' Oliver Zeigermann ist Entwickler, Architekt, Berater und Coach aus Hamburg. Er hat über Jahrzehnte in vielen unterschiedlichen Sprachen und mit vielen Technologien und Ansätzen Software entwickelt. Er ist Autor zahlreicher Fachbücher im JavaScript und React-Bereich, sowie Experte für Machine und Deep Learning. Mehr unter 'zeigermann.eu/'.mehr
Verfügbare Formate
TaschenbuchKartoniert, Paperback
EUR34,90
E-BookPDF1 - PDF WatermarkE-Book
EUR27,90
E-BookEPUBePub WasserzeichenE-Book
EUR27,90

Produkt

KlappentextDas bewährte und umfassende Praxisbuch zu React - jetzt komplett aktualisiert und erweitert! - Vom Einstieg bis zur professionellen React-Anwendung - Lernen mit einem durchgehenden Beispiel - Mit Tipps aus der Entwicklungspraxis der erfahrenen Autoren, z.B. zur Performance-Optimierung - Mit einer Einführung in TypeScript Mit diesem Buch lernst du von Grund auf, wie du mit React professionelle Single-Page-Anwendungen entwickelst. In der Neuauflage ihres bewährten React-Arbeitsbuchs zeigen dir Nils Hartmann und Oliver Zeigermann alles Wesentliche von den Anfängen bis zur produktreifen React-Anwendung. Sie erklären dir dabei, wie du mit TypeScript typsicher und nachhaltig entwickelst und große Anwendungen u.a. mit dem React Context und Redux strukturierst. An vielen Stellen versorgen sie dich zudem mit hilfreichen Tipps aus ihrer eigenen React-Entwicklungspraxis. Unter anderem wirst du folgende Themen kennenlernen: - Anwendungen entwickeln mit der Hooks API und TypeScript - Komponenten gestalten mit CSS - Automatisiertes Testen mit der React Testing Library - Client-Server-Kommunikation mit REST und GraphQL - Navigation im Browser mit dem React Router - Statemanagement mit React Context und Redux - Serverseitiges Rendern von React-Anwendungen - Strategien zur Performance-Optimierung Eigene Kapitel widmen sich den eingesetzten modernen JavaScript-Features sowie TypeScript, sodass zum Verständnis des Buches Kenntnisse von ES5 ausreichen. Neu in der 2. Auflage sind unter anderem: - Die React Hooks API - Testen mit der React Testing Library - Typsichere Anwendungen mit TypeScript - GraphQL-Clients mit React

Nils Hartmann ist freiberuflicher Softwareentwickler, -architekt, Trainer und Coach. Er hat langjährige Erfahrung in der Entwicklung mit Java sowie JavaScript/TypeScript, ist Autor von Fachartikeln und unterstützt Teams mit Trainings und Coaching beim Einstieg in JavaScript und die Entwicklung von modernen Webanwendungen. Kontakt: 'nilshartmann.net' Oliver Zeigermann ist Entwickler, Architekt, Berater und Coach aus Hamburg. Er hat über Jahrzehnte in vielen unterschiedlichen Sprachen und mit vielen Technologien und Ansätzen Software entwickelt. Er ist Autor zahlreicher Fachbücher im JavaScript und React-Bereich, sowie Experte für Machine und Deep Learning. Mehr unter 'zeigermann.eu/'.
Details
Weitere ISBN/GTIN9783960884200
ProduktartE-Book
EinbandartE-Book
FormatEPUB
Format HinweisePub Wasserzeichen
FormatE101
Erscheinungsjahr2019
Erscheinungsdatum10.12.2019
Auflageüberarbeitete und erweiterte Auflage
Seiten402 Seiten
SpracheDeutsch
Dateigrösse22981 Kbytes
Artikel-Nr.4996998
Rubriken
Genre9201

Inhalt/Kritik

Leseprobe
1Einleitung
1.1Was ist React?

React1 ist eine Open-Source-JavaScript-Bibliothek, mit der du Webanwendungen, sogenannte Single-Page-Anwendungen (kurz SPAs), erstellen kannst. Die Bibliothek wird von Facebook entwickelt und sowohl für facebook.com als auch für Instagram benutzt. Aber auch darüber hinaus ist React sehr weit verbreitet und wird zum Beispiel von Netflix, Airbnb, Twitter oder der Online-Ausgabe des Wall Street Journals verwendet. Da React kaum Bedingungen an seine Umgebung stellt, ist es sehr flexibel einsetzbar. So gibt es auch Webseiten, die React nur für einige interaktive Teile ihres Angebots verwenden.


Single-Page-Anwendungen

Single-Page-Anwendungen (SPAs) zeichnen sich dadurch aus, dass sie vollständig auf dem Client, also im Browser, laufen. Sämtliche Interaktionen werden auf dem Client bearbeitet und die Darstellung der Seite wird mittels JavaScript erzeugt bzw. aktualisiert, um eine möglichst flüssige Darstellung zu erreichen. Mit dem Server werden JavaScript-Code, statische Assets (Bilder, Fonts etc.) und Daten ausgetauscht, aber kein HTML-Code. Zur Entwicklung von Single-Page-Anwendungen haben sich spezialisierte Frameworks und Bibliotheken (in erster Linie React, Angular, Vue oder Web Components) herausgebildet, die von der zugrunde liegenden DOM-API abstrahieren und die Entwicklung dieser Anwendungen vereinfachen.

Im Gegensatz zu SPAs findet bei serverseitig gerenderten Websites und Anwendungen (auch »klassische Webanwendungen« genannt) bei Interaktionen ein Server-Roundtrip statt, bei dem fertiger HTML-Code zurückgeliefert wird. Aus diesem Grund eignet sich dieser Ansatz nur für zumeist statische Websites, auch wenn diese mit JavaScript an einzelnen Stellen um interaktive Features erweitert werden können.


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. Beispiele für den Zustand einer Anwendung können fachliche Dinge sein, wie die Anzahl ungelesener Nachrichten, ein Blogpost, der gerade in der Anwendung bearbeitet wird, oder der zurzeit angemeldete User. Aber auch technische Dinge, wie die Informationen, welches Menü gerade aufgeklappt oder welcher Eintrag in einer Combobox ausgewählt ist, sind Zustand der Anwendung.

Der Kern von React ist übrigens losgelöst vom Web: React kann in unterschiedlichen Szenarien funktionieren, so auch in nativen Anwendungen (zum Beispiel iOS oder Android).

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. In der Regel wird die Anwendung auf Clientseite, also im Browser, gerendert. Du kannst deine Anwendung aber zusätzlich auf dem Server rendern lassen, sofern du dort eine JavaScript-Engine laufen lässt. Dann wird auf dem Server fertiger HTML-Code erzeugt, der zum Browser geschickt wird und dort vom Browser nur noch in den DOM umgewandelt und angezeigt werden muss. Von da an werden alle Updates im Browser gerendert. Das ist sehr praktisch zum Beispiel für eine schnelle erste Anzeige der Anwendung.
1.1.1Komponenten
React-Anwendungen werden in Komponenten aufgeteilt. Eine Komponente enthält alles Notwendige, um sich darzustellen. Dabei trennt React nicht zwischen Template und Logik; sowohl UI und Logik sind in der Komponente enthalten. Als Ersatz für das Template wird in React der UI-Code direkt in den JavaScript-Code einer Komponente geschrieben. Das geschieht mit der React-eigenen Spracherweiterung JSX, die es ermöglicht, HTML-artigen Code in JavaScript einzubinden.

Ohne an dieser Stelle schon in die Details zu gehen, könnte eine einfache Komponente, die in React als Funktion implementiert werden kann, wie folgt aussehen:


import React from "react";

export default function HelloMessage() {

return Hello, World;

}


Wenn diese Komponente in deiner Anwendung verwendet wird, sorgt React dafür, dass ein h1-Element in den DOM eingebaut wird, das den String »Hello, World« beinhaltet.
Deklarative Komponenten
»UI as a Function«

Du siehst an dieser Stelle ein weiteres, wichtiges Konzept von React: Komponenten werden ausschließlich deklarativ beschrieben. Eine Komponente gibt demnach immer nur genau die UI zurück, die dargestellt werden soll. Man spricht daher von »UI as a Function« in der React-Entwicklung, da - genau wie bei einer mathematischen Funktion - zu demselben Eingabeparameter (React: Zustand) immer derselbe Wert (React: UI) zurückkommt.

Zur Laufzeit kümmert sich React dann darum, dass auch der DOM im Browser entsprechend angepasst wird - und zwar unabhängig davon, wie der DOM zuvor aussah. Die einzelnen Übergänge von einer UI zur nächsten, also das jeweilige Aktualisieren des DOM im Brower, übernimmt React für dich und geht dabei sehr effizient und optimiert vor. Funktionen zum Erzeugen oder Löschen von Elementen (wie beispielsweise createElement oder createAttribute aus der DOM-API) brauchst du in React nicht.

Durch die deklarative Programmierung entfällt eine Menge Komplexität und Fehleranfälligkeit, die aus anderen Ansätzen bekannt sind, da eine wesentliche Fehlerquelle, die diversen Übergänge innerhalb einer Anwendung, nicht implementiert werden müssen. Auch das Testen von Komponenten wird dadurch sehr einfach. In deinem Test übergibst du deiner Komponente ihre Parameter und prüfst hinterher, dass die richtige UI zurückgeliefert wird - genau wie bei einer »normalen« Funktion, nur dass du UI-Elemente überprüfst und keine numerischen oder anderen Werte.

Eigenschaften einer Komponente

Im Folgenden sind die Eigenschaften einer Komponente zusammengefasst:
Komponenten in React repräsentieren einen fachlichen Teil einer Anwendung. Das kann etwas sehr Einfaches (z.B. ein Eingabefeld) oder auch etwas Komplexes sein (z.B. ein gesamtes Formular). In der Regel werden einfache Komponenten zu komplexeren Komponenten und schließlich zu ganzen Anwendungen aggregiert. Eine Anwendung in React ist technisch genau dasselbe wie eine »einfache« Komponente.
Der Code einer Komponente besteht aus UI und Logik. Es gibt in React in der Regel keine Trennung nach Techniken wie in anderen UI-Frameworks (z.B. Trennung in Model und View).
Es gibt in React keine Template-Sprache. Stattdessen wird der UI-Code in JavaScript geschrieben. Um das möglichst einfach zu machen, wird der UI-Code mit der Spracherweiterung JSX geschrieben und sieht dann wie »HTML in JavaScript« aus. Der Tooling-Support (Editoren, IDEs etc.) für JSX ist sehr gut, sodass du trotzdem mit deinem Lieblingseditor (weiter) arbeiten kannst.
Komponenten werden deklarativ beschrieben. Du gibst in der JSX-Notation immer an, welche UI nach dem Rendern der Komponente im Browser dargestellt werden soll. Dabei brauchst du dich aber nicht darum zu kümmern, wie es zu dieser Darstellung kommt. Unabhängig davon, was vor dem Rendern deiner Komponente im Browser angezeigt wurde, kümmert sich React darum, diese alte Darstellung in die neue, von dir gewünschte Darstellung zu transformieren.
Es gibt in React kein 2-Wege-Databinding zum Abgleich zwischen Model und UI. Stattdessen aktualisierst du - z.B. nach einer Benutzerinteraktion - den Zustand deiner Komponente und React rendert die komplette Komponente mitsamt ihrer Unterkomponenten neu. Dadurch kann es nie zu Inkonsistenzen in der Darstellung kommen, weil du z.B. vergessen hast, einen Listener (rechtzeitig) an- oder abzumelden. Es wird auch davon gesprochen, dass React die UI als Funktion betrachtet: Abhängig von einem Parameter (dem Model) wird in React immer die gleiche UI zurückgeliefert. Genau wie in einer Funktion, die - sofern sie frei von Seiteneffekten ist - für denselben Parameter immer dasselbe Ergebnis zurückliefert.
Daten in Komponenten sind entweder Properties oder ein interner Zustand. Properties werden der Komponente von außen, vom Verwender, übergeben. Der Zustand (in React »State« genannt) ist nur komponentenintern und enthält veränderliche Daten, wie z.B. Benutzereingaben. Das Ändern des Zustands führt in React zum erneuten Rendern der gesamten Komponente sowie aller ihrer Unterkomponenten.
Technisch werden Komponenten entweder als Funktion oder als ES6-Klasse geschrieben. Lange Zeit waren die Klassen der einzige vollwertige Weg, Komponenten zu schreiben. Auch wenn es...
mehr

Autor

Nils Hartmann ist freiberuflicher Softwareentwickler, -architekt, Trainer und Coach. Er hat langjährige Erfahrung in der Entwicklung mit Java sowie JavaScript/TypeScript, ist Autor von Fachartikeln und unterstützt Teams mit Trainings und Coaching beim Einstieg in JavaScript und die Entwicklung von modernen Webanwendungen. Kontakt: "nilshartmann.net"Oliver Zeigermann ist Entwickler, Architekt, Berater und Coach aus Hamburg. Er hat über Jahrzehnte in vielen unterschiedlichen Sprachen und mit vielen Technologien und Ansätzen Software entwickelt. Er ist Autor zahlreicher Fachbücher im JavaScript und React-Bereich, sowie Experte für Machine und Deep Learning. Mehr unter "zeigermann.eu/".