# Architecture & Design Patterns (React / Next.js)

> Feature-based structure, atomic design, clean architecture, SOLID principles, dependency injection

- 22 questions d'entretien
- Senior
- [Questions d'entretien: React / Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien.md)

## 1. Qu'est-ce que l'Atomic Design dans React ?

**Réponse**

L'Atomic Design organise les composants React en 5 niveaux hiérarchiques : atoms (boutons, inputs), molecules (formulaires simples), organisms (header, footer), templates (layout de page), et pages (instances concrètes). Cette méthodologie apporte une structure cohérente et scalable au design system. Elle facilite la réutilisation des composants et la collaboration entre designers et développeurs en partageant un vocabulaire commun.

## 2. Quelle est la principale caractéristique d'une architecture feature-based ?

**Réponse**

L'architecture feature-based regroupe tous les fichiers liés à une fonctionnalité dans un même dossier (composants, hooks, styles, tests, types). Cette approche favorise la co-location et l'autonomie des features. Chaque feature devient un module indépendant avec ses propres responsabilités, ce qui facilite la maintenance et permet aux équipes de travailler en parallèle sans conflits.

## 3. Quel est le principe fondamental de la Clean Architecture ?

**Réponse**

La Clean Architecture repose sur la Dependency Rule : les dépendances doivent toujours pointer vers l'intérieur, des couches externes (UI, infrastructure) vers les couches internes (domain, business logic). Le domaine métier ne doit jamais dépendre de l'UI ou des frameworks. Cette séparation permet de tester la logique métier indépendamment, de changer de framework sans réécrire le code métier, et de maintenir une architecture découplée et évolutive.

## 19 questions supplémentaires disponibles

- Que signifie le principe SOLID 'Single Responsibility' appliqué à un composant React ?
- Qu'est-ce que l'injection de dépendances en React ?

S'inscrire gratuitement: https://sharpskill.dev/fr/login

## Autres sujets d'entretien React / Next.js

- [Les bases de JavaScript](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/javascript-essentials.md): 25 questions, Junior
- [Fondamentaux React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-fundamentals.md): 20 questions, Junior
- [React Hooks](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-hooks.md): 22 questions, Junior
- [Cycle de vie des composants](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/component-lifecycle.md): 18 questions, Junior
- [React Router](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-router.md): 20 questions, Junior
- [Gestion d'état avec Context](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/state-management-context.md): 18 questions, Junior
- [Formulaires & Composants contrôlés](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/forms-controlled-components.md): 20 questions, Confirmé
- [Fetching de données & API](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/fetching-data-api.md): 20 questions, Confirmé
- [React Query (TanStack Query)](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-query-tanstack.md): 20 questions, Confirmé
- [Styling & CSS-in-JS](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/styling-css-in-js.md): 18 questions, Confirmé
- [Fondamentaux Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-fundamentals.md): 25 questions, Confirmé
- [TypeScript avec React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/typescript-react.md): 20 questions, Confirmé
- [Data Fetching Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-data-fetching.md): 24 questions, Confirmé
- [Server Actions Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-server-actions.md): 20 questions, Confirmé
- [Routing & Navigation Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-routing-navigation.md): 22 questions, Confirmé
- [API Routes Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-api-routes.md): 20 questions, Confirmé
- [Metadata & SEO Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-metadata-seo.md): 18 questions, Confirmé
- [Middleware & Auth Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-middleware-auth.md): 22 questions, Confirmé
- [Testing React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-testing.md): 20 questions, Confirmé
- [Zustand State Management](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/zustand-state-management.md): 18 questions, Confirmé
- [Optimisation Performance React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-performance-optimization.md): 22 questions, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-error-boundaries.md): 18 questions, Senior
- [Advanced React Patterns](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/advanced-react-patterns.md): 20 questions, Senior
- [Fonctionnalités avancées Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-advanced-features.md): 24 questions, Senior
- [Déploiement & Production Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-deployment-production.md): 20 questions, Senior
- [React Server Components](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-server-components.md): 26 questions, Senior
- [Internationalisation Next.js](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/nextjs-internationalization.md): 20 questions, Senior
- [Sécurité & Best Practices React](https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-security-best-practices.md): 22 questions, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/fr/technologies/react-next/questions-entretien/react-architecture-patterns