Styling-Optionen in React

React erzwingt keine bestimmte Methode zur Gestaltung von Komponenten. Stattdessen bietet es Flexibilität bei der Auswahl, wie Styles entsprechend den Projektanforderungen angewendet werden.

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 über das style-Attribut und JavaScript-Objekte auf Elemente 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 Drittanbieter-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 Styling-Bibliotheken leistungsfähig sind, bringen sie 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.