Stiloptionen in React

React schreibt keine bestimmte Methode zur Gestaltung von Komponenten vor. Stattdessen bietet es Flexibilität, um die Art und Weise der Anwendung von Styles an die Anforderungen des Projekts anzupassen.

Das Styling in React basiert weiterhin auf CSS. Der Unterschied liegt darin, wie Styles organisiert und auf Komponenten angewendet werden.

In diesem Kurs stehen zwei grundlegende Styling-Ansätze im Fokus:

• Inline-Styles: Styles werden direkt auf Elemente mit dem Attribut style und JavaScript-Objekten angewendet;
• Externe CSS-Dateien: Styles werden in klassischen CSS-Dateien geschrieben und über Klassennamen zugewiesen.

Styling mit Bibliotheken und Frameworks

In realen Projekten werden React-Anwendungen häufig mit externen Bibliotheken und Frameworks gestaltet. Zu den beliebten Optionen zählen:

• CSS Modules;
• Styled Components;
• Emotion;
• Tailwind CSS;
• Material UI (MUI);
• Chakra UI.

Diese Tools bieten erweiterte Funktionen wie Scoped Styles, Designsysteme und Utility-basiertes Styling.

Warum wir sie hier nicht behandeln

Obwohl leistungsfähig, bringen Styling-Bibliotheken zusätzliche Komplexität mit sich und führen neue Konzepte ein, die über das Kernwissen von React hinausgehen. In diesem Kurs liegt das Ziel darin, ein solides Fundament zu schaffen, das Verständnis für die Funktionsweise von React-Komponenten zu fördern und unnötige Ablenkungen zu Beginn zu vermeiden.