Une application React scalable par sa structure

Benjamin ROSSIN

a publié le : 26/04/2023

Lorsque l’on commence un projet, il est important de se projeter dans l’avenir de celui-ci de manière à pouvoir le faire évoluer dans les meilleures conditions. De nos jours, il existe de nombreux frameworks et librairies. Certains sont plus directifs contrairement à d’autres qui nous laissent plus libre dans la manière de structurer nos projets.

Chaque développeur peut donc avoir sa manière d’organiser son application React.
React étant une librairie n’imposant aucune structure spécifique contrairement à d’autres de ses concurrents comme Angular.

Introduction

Vous est-il déjà arrivé de vous demander comment vous alliez bien pouvoir structurer votre projet React ?
Ou cette phrase vous revient-elle souvent en tête : “Hmm mince, où est-ce que j’ai pu mettre ce fichier ? 🤔”

N’oublions pas non plus les nouveaux arrivants sur votre projet qui pourraient être complètement perdus, ne pas arriver à se repérer et ne pas comprendre comment votre application fonctionne.

Cette article vise à vous sensibiliser sur l’importance de l’organisation et vous présenter la structure que j’utilise majoritairement, libre à vous de l’adapter selon vos préférences personnelles par la suite.

Un code regroupé par fonctionnalité

Le principe de cette structure est de regrouper notre code par rapport aux différentes fonctionnalités présentes sur notre application. Dans ce cas, pour présenter la structure, nous partons sur une gestion de todo list.
À noter : cet exemple utilise Typescript et Next js mais vous pouvez faire sans.

PUBLIC ET SRC

Le dossier /public sera utilisé pour stocker toutes vos assets, c’est ici que vous allez mettre vos images, fonts, svg etc…
Quant au dossier /src, c’est dans celui-ci que sera stocké tout le code source de notre application.

FEATURES

Nous avons évoqué le fait que cette structure imposait de regrouper notre code par fonctionnalité.
Dans cet exemple nous souhaitons créer une todo list donc nous allons définir les todos comme une fonctionnalité.

Chaque fonctionnalité va se décomposer en plusieurs dossiers qui sont tous liés uniquement à la fonctionnalité dans laquelle ils se trouvent.

  • /components : contient les composants
  • /constants : définit les constantes
  • /contexts : contient les contextes React, ils permettent de créer un état global
  • /hooks : contient des hooks customs permettant d’écrire de la logique réutilisable
  • /services : contient les méthodes ou requêtes qui nous permettent d’interagir avec une api externe
  • /types (optionnel) : utile uniquement lorsque l’on utilise Typecript, c’est ici qu’on crée les différents types de notre fonctionnalité
  • /utils : contient des méthodes utilitaires

Bien évidemment la liste des fonctionnalités varie d'un projet à l’autre, hormis le dossier common qui sera toujours présent. /common regroupe le code qui peut être utilisé et partagé dans d’autres fonctionnalités. Globalement, la structure reste la même. Seul le dossier /components diffère légèrement. Au lieu de déposer directement nos composants à la racine, on les catégorise en 3 dossiers :

  • /ui : contient les composants utilisés pour créer notre interface utilisateur (ex: Button, Tag, Input etc…)
  • /layouts : contient les éléments de templates de nos pages (ex: Sidebar, DefaultLayout, Navbar etc…)
  • /elements : contient les composants qui n’appartiennent à aucune fonctionnalité en particulier et qui sont un peu plus complexe que ceux de l’ui

PAGES

Le dossier /pages contient une liste de composant dont chacun correspond à une page, rien de plus. Il n’aura pas pour but de stocker de la logique mais simplement d’afficher et joindre des fonctionnalités entre elles.

STYLES

Le dossier /styles sera composé des différentes feuilles de style permettant de designer votre application. Libre à vous d’utiliser du CSS, SASS, SCSS etc…

Clean imports

La manière d'importer nos fichiers va de pair avec la structure de notre projet.
Voici quelques méthodes pour simplifier nos imports.

Lorsque l'on travaille sur un projet React, il est facile de se retrouver avec une quantité assez importante de fichiers importés dans chacun de nos composants. Cela peut rendre le code difficile à lire et à comprendre, surtout lorsque les fichiers importés ont des noms similaires ou sont situés dans des dossiers différents. Des imports propres sont importants car ils rendent le code plus facile à lire et à comprendre.

Comment créer des imports clean ?

La première étape pour créer des imports clean est de bien organiser votre code en utilisant une structure de dossier cohérente. Nous avons déjà discuté de la manière dont vous pouvez organiser vos dossiers plus haut. En utilisant une structure de dossiers cohérente, vous pouvez facilement retrouver les fichiers dont vous avez besoin et les importer dans vos composants.

Une autre astuce pour créer des imports clean est d'utiliser des alias. Les alias sont des raccourcis qui vous permettent d'importer des fichiers en utilisant un nom plus court et plus facile à comprendre. Par exemple, au lieu d'importer un fichier à partir d'un chemin relatif, vous pouvez utiliser un alias personnalisé pour importer rapidement et facilement vos fichiers. Cela rend également vos imports plus faciles à lire.

Voici un exemple d'alias personnalisés, ils se configurent dans un fichier tsconfig.json pour typescript ou jsconfig.json pour javascript.
Il se situe à la racine de votre projet.

/tsconfig.json


"baseUrl": ".",
"paths": {
   "@common/*": ["src/features/common/*"],
   "@features/*": ["src/features/*"],
   "@styles/*": ["src/styles/*"]
}

Cela vous permet d'importer des fichiers en utilisant un chemin d'accès plus court et plus facile à lire.

Enfin, vous pouvez également utiliser des fichiers d'index pour organiser vos imports. Les fichiers d'index sont des fichiers qui contiennent des liens vers d'autres fichiers de votre projet. En utilisant des fichiers d'index, vous pouvez facilement importer plusieurs fichiers à partir d'un seul fichier. Cela rend vos imports plus propres et plus faciles à gérer.

/src/features/todo/components/index.ts


import TodosList from '@features/todo/components/TodosList/TodosList';
import TodoForm from '@features/todo/components/TodoForm/TodoForm';
import TodoCard from '@features/todo/components/TodoCard/TodoCard';


export { TodosList, TodoForm, TodoCard };
/src/pages/index.tsx


avant :
import TodoForm from "@features/todo/components/TodoForm/TodoForm";
import TodoList from "@features/todo/components/TodosList/TodosList";


après :
import { TodoForm, TodosList } from '@features/todo/components';

Créer des imports clean est essentiel pour maintenir votre code React organisé et facile à comprendre. En utilisant une structure de dossier cohérente, des alias personnalisés et des fichiers d'index, vous pouvez facilement organiser vos imports. De cette manière, vous faciliterez la collaboration avec d'autres développeurs et garantirez que votre application est facilement maintenable et extensible.

En résumé

La création d'un projet React scalable peut être un défi, mais en utilisant une structure de dossiers modulaire et hiérarchique, des alias et des imports clean nous pouvons créer des projets React qui sont facilement maintenables et évolutifs.