React-Ressourcen

Komponentenspezifische Stile

Während wir alle CSS für unser Tutorial in einer einzigen index.css-Datei gehalten haben, ist es in React-Anwendungen üblich, pro Komponente Stylesheets zu definieren. In einer von Vite unterstützten Anwendung kann dies durch Erstellen einer CSS-Datei und deren Import in das entsprechende Komponentenmodul erfolgen.

Zum Beispiel: Wir könnten eine eigene Form.css-Datei geschrieben haben, um das CSS für die <Form />-Komponente unterzubringen, und die Stile dann in Form.jsx importiert haben, wie folgt:

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

Dieser Ansatz macht es einfach, 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 Ihre Codebasis, und diese Fragmentierung könnte sich nicht lohnen. Für größere Anwendungen mit Hunderten von einzigartigen Ansichten und vielen sich ändernden Teilen macht es Sinn, komponentenspezifische Stile zu verwenden und dadurch die Menge des irrelevanten Codes zu begrenzen, der zu einem bestimmten Zeitpunkt an Ihre Nutzer gesendet wird.

Weitere Informationen über diesen und andere Ansätze zur Gestaltung von React-Komponenten finden Sie im Artikel von Smashing Magazine, Styling Components In React.

React DevTools

Wir haben console.log() verwendet, um den Zustand und den Props unserer Anwendung in diesem Tutorial zu überprüfen, und Sie haben sicher 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 mehr, was wir hier tun können.

Das React DevTools-Utility ermöglicht es Ihnen, das Innenleben Ihrer React-Anwendung direkt im Browser zu inspizieren. Es fügt den Entwickler-Tools Ihres Browsers ein neues Panel hinzu, mit dem Sie den Zustand und die Props verschiedener Komponenten inspizieren und sogar den Zustand und die Props bearbeiten können, um sofortige Änderungen an Ihrer Anwendung vorzunehmen.

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

Links sehen wir alle Komponenten, die unsere Anwendung ausmachen, einschließlich eindeutiger Schlüssel für die Elemente, die aus Arrays gerendert werden. Auf der rechten Seite sehen wir die Props und Hooks, die unsere App-Komponente verwendet. Beachten Sie auch, dass die Komponenten Form, FilterButton und Todo nach rechts eingerückt sind – dies zeigt an, dass App ihr übergeordnetes Element ist. Diese Ansicht ist hervorragend, um Eltern-Kind-Beziehungen auf einen Blick zu verstehen und ist unverzichtbar, 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 stand-alone Anwendung, die Sie mit npm oder Yarn installieren können.

Versuchen Sie, eine davon zu installieren, und nutzen Sie sie, um die von Ihnen gerade gebaute App zu inspizieren!

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

Der useReducer() Hook

In diesem Tutorial haben wir den useState() Hook verwendet, um den Zustand über eine kleine Sammlung von Ereignishandlerfunktionen zu verwalten. Dies war für Lernzwecke ausreichend, aber es ließ unsere Zustandslogik mit den Ereignishandlern unserer Komponente – insbesondere denen der <Todo /> Komponente – verknüpft.

Der useReducer() Hook bietet Entwicklern die Möglichkeit, unterschiedliche, aber verwandte Zustandslogik in eine einzige Funktion zu konsolidieren. Er ist etwas komplexer als useState(), aber ein gutes Werkzeug, um es in Ihrem Gürtel zu haben. Sie können mehr über useReducer() in den React-Dokumentationen lesen.

Die Context API

Die Anwendung, die wir in diesem Tutorial gebaut haben, nutzte Komponenten-Props, um Daten von ihrer App-Komponente an die untergeordneten Komponenten zu übergeben, die sie benötigen. 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 Context API als Möglichkeit, Daten an Komponenten bereitzustellen, die sie benötigen, ohne Props durch den Komponentenbaum 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 React Context geschrieben.

Klassenkomponenten

Obwohl dieses Tutorial sie nicht erwähnt, ist es möglich, React-Komponenten mit JavaScript-Klassen zu erstellen – diese werden als Klassenkomponenten bezeichnet. Bis zur Einführung der Hooks waren Klassen der einzige Weg, um Zustand in Komponenten zu bringen oder Seiteneffekte des Renderings zu verwalten. Sie sind immer noch der einzige Weg, um bestimmte Randfälle zu behandeln, und sind in älteren React-Projekten häufig anzutreffen. Die offiziellen React-Dokumentationen pflegen eine Referenz für die Component Basisklasse, empfehlen jedoch die Verwendung von Hooks zur Verwaltung von Zustand und Seiteneffekten.

Testen

Bibliotheken wie die React Testing Library ermöglichen es, 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 von Vite unterstützten React-Anwendungen. Jest ist ein weiteres beliebtes Test-Framework, das mit React verwendet werden kann.

Routing

Während 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 den Speicherort 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 zum Beispiel /home, /dashboard oder /login).

React Router ist die beliebteste und robusteste Client-seitige Routing-Bibliothek für React. Es ermöglicht Entwicklern, die Routen ihrer Anwendung zu definieren und Komponenten mit diesen Routen zu verknüpfen. Es bietet auch eine Reihe von nützlichen Hooks und Komponenten zur Verwaltung des Speicherorts und der Historie des Browsers.

Zusammenfassung

Das war es für JavaScript-Frameworks. Wir hoffen, dass Ihnen dieses Modul eine gute Vorstellung davon gegeben hat, warum Frameworks existieren und wie man sie verwendet.

Im nächsten Modul konzentrieren wir uns auf die Web-Barrierefreiheit.

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