React-Ressourcen

Obwohl wir alle CSS für unser Tutorial in einer einzigen index.css Datei gelassen haben, ist es in React-Anwendungen üblich, pro-Komponente Stylesheets zu definieren. In einer Anwendung, die von Vite unterstützt wird, kann dies durch Erstellen einer CSS-Datei und Importieren in das entsprechende Komponentenmodul erfolgen.

Zum Beispiel: Wir könnten eine dedizierte Form.css Datei geschrieben haben, um das CSS, das sich auf die <Form /> Komponente bezieht, zu beherbergen, und die Stile dann in Form.jsx importiert haben, so:

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

Dieser Ansatz erleichtert es, das CSS zu identifizieren und zu verwalten, das zu einer bestimmten Komponente gehört, und es von Ihren anwendungsweiten Stilen zu unterscheiden. Es fragmentiert jedoch auch Ihr Stylesheet über Ihren Codebereich hinweg, und diese Fragmentierung könnte sich nicht lohnen. Für größere Anwendungen mit Hunderten von einzigartigen Ansichten und vielen beweglichen Teilen macht es Sinn, komponentenbasierte Stile zu verwenden und dadurch die Menge an irrelevanten Code, der zu einem bestimmten Zeitpunkt an Ihren Benutzer gesendet wird, zu begrenzen.

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

Wir haben console.log() verwendet, um den Zustand und die Props unserer Anwendung in diesem Tutorial zu überprüfen, und Sie werden auch einige der nützlichen Warnungen und Fehlermeldungen gesehen haben, 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-Utility ermöglicht es Ihnen, die Interna Ihrer React-Anwendung direkt im Browser zu inspizieren. Es fügt den Entwicklertools Ihres Browsers ein neues Panel hinzu, das es Ihnen erlaubt, den Zustand und die Props verschiedener Komponenten zu inspizieren und sogar Zustand und Props zu bearbeiten, um sofortige Änderungen an Ihrer Anwendung vorzunehmen.

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

Links sehen wir alle Komponenten, die unsere Anwendung ausmachen, einschließlich einzigartiger Schlüssel für die Elemente, die aus Arrays gerendert werden. Rechts sehen wir die Props und Hooks, die unsere App Komponente verwendet. Beachten Sie auch, dass die Form, FilterButton und Todo Komponenten nach rechts eingerückt sind – dies zeigt an, dass App ihr Elternteil ist. Diese Ansicht ist großartig, um Eltern-Kind-Beziehungen auf einen Blick zu verstehen und ist unersetzlich, um komplexere Apps zu verstehen.

React DevTools ist in mehreren Formen verfügbar:

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

Versuchen Sie, eine davon zu installieren und dann die App, die Sie gerade gebaut haben, damit zu inspizieren!

Sie können mehr über React DevTools in den React-Dokumentationen lesen.

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

Der useReducer() Hook bietet Entwicklern eine Möglichkeit, unterschiedlich, aber verwandte Zustandsverwaltungslogik in einer einzigen Funktion zu konsolidieren. Es ist etwas komplexer als useState(), aber es ist ein gutes Werkzeug, das man im Repertoire haben sollte. Sie können mehr über useReducer() in den React-Dokumentationen lesen.

Die Anwendung, die wir in diesem Tutorial gebaut haben, nutzte Komponenten-Props, um Daten von ihrer App Komponente an die untergeordneten Komponenten weiterzugeben, die sie benötigten. Meistens sind Props eine geeignete Methode zum Teilen von Daten; für komplexe, tief verschachtelte Anwendungen sind sie jedoch nicht immer die beste Wahl.

React bietet die Kontext-API als eine Möglichkeit, Komponenten die Daten zu bieten, die sie benötigen, ohne Props entlang des Komponentenbaums zu übergeben. Es gibt auch einen useContext-Hook, der dies erleichtert.

Wenn Sie diese API selbst ausprobieren möchten, hat Smashing Magazine einen einführenden Artikel über den React-Kontext geschrieben.

Obwohl dieses Tutorial sie nicht erwähnt, ist es möglich, React-Komponenten unter Verwendung von JavaScript-Klassen zu erstellen – diese werden Klassen-Komponenten genannt. Bis zur Einführung von Hooks waren Klassen die einzige Möglichkeit, Zustand in Komponenten zu bringen oder Rendering-Nebenwirkungen zu verwalten. Sie sind immer noch die einzige Möglichkeit, bestimmte Randfälle zu behandeln und sind in älteren React-Projekten üblich. Die offiziellen React-Dokumentationen halten eine Referenz für die Component Basisklasse bereit, empfehlen jedoch die Verwendung von Hooks zur Verwaltung von Zustand und Nebenwirkungen.

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

Während 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 den Standort des Browsers liest und aktualisiert sowie bestimmte Benutzeroberflächen rendert. Dies wird Client-seitiges Routing genannt. 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 erlaubt es Entwicklern, die Routen ihrer Anwendung zu definieren und Komponenten mit diesen Routen zu verknüpfen. Sie bietet auch eine Reihe nützlicher Hooks und Komponenten zur Verwaltung des Standorts und der Historie des Browsers.

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