React lernen, 2. Auflage

Kapitel 1. Willkommen bei React

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Was macht eine JavaScript-Bibliothek gut? Ist es die Anzahl der Sterne auf GitHub? Die Anzahl der Downloads auf npm? Ist die Anzahl der Tweets, die ThoughtLeaders™ täglich über sie schreiben, wichtig? Wie wählen wir das beste Tool aus, um die beste Sache zu bauen? Woher wissen wir, dass es unsere Zeit wert ist? Woher wissen wir, dass es gut ist?

Als React zum ersten Mal veröffentlicht wurde, gab es eine Menge Diskussionen darüber, ob es gut ist, und es gab viele Skeptiker. Es war neu, und das Neue kann oft beunruhigend sein.

Um auf diese Kritik zu reagieren, schrieb Pete Hunt vom React-Team einen Artikel mit dem Titel "Warum React?", in dem er empfahl, "ihm [React] fünf Minuten Zeit zu geben". Er wollte die Leute dazu ermutigen, zunächst mit React zu arbeiten, bevor sie den Ansatz des Teams für zu wild halten.

Ja, React ist eine kleine Bibliothek, die nicht alles mitbringt, was du zum Erstellen deiner Anwendung brauchst. Gib ihr fünf Minuten Zeit.

Ja, in React schreibst du Code, der wie HTML aussieht, direkt in deinen JavaScript-Code. Und ja, diese Tags müssen vorverarbeitet werden, damit sie in einem Browser laufen. Und dafür brauchst du wahrscheinlich ein Build-Tool wie Webpack. Gib dir fünf Minuten Zeit.

Während sich React einem Jahrzehnt der Nutzung nähert, haben viele Teams beschlossen, dass es gut ist, weil sie es fünf Minuten ausprobiert haben. Wir sprechen von Uber, Twitter, Airbnb und Twitter - riesige Unternehmen, die React ausprobiert und erkannt haben, dass es Teams helfen kann, bessere Produkte schneller zu entwickeln. Sind wir am Ende nicht alle deswegen hier? Nicht wegen der Tweets. Nicht wegen der Sterne. Nicht wegen der Downloads. Wir sind hier, um coole Sachen mit Tools zu bauen, die wir gerne benutzen. Wir sind hier, weil wir stolz darauf sind, dass wir etwas gebaut haben. Wenn du diese Art von Dingen gerne tust, wirst du wahrscheinlich gerne mit React arbeiten.

Ein starkes Fundament

Egal, ob du ganz neu bei React bist oder mit diesem Text einige der neuesten Funktionen kennenlernen möchtest, wir möchten, dass dieses Buch als solide Grundlage für deine zukünftige Arbeit mit der Bibliothek dient. Das Ziel dieses Buches ist es, Verwirrung im Lernprozess zu vermeiden, indem wir die Dinge in eine Reihenfolge bringen: eine Lern-Roadmap.

Bevor du dich mit React beschäftigst, ist es wichtig, dass du JavaScript kennst. Nicht alles in JavaScript, nicht jedes Muster, aber es ist hilfreich, wenn du dich mit Arrays, Objekten und Funktionen auskennst, bevor du dich in dieses Buch stürzt.

Im nächsten Kapitel befassen wir uns mit der neueren JavaScript-Syntax, um dich mit den neuesten JavaScript-Funktionen vertraut zu machen, insbesondere mit denen, die häufig mit React verwendet werden. Dann geben wir eine Einführung in funktionales JavaScript, damit du das Paradigma verstehst, aus dem React entstanden ist. Ein schöner Nebeneffekt der Arbeit mit React ist, dass es dich zu einem stärkeren JavaScript-Entwickler machen kann, indem es Muster fördert, dielesbar, wiederverwendbar und testbar sind. Das ist wie eine sanfte, hilfreiche Gehirnwäsche.

Danach werden wir grundlegende React-Kenntnisse erwerben, um zu verstehen, wie man eine Benutzeroberfläche mit Komponenten aufbaut. Dann lernen wir, wie wir diese Komponenten zusammensetzen und mit Requisiten und Zuständen Logik hinzufügen. Wir werden uns mit React Hooks beschäftigen, mit denen wir zustandsabhängige Logik zwischen Komponenten wiederverwenden können.

Sobald die Grundlagen vorhanden sind, werden wir eine neue Anwendung erstellen, mit der Benutzer Farben hinzufügen, bearbeiten und löschen können. Wir werden lernen, wie Hooks und Suspense uns beim Abrufen von Daten helfen können. Während des Aufbaus dieser Anwendung werden wir eine Reihe von Tools aus dem React-Ökosystem kennenlernen, die für allgemeine Aufgaben wie Routing, Testen und serverseitiges Rendering verwendet werden.

Wir hoffen, dass wir dich auf diese Weise schneller mit dem React-Ökosystem vertraut machen können - und zwar nicht nur, um an der Oberfläche zu kratzen, sondern um dir die Werkzeuge und Fähigkeiten an die Hand zu geben, die du brauchst, um echte React-Anwendungen zu entwickeln.

