React Academy · Leçon

Structure des dossiers et conventions de nommage

Organiser un projet React avec des dossiers par fonctionnalité et des noms de fichiers clairs.

Structure des dossiers et conventions de nommage est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous découvrirez les structures de dossiers courantes des projets React, apprendrez les conventions de nommage des fichiers et des composants et comprendrez comment organiser le code à mesure que le projet s'agrandit.

La structure par défaut

Un projet Vite + React minimal contient `src/App.jsx` et `src/main.jsx`. Cela convient pour de petites démonstrations, mais cette structure ne passe pas à l'échelle. À mesure que vous ajoutez des fonctionnalités, créez des dossiers dédiés pour regrouper le code associé.

src/
  main.jsx
  App.jsx
  index.css

Structure fondée sur les fonctionnalités

Regroupez les fichiers par fonctionnalité plutôt que par type. Chaque dossier de fonctionnalité contient son composant, ses styles, ses tests et ses fonctions utilitaires. Vous pouvez ainsi ajouter ou supprimer une fonctionnalité entière en une seule fois.

src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

Nommage des fichiers de composants

Nommez les fichiers de composants en **PascalCase**, en respectant le nom du composant : `UserCard.jsx`, `NavigationBar.jsx`. La norme consiste à placer un composant par fichier. L'utilisation de `.jsx` (ou `.tsx`) indique aux éditeurs que le fichier contient du JSX.

Nommage des fichiers autres que les composants

Les hooks, les utilitaires et les constantes utilisent le **camelCase** : `useAuth.js`, `formatDate.js`, `apiClient.js`. Les fichiers de test reprennent le nom de leur source avec `.test` ou `.spec` : `useAuth.test.js`.

Fichiers index pour des importations claires

L'ajout d'un `index.js` à un dossier vous permet d'importer depuis le chemin du dossier plutôt que depuis le chemin complet du fichier. Limitez les fichiers index à des réexportations uniquement : aucune logique.

// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

Importations absolues avec des alias de chemins

Configurez un alias `@/` pointant vers `src/` dans `vite.config.js` et `tsconfig.json`. Cela évite les chemins relatifs fragiles comme `../../../../components/Button`.

// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

Composants partagés et composants de fonctionnalité

Placez les composants utilisés par une seule fonctionnalité dans le dossier de cette fonctionnalité. Déplacez un composant vers `src/components/` uniquement lorsque deux fonctionnalités ou plus en ont besoin. Évitez toute extraction prématurée.

Fichiers de constantes et de configuration

Stockez les chaînes magiques, les URL de base de l'API et les adaptateurs de variables d'environnement dans `src/lib/constants.js` ou `src/config.js`. Ne dispersez jamais les chaînes `process.env.VITE_API_URL` dans de nombreux fichiers.

// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

Types et interfaces (TypeScript)

Dans les projets TypeScript, placez les types au même endroit que la fonctionnalité ou le composant qui les utilise. Pour les types partagés entre de nombreuses fonctionnalités, créez `src/types/` avec un fichier par domaine.

Vérification rapide

Quel est le principal avantage d'une structure de dossiers fondée sur les fonctionnalités par rapport à une structure fondée sur les types ?

Récapitulatif

Utilisez des dossiers fondés sur les fonctionnalités, le PascalCase pour les fichiers de composants, le camelCase pour les hooks et les utilitaires, des réexportations dans `index.js` pour des importations claires, ainsi qu'un alias de chemin comme @/ afin d'éliminer les longs chemins relatifs.

Cours terminé

Félicitations ! Vous avez terminé **React Strict Mode & Best Practices**. Vous comprenez désormais le comportement de StrictMode, la manière d'écrire des fonctions de rendu pures, l'utilisation correcte des clés et des références, ainsi qu'une structure de dossiers évolutive.

Questions Fréquemment Posées

La leçon « Structure des dossiers et conventions de nommage » est-elle gratuite ?

Oui — le texte complet de « Structure des dossiers et conventions de nommage » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Structure des dossiers et conventions de nommage » ?

Organiser un projet React avec des dossiers par fonctionnalité et des noms de fichiers clairs. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Structure des dossiers et conventions de nommage » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Rôle de StrictMode
Composants purs et prévention des effets secondaires lors du rendu
Bonnes pratiques pour les clés et les refs
Structure des dossiers et conventions de nommage

← Retour à React Academy