React-Ressourcen

Während wir alle CSS für unser Tutorial in einer einzigen index.css-Datei gehalten haben, ist es in React-Anwendungen üblich, für jede Komponente eigene Stylesheets zu definieren. In einer Anwendung auf Basis von Vite kann dies durch das Erstellen einer CSS-Datei und deren Import in das zugehörige Komponenten-Modul erfolgen.

Zum Beispiel könnten wir eine eigene Form.css-Datei erstellen, um das CSS zu verwalten, das sich auf die <Form /> Komponente bezieht, und dann die Styles in Form.jsx importieren, so:

import Form from "./Form";
import "./Form.css";

Diese Methode macht es einfach, das CSS zu identifizieren und zu verwalten, das zu einer bestimmten Komponente gehört, und es von den app-weiten Styles zu unterscheiden. Sie fragmentiert jedoch auch Ihr Stylesheet über Ihren Code hinweg, und diese Fragmentierung könnte sich möglicherweise nicht lohnen. Für größere Anwendungen mit Hunderten einzigartiger Ansichten und vielen beweglichen Teilen macht es Sinn, komponenten-spezifische Styles zu verwenden, um die Menge an irrelevanten Code zu reduzieren, der zu einem bestimmten Zeitpunkt an den Nutzer gesendet wird.

Sie können mehr darüber und andere Ansätze zur Gestaltung von React-Komponenten im Smashing Magazine-Artikel Styling Components In React lesen.

In diesem Tutorial haben wir console.log() verwendet, um den Status und die Requisiten unserer Anwendung zu überprüfen, und Sie haben auch einige der nützlichen Warnungen und Fehlermeldungen gesehen, die React Ihnen sowohl in der CLI als auch in der JavaScript-Konsole Ihres Browsers gibt. Aber es gibt noch mehr, was wir hier tun können.

Das React DevTools-Tool erlaubt es Ihnen, die internen Bestandteile Ihrer React-Anwendung direkt im Browser zu inspizieren. Es fügt den Entwicklertools Ihres Browsers ein neues Panel hinzu, mit dem Sie den Status und die Requisiten verschiedener Komponenten inspizieren und sogar Status und Requisiten bearbeiten können, um sofortige Änderungen an Ihrer Anwendung vorzunehmen.

Dieses Screenshot zeigt unsere fertige Anwendung, wie sie in den React DevTools erscheint:

Links sehen wir alle Komponenten, aus denen unsere Anwendung besteht, einschließlich einzigartiger Schlüssel für die Elemente, die aus Arrays gerendert werden. Rechts sehen wir die Requisiten und Hooks, die unsere App-Komponente verwendet. Beachten Sie auch, dass die Form, FilterButton und Todo-Komponenten nach rechts eingerückt sind - das zeigt an, dass App ihr Parent ist. Diese Ansicht ist ideal, um Eltern-Kind-Beziehungen auf einen Blick zu verstehen und ist unverzichtbar, um komplexere Anwendungen zu verstehen.

React DevTools ist in mehreren Formen verfügbar:

• Eine Chrome-Browser-Erweiterung.
• Eine Firefox-Browser-Erweiterung.
• Eine Microsoft Edge-Browser-Erweiterung.
• Eine standalone Anwendung, die Sie mit npm oder Yarn installieren können.

Versuchen Sie, eine dieser Optionen zu installieren und verwenden Sie sie, um die App zu inspizieren, die Sie gerade erstellt haben!

Sie können mehr über React DevTools in der React-Dokumentation lesen.

In diesem Tutorial haben wir den useState()-Hook verwendet, um den Status über eine kleine Sammlung von Ereignis-Handler-Funktionen hinweg zu verwalten. Das war für Lernzwecke in Ordnung, aber es hat unsere Logik zur Statusverwaltung an die Ereignis-Handler unserer Komponente gebunden – insbesondere die des <Todo />-Komponenten.

Der useReducer()-Hook bietet Entwicklern eine Möglichkeit, unterschiedliche, aber verwandte Logik zur Statusverwaltung in einer einzigen Funktion zu konsolidieren. Er ist etwas komplexer als useState(), aber er ist ein gutes Werkzeug, das man in seinem Repertoire haben sollte. Sie können mehr über useReducer() in der React-Dokumentation lesen.

Die Anwendung, die wir in diesem Tutorial erstellt haben, nutzte Komponenten-Requisiten, um Daten von der App-Komponente zu den Kindkomponenten zu übergeben, die sie benötigten. Meistens sind Requisiten eine geeignete Methode zum Teilen von Daten; für komplexe, tief geschachtelte Anwendungen sind sie jedoch nicht immer die beste Wahl.

React bietet die Context API als eine Möglichkeit an, Daten an benötigende Komponenten bereitzustellen, ohne Requisiten durch den Komponentenbaum hindurch zu geben. Es gibt auch einen useContext-Hook, der dies erleichtert.

Falls Sie diese API selbst ausprobieren möchten, hat Smashing Magazine einen Einführungsartikel über die React Context API geschrieben.

Obwohl dieses Tutorial sie nicht erwähnt, ist es möglich, React-Komponenten mithilfe von JavaScript-Klassen zu erstellen – diese werden als Klassenkomponenten bezeichnet. Bis zur Einführung der Hooks waren Klassen die einzige Möglichkeit, Status in Komponenten einzubringen oder Rendering-Nebeneffekte zu verwalten. Sie sind immer noch die einzige Möglichkeit, um bestimmte Randfälle zu behandeln, und sie sind in älteren React-Projekten üblich. Die offiziellen React-Dokumente enthalten eine Referenz für die Component Basisklasse, empfehlen jedoch die Verwendung von Hooks, um Status und Nebeneffekte zu verwalten.

Bibliotheken wie React Testing Library machen es möglich, Unit-Tests für React-Komponenten zu schreiben. Es gibt viele Möglichkeiten, diese Tests auszuführen. Das Test-Framework Vitest baut auf Vite auf und ist ein großartiger Begleiter für Ihre Vite-gestützten React-Anwendungen. Jest ist ein weiteres beliebtes Test-Framework, das mit React verwendet werden kann.

Obwohl das Routing traditionell von einem Server und nicht von einer Anwendung auf dem Computer des Benutzers gehandhabt wird, ist es möglich, eine Webanwendung so zu konfigurieren, dass sie die Position des Browsers liest und aktualisiert und bestimmte Benutzeroberflächen rendert. Dies wird als Client-seitiges Routing bezeichnet. Es ist möglich, viele einzigartige Routen für Ihre Anwendung zu erstellen (wie /home, /dashboard oder /login).

React Router ist die beliebteste und robusteste Client-seitige Routing-Bibliothek für React. Sie ermöglicht es Entwicklern, die Routen ihrer Anwendung zu definieren und Komponenten mit diesen Routen zu verknüpfen. Außerdem bietet sie eine Reihe nützlicher Hooks und Komponenten, um die Position des Browsers und den Verlauf zu verwalten.

• Zurück
• Übersicht: JavaScript-Frameworks und -Bibliotheken
• Weiter