Vergangenheit und Zukunft von React

React wurde zuerst von Jordan Walke, einem Softwareentwickler bei Facebook, entwickelt. Es wurde 2011 in den Newsfeed von Facebook integriert und später in Instagram, als dieses 2012 von Facebook übernommen wurde. Auf der JSConf 2013 wurde React als Open Source veröffentlicht und reihte sich in die große Gruppe der UI-Bibliotheken wie jQuery, Angular, Dojo, Meteor und anderen ein. Zu dieser Zeit wurde React als "das V in MVC" bezeichnet. Mit anderen Worten: Die React-Komponentenfungierten als View-Layer oder Benutzeroberfläche für deineJavaScript-Anwendungen.

Von da an verbreitete sich die Akzeptanz in der Community immer weiter. Im Januar 2015 kündigte Netflix an, dass sie React für ihre UI-Entwicklung nutzen würden. Noch im selben Monat wurde React Native, eine Bibliothek für die Entwicklung mobiler Anwendungen mit React, veröffentlicht. Facebook veröffentlichte außerdem ReactVR, ein weiteres Tool, das React für eine breitere Palette von Rendering-Zielen nutzbar machte. In den Jahren 2015 und 2016 kamen zahlreiche beliebte Tools wie React Router, Redux und Mobx auf den Markt, die Aufgaben wie Routing und Zustandsverwaltung übernehmen. Schließlich war React als Bibliothek konzipiert: Es ging darum, eine bestimmte Anzahl von Funktionen zu implementieren, und nicht darum, ein Tool für jeden Anwendungsfall bereitzustellen.

Ein weiteres großes Ereignis auf der Zeitachse war die Veröffentlichung von React Fiber im Jahr 2017. Fiber war eine Überarbeitung von Reacts Rendering-Algorithmus, die in ihrer Ausführung geradezu magisch war. Es war eine komplette Überarbeitung der React-Interna, die kaum etwas an der öffentlichen API änderte. Es war ein Weg, React moderner und leistungsfähiger zu machen, ohne die Nutzer zu beeinträchtigen.

Im Jahr 2019 haben wir Hooks veröffentlicht, eine neue Möglichkeit, zustandsabhängige Logik hinzuzufügen und über Komponenten hinweg zu teilen. Außerdem haben wir Suspense veröffentlicht, eine Möglichkeit, das asynchrone Rendering mit React zu optimieren.

In Zukunft werden wir unweigerlich mehr Veränderungen sehen, aber einer der Gründe für den Erfolg von React ist das starke Team, das über die Jahre an dem Projekt gearbeitet hat. Das Team ist ehrgeizig, aber vorsichtig. Es treibt zukunftsweisende Optimierungen voran und berücksichtigt dabei stets die Auswirkungen, die Änderungen an der Bibliothek auf die Community haben werden.

Wenn Änderungen an React und den dazugehörigen Tools vorgenommen werden, gibt es manchmal auch Änderungen, die zu Brüchen führen. Es kann sogar sein, dass zukünftige Versionen dieser Tools einige der Beispielcodes in diesem Buch kaputt machen. Du kannst trotzdem mit den Codebeispielen weiterarbeiten. Wir geben in der package.json Datei genaue Versionsinformationen an, damit du die Pakete mit der richtigen Version installieren kannst.

Neben kannst du dich auch im offiziellen React-Blog über Änderungen informieren. Wenn neue Versionen von React veröffentlicht werden, schreibt das Kernteam einen detaillierten Blogbeitrag und ein Änderungsprotokoll über die Neuerungen. Der Blog wurde außerdem in immer mehr Sprachen übersetzt. Wenn Englisch nicht deine Muttersprache ist, findest du die lokalisierten Versionen der Dokumente auf derSprachenseite der Docs-Website.

React lernen: Zweite Ausgabe Änderungen

Dieses ist die zweite Ausgabe von Learning React. Wir hielten es für wichtig, das Buch zu aktualisieren, da sich React in den letzten Jahren stark weiterentwickelt hat. Wir wollen uns auf die bewährten Methoden konzentrieren, die vom React-Team empfohlen werden, aber wir werden auch Informationen über veraltete React-Funktionen geben. Es gibt eine Menge React-Code, der vor Jahren mit alten Stilen geschrieben wurde, aber immer noch gut funktioniert und gewartet werden muss. In jedem Fall werden wir diese Funktionen in einer Seitenleiste erwähnen, falls du mit alten React-Anwendungen arbeitest.

Arbeiten mit den Dateien

In diesem Abschnitt erfahren wir, wie du mit den Dateien für dieses Buch arbeitest und wie du einige nützliche React-Tools installierst.

Datei-Repository

Das GitHub-Repository zu diesem Buch enthält alle Codedateien nach Kapiteln geordnet.

React Entwickler Tools

Wir empfehlen dir, die React Developer Tools zu installieren, um deine Arbeit an React-Projekten zu unterstützen. Diese Tools sind als Browsererweiterung für Chrome und Firefox und als eigenständige App für Safari, IE und React Native erhältlich. Wenn du die Dev Tools installierst, kannst du den React-Komponentenbaum einsehen, Props und Zustandsdetails anzeigen und sogar sehen, welche Websites React derzeit in der Produktion verwenden. Das ist sehr nützlich beim Debuggen und um zu erfahren, wie React in anderen Projekten eingesetzt wird.

