Structure d'un projet React typique

Décrypter l'organisation des fichiers et dossiers

Après avoir créé votre projet React avec un outil comme Create React App (CRA) ou Vite, vous vous retrouvez face à une structure de dossiers et de fichiers générée automatiquement. Comprendre cette structure est fondamental pour savoir où placer votre code, vos styles, vos images et comment l'application est assemblée et lancée. Bien que les détails puissent légèrement varier entre les outils (par exemple, Vite est souvent plus minimaliste au départ que CRA), les concepts fondamentaux restent similaires.

Cette structure standardisée n'est pas arbitraire ; elle vise à fournir une organisation logique et maintenable pour vos projets React. Elle sépare clairement le code source de l'application des fichiers publics et des dépendances externes. Examinons les principaux éléments que vous rencontrerez le plus souvent.

Les éléments à la racine du projet

Au niveau le plus haut de votre projet, vous trouverez généralement les fichiers et dossiers suivants :

• node_modules/ : Ce dossier contient toutes les dépendances externes (bibliothèques et outils comme React, ReactDOM, Webpack, Babel, etc.) que votre projet utilise. Il est géré automatiquement par npm ou yarn lorsque vous installez ou supprimez des paquets. Vous ne devriez jamais modifier manuellement le contenu de ce dossier. Il est généralement volumineux et n'est pas inclus dans le contrôle de version (grâce au fichier .gitignore).
• package.json : Le fichier d'identité de votre projet Node.js. Il contient des métadonnées importantes comme le nom du projet, sa version, mais surtout la liste des dépendances (dependencies pour la production, devDependencies pour le développement) et les scripts personnalisés (scripts, comme start, build, test) que vous pouvez exécuter avec npm ou yarn.
• package-lock.json (ou yarn.lock) : Ce fichier est généré automatiquement et enregistre les versions exactes de chaque dépendance installée. Il garantit que chaque installation du projet (par vous ou d'autres développeurs) utilisera précisément les mêmes versions de paquets, assurant des builds déterministes et évitant les problèmes liés aux mises à jour inattendues de dépendances. Il est crucial de commiter ce fichier dans votre système de contrôle de version (Git).
• .gitignore : Un fichier de configuration pour Git qui spécifie quels fichiers et dossiers doivent être ignorés et ne pas être suivis par le contrôle de version. Typiquement, il inclut node_modules/, les fichiers de build (comme le dossier build/ ou dist/), et les fichiers d'environnement locaux (.env.local).
• README.md : Un fichier au format Markdown contenant des informations sur le projet, comment l'installer, le lancer et le contribuer. C'est la documentation de base de votre projet.

Le dossier `public/` : Les actifs statiques

Le dossier public/ contient les fichiers statiques qui ne sont pas traités par le processus de build de Webpack/Vite mais sont directement copiés dans le dossier de build final. Vous y trouverez principalement :

• index.html : C'est la seule page HTML de votre application monopage (SPA). C'est le "squelette" dans lequel votre application React sera injectée. Elle contient généralement une balise
  (ou similaire). C'est à l'intérieur de cette div que React montera votre application. Vous pouvez modifier ce fichier pour ajouter des métadonnées, des liens vers des polices externes, etc.
• favicon.ico, logo192.png, logo512.png : Icônes de l'application utilisées par le navigateur (onglet, favoris) et potentiellement pour les Progressive Web Apps (PWA).
• manifest.json : Fichier de configuration pour les PWAs, décrivant l'application pour une installation sur l'appareil de l'utilisateur.
• robots.txt : Fichier indiquant aux robots d'indexation (comme Googlebot) quelles parties du site peuvent être explorées.

Tout fichier placé dans public/ peut être référencé dans votre code HTML ou JavaScript en utilisant la variable d'environnement spéciale %PUBLIC_URL% (pour CRA) ou simplement avec un chemin relatif à la racine (/mon-image.png).

Le dossier `src/` : Le coeur de votre application

Le dossier src/ (source) est l'endroit où vous passerez la majorité de votre temps. Il contient tout le code source JavaScript (ou TypeScript), CSS, et les assets (images, polices) qui seront traités, compilés et bundlés par les outils de build. Les fichiers typiques sont :

• index.js (ou main.jsx/main.tsx pour Vite) : C'est le point d'entrée JavaScript de votre application. C'est ce fichier qui importe React et ReactDOM, localise l'élément racine dans public/index.html (le
  ), et indique à ReactDOM de rendre votre composant React principal (souvent appelé App) à l'intérieur de cet élément. C'est là que la magie de React commence.
• App.js (ou App.jsx/App.tsx) : Il s'agit généralement du composant racine de votre application. C'est le premier composant React rendu, et il contiendra souvent la structure de base de votre application, comme les en-têtes, les pieds de page, et le système de routage qui affiche les différentes pages ou vues.
• App.css, index.css : Fichiers CSS pour le style. index.css contient souvent des styles globaux ou des resets, tandis que App.css peut contenir les styles spécifiques au composant App. Vous pouvez organiser vos styles de différentes manières (CSS classique, CSS Modules, CSS-in-JS, Tailwind CSS).
• logo.svg (ou autres assets) : Exemple d'asset (image) importé et utilisé dans un composant JavaScript. Les outils de build gèrent ces imports pour les inclure dans le bundle final.
• reportWebVitals.js (souvent dans CRA) : Une fonction utilitaire pour mesurer les métriques de performance de votre application (Core Web Vitals).
• setupTests.js (souvent dans CRA) : Fichier de configuration pour l'environnement de test (par exemple, avec Jest et React Testing Library).

Organisation interne du dossier `src/` (Bonnes pratiques)

Au fur et à mesure que votre application grandit, il est essentiel de structurer le contenu du dossier src/ pour maintenir la clarté et la maintenabilité. Il n'y a pas une seule "bonne" façon, mais des conventions courantes émergent :

• components/ : Contient les composants React réutilisables et génériques (ex: Button, Card, Modal).
• pages/ ou views/ : Contient les composants qui représentent des pages ou des écrans entiers de l'application (ex: HomePage, ProfilePage, SettingsPage). Ces composants assemblent souvent des composants plus petits du dossier `components/`.
• hooks/ : Pour les hooks personnalisés (custom hooks) qui encapsulent une logique réutilisable (ex: `useFetch`, `useLocalStorage`).
• services/ ou api/ : Pour les fonctions ou modules responsables des appels aux API externes.
• contexts/ : Pour les définitions et providers de l'API Context de React.
• store/ ou features/ : Si vous utilisez une bibliothèque de gestion d'état globale comme Redux ou Zustand.
• assets/ : Pour les images, polices, et autres fichiers statiques gérés par le processus de build.
• utils/ : Pour les fonctions utilitaires diverses qui ne sont pas spécifiques à React.
• styles/ : Pour les fichiers de style globaux, variables CSS, etc., si vous n'utilisez pas de CSS Modules ou CSS-in-JS directement liés aux composants.

Adopter une structure cohérente dès le début facilitera grandement la navigation, la compréhension et la maintenance de votre code à long terme.

Conclusion : Un point de départ standardisé

La structure de projet fournie par des outils comme Create React App ou Vite offre un excellent point de départ standardisé et éprouvé pour développer des applications React. Elle sépare clairement les préoccupations (public vs source, code vs dépendances) et fournit les fichiers essentiels pour démarrer. Comprendre le rôle de chaque fichier et dossier clé vous permettra de naviguer dans votre projet avec confiance et de savoir où ajouter de nouveaux éléments de manière organisée.