React Kochbuch

Vorwort

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

Dieses Buch enthält eine Sammlung von Codes, die wir im Laufe der Jahre bei der Entwicklung von React-Anwendungen als hilfreich empfunden haben. Ähnlich wie bei Rezepten in der Küche haben wir sie als Ausgangspunkte oder Inspirationen für deinen eigenen Code konzipiert. Du solltest sie an deine Situation anpassen und Zutaten (wie z. B. Beispielserver) durch solche ersetzen, die für deine Bedürfnisse besser geeignet sind. Die Rezepte reichen von allgemeinen Tipps zur Webentwicklung bis hin zu größeren Codestücken, die du zu Bibliotheken verallgemeinern kannst.

Die meisten Rezepte werden mit Create React App erstellt, da dies mittlerweile der übliche Ausgangspunkt für die meisten React-Projekte ist. Es sollte einfach sein, jedes Rezept für die Verwendung in Preact oder Gatsby zu konvertieren.

Um den Code kompakt zu halten, haben wir im Allgemeinen Hooks und Funktionen anstelle von Klassenkomponenten verwendet. Außerdem haben wir das Prettier-Tool verwendet, um den gesamten Code standardmäßig zu formatieren. Wir haben die Standardoptionen von Prettier verwendet, mit Ausnahme von engeren Einzügen und Zeilenlängen, um den Code sauber auf die Druckseite zu bringen. Du solltest das Codeformat so anpassen, dass es deinem bevorzugten Standard entspricht.

Wir haben bei der Erstellung dieser Rezepte viele Bibliotheken genutzt:

Werkzeug/Bibliothek	Beschreibung	Versionen
Apollo Kunde	GraphQL-Client	3.3.19
axios	HTTP-Bibliothek	0.21.1
chai	Bibliothek zur Unterstützung von Einheitstests	4.3.0
chromedriver	Browser-Automatisierungstool	88.0.0
React App erstellen	Tool zur Erstellung von React-Apps	4.0.3
Zypresse	Automatisiertes Testsystem	7.3.0
Zypressen-Axt	Automatisierte Zugänglichkeitstests	0.12.2
Gatsby	Tool zur Erstellung von React-Apps	3.4.1
GraphQL	API-Abfragesprache	15.5.0
jsx-a11y	ESLint Plugin für Barrierefreiheit	6.4.1
Material-UI	Komponentenbibliothek	4.11.4
Knotenpunkt	JavaScript-Laufzeit	v12.20.0
npm	Der Node-Paketmanager	6.14.8
nvm	Tool für den Betrieb mehrerer Node-Umgebungen	0.33.2
nwb	Tool zur Erstellung von React-Apps	0.25.x
Nächste.js	Tool zur Erstellung von React-Apps	10.2.0
Preact	Leichtgewichtiges React-ähnliches Framework	10.3.2
Preact Custom Elements	Bibliothek zum Erstellen eigener Elemente	4.2.1
preset-create-react-app	Storybook Plugin	3.1.7
Rails	Web-Entwicklungsrahmen	6.0.3.7
Razzle	Tool zur Erstellung von React-Apps	4.0.4
Reagiere	Web-Framework	17.0.2
React Media	Medienabfragen im React-Code	1.10.0
React Router (DOM)	Bibliothek zur Verwaltung von React-Routen	5.2.0
React Testing Bibliothek	Unit Testing Bibliothek für React	11.1.0
react-animations	React CSS Animation Bibliothek	1.0.0
React Focus Lock	Bibliothek zur Erfassung des Tastaturfokus	2.5.0
react-md-editor	Markdown-Editor	3.3.6
React-Redux	React-Unterstützungsbibliothek für Redux	7.2.2
Redux	Staatliche Verwaltungsbibliothek	4.0.5
Redux-Persist	Bibliothek zum Speichern des Redux-Status	6.0.0
Ruby	Von Rails verwendete Sprache	2.7.0p0
selenium-webdriver	Framework für Browser-Tests	4.0.0-beta.1
Märchenbuch	Komponenten-Galerie-System	6.2.9
TweenOne	React Animation Bibliothek	2.7.3
Typoskript	Typsichere Erweiterung für JavaScript	4.1.2
Webpacker	Tool zum Hinzufügen von React zu Rails-Anwendungen	4.3.0
Workbox	Bibliothek zur Erstellung von Servicekräften	5.1.3
Garn	Ein weiterer Node-Paketmanager	1.22.10

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.

Constant width italic

Zeigt Text an, der durch vom Benutzer eingegebene Werte oder durch kontextabhängige Werte ersetzt werden soll.

Tipp

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

Hinweis

Dieses Element steht für einen allgemeinen Hinweis.

Warnung

Dieses Element weist auf eine Warnung oder einen Warnhinweis hin.

Code-Beispiele verwenden

Zusätzliches Material (Code-Beispiele, Übungen usw.) steht unter https://github.com/dogriffiths/ReactCookbook-source 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 eineGenehmigung erforderlich.

Wir freuen uns über eine Namensnennung, verlangen sie aber in der Regel nicht. Eine Quellenangabe umfasst normalerweise den Titel, den Autor, den Verlag und die ISBN. Ein Beispiel: "React Cookbook von David Griffiths und Dawn Griffiths (O'Reilly). Copyright 2021 Dawn Griffiths und David Griffiths, 978-1-492-08584-3."

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 http://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/react-cb 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 http://oreilly.com.

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

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

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

Danksagungen

Wir möchten unserem sehr geduldigen Redakteur Corbin Collins für seine Hilfe und seine Ratschläge im vergangenen Jahr danken. Seine ruhige, gute Laune hat uns während des Schreibprozesses immer wieder auf die Sprünge geholfen. Wir möchten auch Amanda Quinn, Senior Content Acquisition Editor bei O'Reilly Media, dafür danken, dass sie das Buch in Auftrag gegeben hat, sowie Danny Elfanbaum und dem Produktionsteam bei O'Reilly für die Realisierung der physischen und elektronischen Version.

Ein besonderer Dank geht auch an Sam Warner und Mark Hobson für ihre sehr strenge Prüfung des Materials in diesem Buch.

Wir sind auch den Entwicklern dankbar, die an den vielen Open-Source-Bibliotheken arbeiten, die das React-Ökosystem unterstützen. Wir sind ihnen allen dankbar, vor allem dafür, wie schnell sie auf Fehlerberichte oder Hilferufe reagiert haben.

Wenn du diese Rezepte nützlich findest, liegt das vor allem an der Arbeit dieser Menschen. Wenn du Fehler im Code oder im Text findest, liegt das allein in unserer Verantwortung.