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.