2.6 Exportations & Importations

Une caractéristique clé du JavaScript moderne est la modularité : pouvoir découper son code en plusieurs fichiers et les relier entre eux avec des import et des export. En React, c'est la façon standard de structurer une application : chaque composant est généralement dans son propre fichier, et on l'importe là où on en a besoin.

Deux types d'exports

• export default : un seul export par défaut par fichier.
• export nommé : plusieurs exports possibles avec leur nom.
• import avec accolades pour les exports nommés.
• Possibilité d'utiliser un alias avec as.

Avec export default, l'élément exporté peut être importé sous n'importe quel nom dans l'autre fichier. À l'inverse, un export nommé oblige à utiliser le nom exact (entre accolades) lors de l'import. On peut aussi tout regrouper avec import * as Module pour accéder ensuite aux exports comme propriétés de cet objet.

// person.js
const person = { name: "Mathieu" };
export default person;

// utility.js
export const clean = () => { /* ... */ };
export const baseData = 10;

// app.js
import person from "./person";
import { clean, baseData } from "./utility";
import { baseData as data } from "./utility";
import * as Bundled from "./utility";

Cette syntaxe d'import/export est au cœur du JavaScript moderne. Tous les navigateurs ne la supportent pas nativement, c'est pourquoi un projet React utilise un outil comme Babel pour compiler ce code dans une version comprise partout. Dans la prochaine vidéo, nous verrons justement comment configurer un projet capable d'utiliser sans souci toutes ces fonctionnalités de nouvelle génération.