React: Up & Running, 2. Auflage

Vorwort

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

Es ist wieder eine wunderbare warme kalifornische Nacht. Die leichte Meeresbrise trägt nur dazu bei, dass du dich 100%ig "aaah!" fühlst. Der Ort: Los Angeles; das Jahr: 2000-irgendwas. Ich war gerade dabei, meine neue kleine Web-App namens CSSsprites.com per FTP auf meinen Server zu laden und sie der Welt zu präsentieren. An den letzten Abenden, die ich mit der Arbeit an der App verbracht hatte, dachte ich über ein Problem nach: Warum um alles in der Welt brauchte ich 20 % Aufwand, um das "Fleisch" der App zu verpacken, und dann 80 %, um mit der Benutzeroberfläche zu ringen? Wie viele andere Tools hätte ich entwickeln können, wenn ich nicht ständig getElementById() und den Status der App im Auge behalten müsste? (Ist der Benutzer mit dem Hochladen fertig? Ist ein Fehler aufgetreten? Ist dieser Dialog noch aktiv?) Warum ist die Entwicklung der Benutzeroberfläche so zeitaufwändig? Und was ist mit all den verschiedenen Browsern los? Langsam wurde aus dem "aaah" ein "aarrggh!"

Wir schreiben den März 2015 auf der F8-Konferenz von Facebook. Das Team, zu dem ich gehöre, ist bereit, eine komplette Überarbeitung von zwei Web-Apps anzukündigen: unser Drittanbieter-Kommentarangebot und ein dazugehöriges Moderationstool. Im Vergleich zu meiner kleinen CSSsprites.com-App waren das vollwertige Web-Apps mit viel mehr Funktionen, viel mehr Leistung und wahnsinnig viel Traffic. Trotzdem war die Entwicklung ein Vergnügen. Teammitglieder, die neu in der App waren (und einige sogar neu in JavaScript und CSS), konnten hier eine Funktion und dort eine Verbesserung beisteuern und kamen so schnell und mühelos auf Touren. Wie ein Teammitglied sagte: "Aha, jetzt verstehe ich, was es mit der ganzen Liebe auf sich hat!"

Was ist auf dem Weg dorthin passiert? Reagiere.

React ist eine Bibliothek für die Erstellung von Benutzeroberflächen - sie hilft dir, die Benutzeroberfläche ein für alle Mal zu definieren. Wenn sich dann der Zustand der App ändert, wird die Benutzeroberfläche neu aufgebaut, um auf die Änderung zu reagieren, und du musst nichts weiter tun. Schließlich hast du die Benutzeroberfläche ja schon definiert. Definiert? Eher deklariert. Du verwendest kleine, überschaubare Komponenten, um eine große, leistungsstarke App zu bauen. Du brauchst nicht mehr die Hälfte deines Funktionskörpers mit der Suche nach DOM-Knoten zu verbringen. Alles, was du tust, ist, den Zustand deiner App zu verwalten (mit einem ganz normalen JavaScript-Objekt) und der Rest folgt von selbst.

React zu lernen ist ein guter Deal - du lernst eine Bibliothek und kannst sie nutzen, um alle folgenden Dinge zu erstellen:

• Webanwendungen

• Native iOS- und Android-Apps

• TV-Apps

• Native Desktop-Anwendungen

Du kannst native Apps mit nativer Leistung und nativen Steuerelementen(echten nativen Steuerelementen, nicht nativen Kopien) erstellen, indem du dieselben Ideen zur Erstellung von Komponenten und Benutzeroberflächen verwendest. Es geht nicht um "einmal schreiben, überall laufen lassen" (unsere Branche schlägt hier immer wieder fehl); es geht um "einmal lernen, überall nutzen".

Um es kurz zu machen: Lerne React, nimm dir 80 % deiner Zeit zurück und konzentriere dich auf die Dinge, die wichtig sind (wie den wahren Grund, warum deine App existiert).

Über dieses Buch

Dieses Buch konzentriert sich darauf, React aus der Sicht der Webentwicklung zu lernen. In den ersten drei Kapiteln fängst du mit einer leeren HTML-Datei an und baust von dort aus weiter auf. So kannst du dich auf das Erlernen von React konzentrieren und nicht auf die neue Syntax oder die Hilfstools.

Kapitel 5 konzentriert sich mehr auf JSX, eine separate und optionale Technologie, die normalerweise in Verbindung mit React verwendet wird.

Von dort aus lernst du, was es braucht, um eine echte App zu entwickeln und welche zusätzlichen Tools dir dabei helfen können. Das Buch nutzt create-react-app, um schnell loszulegen und die Diskussion über Hilfstechnologien auf ein Minimum zu beschränken. Das Ziel ist es, sich vor allem auf React zu konzentrieren.

Eine umstrittene Entscheidung war die Aufnahme von Klassenkomponenten zusätzlich zu den Funktionskomponenten. Funktionskomponenten sind wahrscheinlich der Weg in die Zukunft, aber der Leser wird wahrscheinlich auf bestehenden Code und Tutorials stoßen, die nur von Klassenkomponenten sprechen. Wenn du beide Syntaxen kennst, hast du doppelt so gute Chancen, den Code in der freien Wildbahn zu lesen und zu verstehen.

Viel Glück auf deiner Reise zum Erlernen von React - möge sie reibungslos und fruchtbar verlaufen!

In diesem Buch verwendete Konventionen

In diesem Buch werden die folgenden typografischen Konventionen verwendet:

Kursiv

