Mettre en place une architecture pour votre application React

La librairie React n'impose aucune structure pour une application web. En effet, les développeurs sont libres de choisir l'architecture qui correspond le mieux à leurs projets React.

Cependant, ne pas avoir de structure claire et définie peut engendrer de nombreux problèmes tout au long du cycle de vie d'une application React. Le code peut être difficilement réutilisable si le projet n'est pas bien structuré et on peut avoir du mal à tester les composants React de notre application. De plus, travailler en équipe sur un projet mal architecturé rend la tâche encore plus compliquée.

C'est pour ces raisons qu'il est important de mettre en place une architecture pour votre application React.

Avantages de la création d'une architecture pour un projet React

La mise en place d'une architecture propre pour un projet React comporte un lot d'avantages non négligeable.

On retrouve trois points essentiels :

• Un code maintenable plus facilement ; avoir une structure organisée rend la gestion du code plus simple dans le temps.
• Une meilleure gestion de l'état global ; l'état de l'application React peut être mieux appréhendé avec un dossier spécifique et une architecture qui aide à mieux gérer l'état des différents composants React.
• Une facilité pour la création de tests ; mettre en place une batterie de tests de manière plus claire et optimisée.

Maintenant que nous avons vu les différents avantages d'une architecture React bien pensée, découvrons plus en détail la structure de l'application.

La structure de votre application React

Comme nous venons de le voir, avoir une application React bien structurée présente bon nombre d'avantages. Nous allons dans un premier temps créer quelques dossiers nécessaires à l'application React. Souvent (c'est notamment le cas avec Vite ou les autres générateurs de projet React actuels, create-react-app étant aujourd'hui déprécié par l'équipe React), un répertoire /src est déjà présent dans l'application React. C'est ce dossier qui va nous servir de point de départ. On y retrouve au minimum le fichier index.js.

Nous allons maintenant nous concentrer sur la création des répertoires compris dans le dossier /src.

└── /src
	├── /assets
	├── /components
	├── /views
	├── /utils
	├── App.js
	├── index.js

Gérer les composants React dans un dossier composants

Le dossier /components va servir de point d'entrée pour les différents composants de votre application React.

Lorsque vous créez un nouveau composant, créez un dossier avec le nom de celui-ci. Puis, à l'intérieur de ce nouveau dossier, ajoutez un fichier index.jsx où se trouvera votre composant React. Si vous utilisez un style spécifique pour vos composants, nommez le fichier index.styles.js. Enfin, vous pouvez gérer les tests du composant dans un fichier index.test.js.

Vous vous retrouvez alors avec une configuration similaire à celle-ci :

/components
	├── /Input
		├── index.jsx
		├── index.styles.js
		├── index.test.js

Cette structure permet de bien gérer les composants React de manière indépendante avec une architecture lisible.

Regrouper les pages de votre application React dans un seul répertoire /views

Lorsque votre application React comporte plusieurs pages, il est judicieux de les réunir dans un dossier spécifique. Ainsi, vous pouvez créer un dossier /views (ou /pages) à cet effet.

Le dossier /utils de votre architecture React

Le répertoire /utils peut vous être nécessaire si vous souhaitez séparer la logique métier de vos composants React ou lorsque certaines fonctions utilitaires globales reviennent souvent. C'est également dans ce dossier que vous pouvez ajouter vos hooks (ou créer un nouveau répertoire /hooks dans /src).

Le contenu multimédia de votre application React

Les images, les vidéos, les icônes ou encore les fonts peuvent être regroupés dans un dossier commun /assets. Libre à vous de créer des sous-dossiers pour différencier les contenus multimédias ou leurs utilités dans l'application React.

Conclusion

Comme nous venons de le voir, une architecture bien pensée nous permet de résoudre bien des problèmes que l'on peut rencontrer au fur et à mesure que notre application React grandit. L'architecture présentée ici n'est pas à prendre au pied de la lettre. Libre à vous, en fonction des besoins de votre projet React, d'ajouter des dossiers (comme un répertoire /store si vous utilisez React Redux). Attention aussi à ne pas avoir une structure avec des dossiers trop profonds qui pourraient être contre-productifs et réduire la maintenabilité de votre application.