Um sie zu installieren, besuche dasGitHub-Repository. Dort findest du Links zu den Erweiterungen fürChromeund Firefox.

Wenn das React-Symbol in der Symbolleiste des Browsers leuchtet (sieheAbbildung 1-1), weißt du, dass die Seite React verwendet.

Abbildung 1-1. Ansicht der React Developer Tools in Chrome

Wenn du dann die Entwicklertools öffnest, wird eine neue Registerkarte mit dem Namen React angezeigt, wie in Abbildung 1-2 dargestellt. Wenn du darauf klickst, werden alle Komponenten angezeigt, aus denen die Seite besteht, die du gerade betrachtest.

Abbildung 1-2. Inspektion des DOM mit den React Developer Tools

Node.js installieren

Node.js ist eine JavaScript-Laufzeitumgebung, mit der du Full-Stack-Anwendungen erstellen kannst. Node ist Open Source und kann auf Windows, macOS, Linux und anderen Plattformen installiert werden. Wir werden Node in Kapitel 12verwenden, wenn wir einen Express-Server bauen.

Du musst Node installiert haben, aber du musst kein Node-Experte sein, um React nutzen zu können. Wenn du dir nicht sicher bist, ob Node.js auf deinem Rechner installiert ist, kannst du ein Terminal- oder Eingabeaufforderungsfenster öffnen und Folgendes eingeben:

node -v

Wenn du diesen Befehl ausführst, solltest du eine Versionsnummer von Node zurückbekommen, idealerweise 8.6.2 oder höher. Wenn du den Befehl eingibst und die Fehlermeldung "Befehl nicht gefunden" erhältst, ist Node.js nicht installiert. Das lässt sich leicht beheben, indem du Node.js von derNode.js-Website installierst. Gehe einfach durch die automatischen Schritte des Installationsprogramms und wenn du den Befehl node -v erneut eingibst, siehst du die Versionsnummer.

npm

Als du Node.js installiert hast, hast du auch npm, den Node-Paketmanager, installiert. In der JavaScript-Gemeinschaft teilen Ingenieure Open-Source-Code-Projekte, um zu vermeiden, dass sie Frameworks, Bibliotheken oder Hilfsfunktionen selbst neu schreiben müssen. React selbst ist ein Beispiel für eine nützliche npm-Bibliothek. In diesem Buch werden wir npm verwenden, um eine Vielzahl von Paketen zu installieren.

Die meisten JavaScript-Projekte, denen du heute begegnest, enthalten eine Sammlung von Dateien und eine package.json-Datei. Diese Datei beschreibt das Projekt und alle seine Abhängigkeiten. Wenn dunpm install in dem Ordner ausführst, der die package.json-Datei enthält, installiert npm alle Pakete, die im Projekt aufgeführt sind.

Wenn du dein eigenes Projekt von Grund auf neu beginnst und Abhängigkeiten einbinden willst, führst du einfach den Befehl aus:

npm init -y

Dadurch wird das Projekt initialisiert und eine package.json-Datei erstellt. Von dort aus kannst du deine eigenen Abhängigkeiten mit npm installieren. Um ein Paket mit npm zu installieren, musst du Folgendes ausführen:

npm install package-name

Um ein Paket mit npm zu entfernen, führst du aus:

npm remove package-name

Garn

Eine Alternative zu npm ist Yarn. Es wurde 2016 von Facebook in Zusammenarbeit mit Exponent, Google und Tilde veröffentlicht. Das Projekt hilft Facebook und anderen Unternehmen, ihre Abhängigkeiten zuverlässig zu verwalten. Wenn du mit dem npm-Workflow vertraut bist, ist der Einstieg in Yarn ganz einfach. Installiere Yarn zunächst global mit npm:

npm install -g yarn

Dann bist du bereit, Pakete zu installieren. Wenn du die Abhängigkeiten aus der package.json installierst, kannst du anstelle von npm install auch yarn ausführen.

Um ein bestimmtes Paket mit yarn zu installieren, führe aus:

yarn add package-name

Um eine Abhängigkeit zu entfernen, ist der Befehl ebenfalls bekannt:

yarn remove package-name

Yarn wird von Facebook in der Produktion eingesetzt und ist in Projekten wie React, React Native und Create React App enthalten. Wenn du ein Projekt findest, das eine yarn.lock-Datei enthält, verwendet das Projekt Yarn. Ähnlich wie mit dem Befehlnpm install kannst du alle Abhängigkeiten des Projekts installieren, indem du yarn eingibst.

Jetzt, wo du deine Umgebung für die React-Entwicklung eingerichtet hast, kannst du dich auf den Weg machen, um React zu lernen. In Kapitel 2 werden wir uns mit der neuesten JavaScript-Syntax vertraut machen, die am häufigsten in React-Code vorkommt.