Weist auf neue Begriffe, URLs, E-Mail-Adressen, Dateinamen und Dateierweiterungen hin.

Constant width

Wird für Programmlistings sowie innerhalb von Absätzen verwendet, um auf Programmelemente wie Variablen- oder Funktionsnamen, Datenbanken, Datentypen, Umgebungsvariablen, Anweisungen und Schlüsselwörter hinzuweisen.

Constant width bold

Zeigt Befehle oder anderen Text an, der vom Benutzer wortwörtlich eingetippt werden sollte.

Tipp

Dieses Element steht für einen Tipp oder eine Anregung.

Hinweis

Dieses Element steht für einen allgemeinen Hinweis.

Code-Beispiele verwenden

Zusätzliches Material (Code-Beispiele, Übungen usw.) steht unter https://github.com/stoyan/reactbook2 zum Download bereit .

Wenn du eine technische Frage oder ein Problem mit den Codebeispielen hast, sende bitte eine E-Mail an [e-mail].

Dieses Buch soll dir helfen, deine Arbeit zu erledigen. Wenn in diesem Buch Beispielcode angeboten wird, darfst du ihn in deinen Programmen und deiner Dokumentation verwenden. Du musst uns nicht um Erlaubnis fragen, es sei denn, du reproduzierst einen großen Teil des Codes. Wenn du zum Beispiel ein Programm schreibst, das mehrere Teile des Codes aus diesem Buch verwendet, brauchst du keine Erlaubnis. Der Verkauf oder die Verbreitung von Beispielen aus O'Reilly-Büchern erfordert jedoch eine Genehmigung. Die Beantwortung einer Frage mit einem Zitat aus diesem Buch und einem Beispielcode erfordert keine Genehmigung. Wenn du einen großen Teil des Beispielcodes aus diesem Buch in die Dokumentation deines Produkts aufnimmst, ist eine Genehmigung erforderlich.

Wir schätzen die Namensnennung, verlangen sie aber nicht. Eine Quellenangabe umfasst normalerweise den Titel, den Autor, den Verlag und die ISBN. Zum Beispiel: "React: Up & Running, 2. Auflage, von Stoyan Stefanov (O'Reilly). Copyright 2022 Stoyan Stefanov, 978-1-492-05146-6."

Wenn du der Meinung bist, dass deine Verwendung von Codebeispielen nicht unter die Fair-Use-Regelung oder die oben genannte Erlaubnis fällt, kannst du uns gerne unter [e-mail] kontaktieren .

O'Reilly Online Learning

Hinweis

Seit mehr als 40 Jahren bietet O'Reilly Media Schulungen, Wissen und Einblicke in Technologie und Wirtschaft, um Unternehmen zum Erfolg zu verhelfen.

Unser einzigartiges Netzwerk von Experten und Innovatoren teilt sein Wissen und seine Erfahrung durch Bücher, Artikel und unsere Online-Lernplattform. Die Online-Lernplattform von O'Reilly bietet dir On-Demand-Zugang zu Live-Trainingskursen, ausführlichen Lernpfaden, interaktiven Programmierumgebungen und einer umfangreichen Text- und Videosammlung von O'Reilly und über 200 anderen Verlagen. Weitere Informationen erhältst du unter https://oreilly.com.

Wie du uns kontaktierst

Bitte richte Kommentare und Fragen zu diesem Buch an den Verlag:

• O'Reilly Media, Inc.
• 1005 Gravenstein Highway Nord
• Sebastopol, CA 95472
• 800-998-9938 (in den Vereinigten Staaten oder Kanada)
• 707-829-0515 (international oder lokal)
• 707-829-0104 (Fax)

Wir haben eine Webseite für dieses Buch, auf der wir Errata, Beispiele und zusätzliche Informationen auflisten. Du kannst diese Seite unter https://oreil.ly/reactUR_2e aufrufen .

Schreib eine E-Mail an [e-mail], um Kommentare oder technische Fragen zu diesem Buch zu stellen.

Neuigkeiten und Informationen über unsere Bücher und Kurse findest du unter https://oreilly.com.

Finde uns auf Facebook: https://facebook.com/oreilly

Folge uns auf Twitter: https://twitter.com/oreillymedia

Schau uns auf YouTube: https://www.youtube.com/oreillymedia

Danksagungen

Ich möchte mich bei allen bedanken, die die verschiedenen Entwürfe dieses Buches gelesen und mir Feedback und Korrekturen geschickt haben.

Für die erste Ausgabe: Andreea Manole, Iliyan Peychev, Kostadin Ilov, Mark Duppenthaler, Stephan Alber und Asen Bozhilov. Für die zweite Ausgabe: Adam Rackis, Maximiliano Firtman, Chetan Karande, Kiril Christov und Scott Satoshi Iwako.

Danke an all die Leute bei Facebook, die an (oder mit) React arbeiten und meine Fragen tagtäglich beantworten. Außerdem danke ich der großen React-Community, die immer wieder großartige Tools, Bibliotheken, Artikel und Nutzungsmuster hervorbringt.

Vielen Dank an Jordan Walke.

Danke an alle bei O'Reilly, die dieses Buch möglich gemacht haben: Angela Rufino, Jennifer Pollock, Meg Foley, Kim Cofer, Justin Billing, Nicole Shelby, Kristen Brown, und vielen anderen.

Danke an Javor Vatchkov, der die Benutzeroberfläche der in diesem Buch entwickelten Beispiel-App entworfen hat (probiere sie auf whinepad.com aus).