Methoden zur Gestaltung von React-Komponenten
Es gibt viele verschiedene Möglichkeiten, React-Komponenten zu gestalten. Hier werden wir einige grundlegende davon betrachten.
Der Standardansatz, den wir anwenden können, wie bei der normalen Gestaltung von Webseiten - ist die Verwendung von globalem CSS. Hier erstellen wir eine externe gemeinsame CSS-Datei mit Stilen. Bei diesem Ansatz befinden sich alle Klassennamen im globalen Gültigkeitsbereich, was zu Konflikten zwischen ihnen führen kann. Auch kann man viele kleine CSS-Dateien erstellen. Dieser Ansatz ist bei der Erstellung großer skalierbarer Anwendungen wenig effektiv.
Der nächste Ansatz - Inline-Gestaltung,
indem wir ihn verwenden, können wir CSS-Stile inline hinzufügen,
ähnlich wie in normalem HTML. In
diesem Fall arbeiten wir mit dem Attribut
style, indem wir ihm die notwendigen
CSS-Eigenschaften übergeben. Die Anwendung einer solchen Gestaltung
gilt als schlechter Stil und wird
nur empfohlen, um dynamisch
während des Renderns berechnete Stile hinzuzufügen. Diese
Methode eignet sich gut für das schnelle Prototyping
der Schnittstelle einer einzelnen Komponente.
Die nächsten paar Methoden, die wir betrachten werden - moderne, an Popularität gewinnende, effektive Gestaltungsmethoden. Dies sind genau die Methoden, die zur Gestaltung großer skalierbarer React-Anwendungen empfohlen werden.
Die erste davon - die Anwendung der Bibliothek Styled Components, die für die Gestaltung Template-Literals verwendet. Diese Methode ermöglicht es uns, normales CSS im JS-Code zu schreiben und dabei die gesamte Funktionalität zu nutzen.
Die zweite Methode - die Anwendung von CSS-Modulen. In diesem Fall ist ein CSS-Modul eine solche CSS-Datei, in der standardmäßig alle Klassennamen und Animationen sich im lokalen Gültigkeitsbereich befinden, das heißt, sie sind nur innerhalb der Komponente zugänglich, die sie verwendet.
Bei diesen beiden letzten Methoden müssen wir keine Konflikte zwischen Klassennamen befürchten, da sie eindeutig sind - es wird das Konzept des lokalen Gültigkeitsbereichs verwendet. Auch bei ihrer Verwendung entfällt die Notwendigkeit der BEM-Methodologie.
In den folgenden Lektionen werden wir alle hier angeführten Methoden genauer betrachten.
