3.19 organisation des fichiers de composant

Au fil des vidéos, le dossier de notre projet React s'est rempli de nombreux fichiers : composants, styles, sous-composants... Pour éviter de se perdre, et surtout pour rendre le projet maintenable en équipe, il est essentiel de bien organiser ses fichiers en dossiers thématiques. C'est ce que nous faisons dans cette vidéo.

Structure recommandée

  • Un dossier Depenses pour les composants métier (DepenseItem, DepenseDate, Depenses).
  • Un dossier UI pour les composants génériques réutilisables (Card).
  • Chaque composant garde son fichier .js et son fichier .css.
  • Mettre à jour les imports pour refléter les nouveaux chemins.

Dans le dossier components, nous créons deux sous-dossiers : Depenses et UI. Dans Depenses, nous déplaçons tous les fichiers liés aux dépenses (DepenseItem.js, DepenseItem.css, DepenseDate.js, DepenseDate.css, Depenses.js, Depenses.css). Dans UI, nous plaçons Card.js et Card.css, qui sont génériques et peuvent être réutilisés partout. Après ce déplacement, il faut ajuster les chemins d'import. 

src/
  components/
    Depenses/
      DepenseItem.js
      DepenseItem.css
      DepenseDate.js
      DepenseDate.css
      Depenses.js
      Depenses.css
    UI/
      Card.js
      Card.css
  App.js
  index.js

Cette organisation devient indispensable dès que le projet grandit. En entreprise, vous travaillerez sur des codebases avec des dizaines voire des centaines de composants : sans une structure claire, le projet devient ingérable. Prenez l'habitude de bien ranger dès le début, votre futur vous (et vos collègues) vous remercieront.

En résumé

Cette leçon explique comment organiser efficacement les fichiers de composants React en créant une hiérarchie logique de dossiers. L'approche présentée consiste à créer des dossiers conteneurs pour chaque composant afin de regrouper ses fichiers JavaScript et CSS associés. Cette pratique devient essentielle pour naviguer sans confusion dans des projets complexes contenant de nombreux fichiers, particulièrement en environnement professionnel avec d'autres développeurs.

Points clés

  • Créer une hiérarchie de dossiers pour organiser les fichiers de composants par fonctionnalité ou domaine
  • Regrouper les fichiers associés d'un composant (JavaScript et CSS) dans le même dossier conteneur
  • Suivre une convention de nommage claire et cohérente pour éviter la confusion dans les gros projets
  • Adapter cette organisation à la complexité du projet et aux conventions de l'équipe
  • L'organisation des fichiers est critique en mission client pour faciliter la collaboration entre développeurs

Questions fréquentes

Pourquoi l'organisation des fichiers est-elle importante en React ?

L'organisation des fichiers permet de naviguer rapidement dans un projet complexe. En mission client avec plusieurs développeurs, une structure claire évite la confusion et améliore la productivité. Sans cette organisation, on risque de se perdre dans une multitude de fichiers.

Comment organiser les fichiers d'un composant React ?

Créez un dossier conteneur pour chaque composant majeur, puis regroupez-y tous ses fichiers associés : le fichier JavaScript du composant et son fichier CSS correspondant. Cette approche facilite la maintenabilité et la localisation des fichiers.

Cette organisation est-elle obligatoire ou flexible ?

C'est une bonne pratique flexible. Vous pouvez l'adapter selon vos besoins et les conventions de votre équipe, mais il est important de maintenir une cohérence tout au long du projet pour éviter de vous perdre dans les fichiers.