Chapitre 4 : Modules ES6

Introduction

Les modules ES6 permettent d'organiser le code en fichiers séparés, avec un système d'import/export explicite.

En PHP, vous utilisez require, include, ou l'autoloading PSR-4. En JavaScript moderne, on utilise import et export.

Export

Export nommé (Named Export)

Permet d'exporter plusieurs éléments depuis un fichier :

// utils/math.js

// Export à la déclaration
export const PI = 3.14159;

export function add(a, b) {
    return a + b;
}

export const multiply = (a, b) => a * b;

// OU export groupé à la fin
const PI = 3.14159;
function add(a, b) { return a + b; }
const multiply = (a, b) => a * b;

export { PI, add, multiply };

Export par défaut (Default Export)

Un seul export par défaut par fichier. Généralement utilisé pour le composant/classe principal :

// components/Button.jsx

const Button = ({ label, onClick }) => {
    return <button onClick={onClick}>{label}</button>;
};

export default Button;

// OU directement
export default function Button({ label, onClick }) {
    return <button onClick={onClick}>{label}</button>;
}

Mélange des deux

// services/api.js

// Export par défaut : le client API principal
const apiClient = {
    get: (url) => fetch(url).then(r => r.json()),
    post: (url, data) => fetch(url, { method: 'POST', body: JSON.stringify(data) })
};

// Exports nommés : utilitaires
export const API_URL = "https://api.example.com";
export const handleError = (error) => console.error(error);

export default apiClient;

Import

Import nommé

// Importer des exports nommés (accolades obligatoires)
import { add, multiply } from './utils/math.js';
import { PI } from './utils/math.js';

// Renommer à l'import
import { add as addition } from './utils/math.js';

// Importer tout sous un namespace
import * as MathUtils from './utils/math.js';
// Utilisation : MathUtils.add(1, 2), MathUtils.PI

Import par défaut

// Importer l'export par défaut (pas d'accolades)
import Button from './components/Button.jsx';

// Le nom est libre (pas lié au nom dans le fichier source)
import MonBouton from './components/Button.jsx'; // OK

Import mixte

// Default + named dans le même import
import apiClient, { API_URL, handleError } from './services/api.js';

Chemins d'import

Chemins relatifs

// Même dossier
import { helper } from './helper.js';

// Dossier parent
import { config } from '../config.js';

// Sous-dossier
import Button from './components/Button.jsx';

Imports de packages (node_modules)

// Packages npm - pas de chemin relatif
import React from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';

Alias de chemins (Vite/Webpack)

SmartMaker configure un alias src :

// Sans alias (chemins relatifs fragiles)
import Button from '../../../components/Button.jsx';

// Avec alias (plus propre)
import Button from 'src/components/Button.jsx';

Configuration dans vite.config.js :

export default defineConfig({
    resolve: {
        alias: {
            'src': '/src'
        }
    }
});

Comparaison avec PHP

// PHP - autoloading PSR-4
namespace App\Services;

use App\Models\User;
use App\Utils\Helper;

class UserService {
    // ...
}

// JavaScript ES6
import User from 'src/models/User.js';
import { formatDate } from 'src/utils/helper.js';

export default class UserService {
    // ...
}

Organisation des fichiers React

Structure typique SmartMaker

src/
├── components/
│   ├── app/                    # Providers, Router
│   │   ├── SmartCommonProvider/
│   │   │   └── index.jsx       # export default SmartCommonProvider
│   │   └── Router/
│   │       └── index.jsx
│   │
│   ├── pages/
│   │   ├── public/
│   │   │   └── LoginPage/
│   │   │       └── index.jsx
│   │   └── private/
│   │       └── HomePage/
│   │           └── index.jsx
│   │
│   └── common/
│       ├── Button/
│       │   └── index.jsx
│       └── Card/
│           └── index.jsx
│
├── hooks/
│   └── useAuth.js
│
├── services/
│   └── api.js
│
└── utils/
    └── format.js

Convention : index.jsx

Quand un dossier contient index.jsx, on peut importer le dossier directement :

// Ces deux imports sont équivalents
import Button from './components/common/Button/index.jsx';
import Button from './components/common/Button';

Fichier barrel (re-export)

Un fichier qui re-exporte plusieurs modules :

// components/common/index.js
export { default as Button } from './Button';
export { default as Card } from './Card';
export { default as Modal } from './Modal';

// Utilisation
import { Button, Card, Modal } from 'src/components/common';

Import dynamique

Pour le code-splitting (chargement à la demande) :

// Import statique (chargé au démarrage)
import HeavyComponent from './HeavyComponent';

// Import dynamique (chargé quand nécessaire)
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

// Utilisation avec Suspense
<Suspense fallback={<Loading />}>
    <HeavyComponent />
</Suspense>

Exercices

Exercice 1 : Créer un module

Créer un fichier utils/string.js qui exporte :

• Une constante DEFAULT_LOCALE = "fr-FR"
• Une fonction capitalize(str) qui met la première lettre en majuscule
• Une fonction par défaut formatName(firstName, lastName) qui retourne "LASTNAME Firstname"

Solution :

// utils/string.js

export const DEFAULT_LOCALE = "fr-FR";

export function capitalize(str) {
    if (!str) return '';
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

export default function formatName(firstName, lastName) {
    return `${lastName.toUpperCase()} ${capitalize(firstName)}`;
}

Exercice 2 : Importer le module

Importer et utiliser le module créé :

// app.js
// 1. Importer formatName (default)
// 2. Importer capitalize et DEFAULT_LOCALE (named)
// 3. Afficher formatName("jean", "dupont")
// 4. Afficher capitalize("bonjour")

Solution :

// app.js
import formatName, { capitalize, DEFAULT_LOCALE } from './utils/string.js';

console.log(formatName("jean", "dupont")); // "DUPONT Jean"
console.log(capitalize("bonjour"));         // "Bonjour"
console.log(DEFAULT_LOCALE);                // "fr-FR"

Points clés à retenir

1. Export nommé : export const x ou export { x, y }
2. Export default : export default X (un seul par fichier)
3. Import nommé : import { x, y } from './file' (accolades)
4. Import default : import X from './file' (pas d'accolades)
5. Alias : import { x as alias } from './file'
6. Tout importer : import * as Module from './file'
7. index.jsx : permet import X from './folder'

Récapitulatif du Module 1

Vous avez maintenant les bases JavaScript ES6+ nécessaires pour React :

← Chapitre précédent | Retour au module | Module suivant : Introduction à React ->