Published on

Quelle structure de fichiers pour un projet React en 2022 ?

Voici comment structurer un projet React en 2022 afin de respecter les bonnes pratiques et surtout que votre projet soit scalable dans le temps. L'idée d'une bonne structure est d'avoir une architecture de dossiers / fichiers lisible par tous et de se rendre directement au bon endroit sans avoir besoin de chercher trop longtemps pour intervenir sur le projet. Il faut voir également ce concept dans le temps et de comprendre qu'il est plus agréable de revenir sur du code bien structurer dans 6 mois que de devoir chercher.

Structure du dossier components

Cela semble logique, mais ce n'est pas toujours le cas, il est impératif d'avoir l'ensemble de vos composants dans un dossier components, hors de question de laisser trainer des fichiers avec des composants voire des bouts de composant à droite et à gauche. Vous pouvez créer des dossiers par compensant, même si celui-ci est pas très gros, vous pourrez y séparer le style, les tests et tout le reste des éléments qui concerne le composant en question.

Chaque dossier doit commencer par une majuscule, n'oublions pas que l'on fait référence aux composants et qu'il est important en React.js de bien mettre des majuscules lors que l'on évoque un compensant.

- src
-- components
--- Header
---- index.js
---- style.css
---- __test__
----- header.text.js
- App.js
- Readme.md

Le dossier test est pratique pour y intégrer vos tests, si vous souhaitez une structure plus simple vous pouvez rajouter directement un fichier header.test.js directement dans le dossier de votre composant Header. Le dossier test est plus pratique pour découper les tests sur des componsants plus importants, essayez d'harmoniser le tout et d'utiliser la même convention partout.

Un dossier spécifique pour les hooks

Comme pour les components, vous pouvez créer un dossier spécifique pour vos hooks, une très bonne façon d'optimiser le temps de recherche et d'implémentation d'un nouveau hooks dans votre projet. Tout comme les componsants, vous pouvez structurer vos tests comme vous le souhaitez, mais utilisez toujours le même schéma.

- src
-- components
-- hooks
--- useOnScroll
---- index.js
---- __test__
----- useOnScroll.test.js
- App.js
- Readme.md

Structurer les features

C'est à mon sens le plus important dossier à structurer pour garantir une maintenabilité, sans ce dossier vous pouvez très rapidement tomber dans une mauvaise organisation qui va peser tout le long du projet. L'avantage de répartir les fonctionnalités dans un dossier bien précis permet également d'organiser plus facilement le travail en équipe et d'éviter les conflits dans votre GIT flow.

- src
-- components
-- hooks
-- features
--- user
---- profile.feature.js
---- singles.feature.js
---- index.js
--- comments
---- reply.feature.js
---- index.js
- App.js
- Readme.md

Redux & Redux Saga

Si vous utilisez Redux voici comment bien structurer votre dossier, vous pouvez y ajouter vos sagas également, si vous utilisez un autres state manager celui est très similaire. Il faut découper votre dossier de façon logique, découper au maximum sans aller dans la suroptimisation et trop découpé. Voici un exemple simple avec des utilisateurs, des articles de blogs et des commentaires que j'ai découpés logiquement en trois parties pour répondre aux besoins de mon application React.

- src
-- components
-- hooks
-- features
-- redux
--- user
---- user.reducer.js
---- user.actions.js
---- user.sagas.js
---- index.js
- App.js
- Readme.md

Dans mon dossier user je retrouve uniquement ce qui concerne mon utilisateur, avec un fichier index qui vient exporter le reducer, mes sages et retourner un objet avec mes actions. Il est possible d'inclure une exportation des constantes de type également ou de le faire dans un fichier supplémentaire. N'oubliez pas de préfixer les types avec le nom de votre reducer par exemple ici pour récupérer les informations de mon utilisateur mon type va ressemble à cela : @user/getMe si vous voyez cette action passer dans votre Redux Dev Tools vous savez rapidement à quel endroit intervenir.

Créer un dossier pour les appels API

Tout comme le dossier redux, je conseille de créer un dossier api ou requests pour y inclure l'ensemble des APIs que vous allez utiliser dans votre projet. Le but ici est de centraliser les différentes routes, réparties logiquement en fonction de vos besoins.

- src
-- components
-- hooks
-- features
-- redux
-- requests
--- user.api.js
--- singles.api.js
--- comments.api.js
- App.js
- Readme.md

Un seul dossier pour localiser les différents appels aux webservices, une seule source d'erreur si vous identifier une anomalie venant des appels.

Créer un dossier pour vos helpers ou fonctions utiles

Dans le dossier utils on va retrouver les fonctions génériques à l'application, un peu comme des helpers des petites fonctions de transformations ou de qui retournent des informations assez basiques de votre application. Contrairement aux dossiers précédents, il est préférable de le structurer par fonction, tout ce qui va concerner des transformations de textes par exemple ira dans text.js, les dates dans un dates.js et ainsi de suite. Il faut identifier rapidement le scope du fichier pour s'y rendre en cas de nécessité, de se rendre compte qu'il existe déjà une fonction qui fait ce que je veux ou pas et qu'il n'y ai pas 10 fichiers à parcourir.

- src
-- components
-- hooks
-- features
-- redux
-- requests
-- utils
--- text.js
--- dates.js
--- commons.js
- App.js
- Readme.md

Conclusions

Cette structure est adaptable si vous utilisez d'autres librairies dans votre projet, l'essentiel est de comprendre pourquoi il faut découper tout de suite votre projet, si vous ne le faites pas directement il y a de forte chance que vous ne le fassiez par plus tard et c'est à ce moment que vous risquer de perdre du temps, quand vous y serez obligé..

Vous l'avez compris il est important de structurer son projet que ce soit pour vous y revenir dans plusieurs mois ou pour une autre personne de votre équipe. Prenez ce réflexe, même sur des projets plus modestes, une fois que vous aurez cet automatisme vous ne voudrez plus revenir en arrière tellement ça vous simplifie la vie d'avoir les choses au bon endroit.