Architecture & Design Patterns
Feature-based Struktur, atomic design, clean architecture, SOLID-Prinzipien, dependency injection
1Was ist Atomic Design in React?
Was ist Atomic Design in React?
Antwort
Atomic Design organisiert React-Komponenten in 5 hierarchische Ebenen: atoms (Buttons, Inputs), molecules (einfache Formulare), organisms (Header, Footer), templates (Seitenlayout) und pages (konkrete Instanzen). Diese Methodik bietet eine konsistente und skalierbare Struktur für das Design System. Sie erleichtert die Wiederverwendung von Komponenten und die Zusammenarbeit zwischen Designern und Entwicklern durch ein gemeinsames Vokabular.
2Was ist das Hauptmerkmal einer feature-based Architektur?
Was ist das Hauptmerkmal einer feature-based Architektur?
Antwort
Die feature-based Architektur gruppiert alle Dateien einer Funktionalität im selben Ordner (Komponenten, Hooks, Styles, Tests, Typen). Dieser Ansatz fördert Co-Location und Feature-Autonomie. Jedes Feature wird ein unabhängiges Modul mit eigenen Verantwortlichkeiten, was die Wartung erleichtert und Teams ermöglicht, parallel ohne Konflikte zu arbeiten.
3Was ist das grundlegende Prinzip der Clean Architecture?
Was ist das grundlegende Prinzip der Clean Architecture?
Antwort
Clean Architecture basiert auf der Dependency Rule: Abhängigkeiten müssen immer nach innen zeigen, von äußeren Schichten (UI, Infrastruktur) zu inneren Schichten (Domain, Business Logic). Die Business-Domain sollte niemals von UI oder Frameworks abhängen. Diese Trennung ermöglicht unabhängiges Testen der Business-Logik, Framework-Wechsel ohne Code-Neuschreibung und eine entkoppelte, skalierbare Architektur.
Was bedeutet das SOLID-Prinzip 'Single Responsibility' bei einem React-Komponent?
Was ist Dependency Injection in React?
+19 Interview-Fragen
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)
Styling & CSS-in-JS
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
React Server Components
Next.js Internationalisierung
React Sicherheit & Best Practices
Meistere React / Next.js für dein nächstes Interview
Zugang zu allen Fragen, Flashcards, technischen Tests, Code-Review-Übungen und Interview-Simulatoren.
Kostenlos starten