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 comportent 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 globale ; 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é, 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ésentent 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 lorsque vous créez un nouveau projet avec create-react-app), 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 /composants 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, ajouter un fichier index.jsx où se trouvera votre composant React. Si vous utilisez un style spécifique pour vos composants, nommer 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

Ctte 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 comportent 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 fronts peuvent être regroupés dans un dossier commun /assets. Libre à vous de créer des sous-dossiers pour différencier les contenus multimédias où 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 productif et réduire la maintenabilité de votre application.