Question 1

Was ist ein CSS Module in React?

Accepted Answer

CSS Modules generieren automatisch eindeutige Klassennamen, indem sie dem Klassennamen einen Hash hinzufügen, was Style-Konflikte zwischen Komponenten verhindert. Jede CSS Module-Datei hat ihren eigenen lokalen Scope, im Gegensatz zu traditionellen globalen Stylesheets. Dieser Ansatz ermöglicht das Schreiben modularer Styles ohne das Risiko versehentlicher Überschreibungen in anderen Komponenten.

Question 2

Was ist der Hauptvorteil von styled-components?

Accepted Answer

Styled-components ermöglicht das Schreiben von CSS direkt in JavaScript-Dateien mithilfe von Template Literals, was die Erstellung dynamischer Styles basierend auf Komponenten-Props erleichtert. Dieser Ansatz eliminiert das manuelle Mapping zwischen CSS-Klassen und Komponenten und stellt sicher, dass nur Styles von gemounteten Komponenten in die Seite injiziert werden. Die Kolokalisation von Styles mit der Komponentenlogik verbessert auch die Code-Wartbarkeit.

Question 3

Wie importiert man ein CSS Module in eine React-Komponente?

Accepted Answer

Um ein CSS Module zu importieren, verwende die Standard-JavaScript-Importsyntax mit einem Dateinamen, der auf .module.css endet, und weise das Ergebnis einer Variable zu, die ein Objekt mit den transformierten Klassennamen enthält. Standardmäßig wird diese Variable oft 'styles' genannt. Klassen können dann über das className-Attribut mit Objektnotation angewendet werden. Dieser Ansatz stellt sicher, dass Klassennamen eindeutig und auf die Komponente begrenzt sind.

Styling & CSS-in-JS

Was ist ein CSS Module in React?

Antwort

Was ist der Hauptvorteil von styled-components?

Antwort

Wie importiert man ein CSS Module in eine React-Komponente?

Antwort

Was ist das Hauptmerkmal von Tailwind CSS?

Was ist der Hauptnachteil von Inline-Styles in React?

Weitere React / Next.js-Interviewthemen

JavaScript-Grundlagen

React-Grundlagen

React Hooks

Komponentenlebenszyklus

React Router

Zustandsverwaltung mit Context

Formulare & Controlled Components

Datenabruf & API

React Query (TanStack Query)

Next.js Grundlagen

TypeScript mit React

Next.js Data Fetching

Next.js Server Actions

Routing & Navigation in Next.js

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware & Auth

React Testing

Zustand State Management

React Performance-Optimierung

Error Boundaries & Error Handling

Advanced React Patterns

Erweiterte Next.js-Funktionen

Next.js Deployment & Produktion

Architecture & Design Patterns

React Server Components

Next.js Internationalisierung

React Sicherheit & Best Practices

Meistere React / Next.js für dein nächstes Interview