Skip to main content

Chapitre 12 : Structuration et bonnes pratiques en React

Organisation des dossiers et fichiers, Responsabilité unique des composants, Composants de présentation vs composants logiques, Réutilisabilité et factorisation, Lisibilité et conventions

Organisation des dossiers et fichiers​

Une bonne structuration de projet facilite la compréhension, la maintenance et l’évolution d’une application React. En général, on regroupe les fichiers par fonctionnalité (feature-based) ou par type (components, hooks, services, pages). Une structure claire permet à un nouveau développeur de comprendre rapidement où se trouve le code et à quoi il sert. Il est aussi recommandé de garder les composants, styles et tests associés proches les uns des autres.

Cas concrets:

Organisation par type
![][image2]

Organisation par fonctionnalité (recommandé, souvent ce qui est utilisé pour les gros projets)

![][image3]

Pour une feature, il est courant de regrouper, dans un même dossier, tous les fichiers liés qui y sont liés : le composant React principal, les sous-composants, les styles, les tests, les services, etc... Cette pratique permet de retrouver rapidement tout ce qui concerne un composant et d'améliorer la maintenabilité du code.

Enfin, quelle que soit la structure choisie, l’objectif principal reste la lisibilité. Une structure simple, cohérente et partagée par l’équipe est toujours préférable à une organisation trop complexe ou sur-optimisée.

Responsabilité unique des composants​

Chaque composant React doit idéalement avoir une responsabilité unique. Cela signifie qu’un composant ne devrait faire qu’une seule chose, et la faire bien. Cette approche rend les composants plus simples, plus faciles à tester et à réutiliser. Si un composant devient trop long ou trop complexe, c’est souvent un signal qu’il doit être découpé en plusieurs sous-composants.

Composants de présentation vs composants logiques​

Une bonne pratique consiste à distinguer les composants qui gèrent la logique (état, appels API, calculs) de ceux qui se concentrent sur l’affichage.
Les composants de présentation reçoivent des données via les props et affichent l’interface, tandis que les composants logiques orchestrent le comportement de l’application. Cette séparation améliore la lisibilité et favorise la réutilisation des composants visuels.

Réutilisabilité et factorisation​

React encourage la création de composants réutilisables. Lorsqu’un même morceau d’interface ou de logique est utilisé à plusieurs endroits, il est préférable de le factoriser dans un composant ou un hook personnalisé. Cela évite la duplication de code, réduit les erreurs et facilite les évolutions futures.

Lisibilité et conventions​

Un code lisible est aussi important qu’un code fonctionnel. L’utilisation de conventions claires améliore la compréhension du projet :

  • nom des composants en PascalCase
  • nom des hooks avec le préfixe use et en camelCase
  • bonne indentation
  • nommer ses composants, fonctions, hooks etc de manière claire

Questions clés (validation des acquis du chapitre)​

  • Pourquoi est-il important de bien structurer un projet React ? Une bonne structuration permet de mieux comprendre le projet, de faciliter la maintenance, d’améliorer la collaboration en équipe et de rendre l’application plus évolutive à long terme.
  • Qu’entend-on par “responsabilité unique” d’un composant ? Un composant doit avoir un seul rôle clairement défini. Il ne doit pas gérer plusieurs responsabilités à la fois (affichage, logique complexe, appels API, etc.), afin de rester simple, lisible et réutilisable.
  • Quelle est la différence entre un composant de présentation et un composant logique ? Un composant de présentation se concentre uniquement sur l’affichage et reçoit ses données via les props et est générique. Un composant logique gère l’état, la logique métier et les interactions, puis transmet les données aux composants de présentation.
  • Pourquoi la réutilisabilité est-elle un objectif important en React ? La réutilisabilité permet d’éviter la duplication de code, de réduire les erreurs et de faciliter les évolutions. Un composant réutilisable peut être utilisé à plusieurs endroits sans être réécrit.

Exercices :​

Exercice 1 - Organiser son code​

Propose une structure de dossiers pour une application React contenant :

  • une page d’accueil
  • une page de profil utilisateur
  • des composants réutilisables (bouton, modal)
  • des appels API vers un serveur

Présente la structure sous forme d’arborescence de dossiers.

Exercice 2 – Responsabilité unique​

On te fournit un composant React qui :

  • affiche une liste d’utilisateurs
  • gère un état de chargement
  • effectue un appel API

Identifie les différentes responsabilités de ce composant et propose un découpage en plusieurs composants plus simples.