Question 1

Qu'est-ce qu'un CSS Module dans React ?

Accepted Answer

CSS Modules génèrent automatiquement des noms de classes uniques en ajoutant un hash au nom de classe, ce qui évite les conflits de styles entre composants. Chaque fichier CSS Module a son propre scope local, contrairement aux feuilles de style globales classiques. Cette approche permet d'écrire des styles modulaires sans risque de surcharge accidentelle dans d'autres composants de l'application.

Question 2

Quel est l'avantage principal de styled-components ?

Accepted Answer

Styled-components permet d'écrire du CSS directement dans les fichiers JavaScript en utilisant des template literals, ce qui facilite la création de styles dynamiques basés sur les props du composant. Cette approche élimine le mapping manuel entre classes CSS et composants, et garantit que seuls les styles des composants montés sont injectés dans la page. Le colocalisation des styles avec la logique du composant améliore également la maintenabilité du code.

Question 3

Comment importer un CSS Module dans un composant React ?

Accepted Answer

Pour importer un CSS Module, il faut utiliser la syntaxe d'import standard JavaScript avec un nom de fichier se terminant par .module.css, et assigner le résultat à une variable qui contiendra un objet avec les noms de classes transformés. Par convention, cette variable est souvent nommée 'styles'. Les classes peuvent ensuite être appliquées via l'attribut className en utilisant la notation objet. Cette approche garantit que les noms de classes sont uniques et scopés au composant.

Styling & CSS-in-JS

Qu'est-ce qu'un CSS Module dans React ?

Réponse

Quel est l'avantage principal de styled-components ?

Réponse

Comment importer un CSS Module dans un composant React ?

Réponse

Quelle est la caractéristique principale de Tailwind CSS ?

Quel est l'inconvénient principal des styles inline dans React ?

Autres sujets d'entretien React / Next.js

Les bases de JavaScript

Fondamentaux React

React Hooks

Cycle de vie des composants

React Router

Gestion d'état avec Context

Formulaires & Composants contrôlés

Fetching de données & API

React Query (TanStack Query)

Fondamentaux Next.js

TypeScript avec React

Data Fetching Next.js

Server Actions Next.js

Routing & Navigation Next.js

API Routes Next.js

Metadata & SEO Next.js

Middleware & Auth Next.js

Testing React

Zustand State Management

Optimisation Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Fonctionnalités avancées Next.js

Déploiement & Production Next.js

Architecture & Design Patterns

React Server Components

Internationalisation Next.js

Sécurité & Best Practices React

Maîtrise React / Next.js pour ton prochain entretien