Module React

Un module React est un fichier JavaScript/JSX autonome qui encapsule une unité fonctionnelle réutilisable (composant, hook personnalisé, utilitaire, constante) et l’exporte explicitement pour être consommé par d’autres parties de l’application via import/export.

Ce n’est pas spécifique à React : C’est l’application des modules ES6 (standard JavaScript) à l’écosystème React.
React exploite ce système, il ne le crée pas.

Caractéristiques clés

Exemple ultra-simple

Création de l’application

npm create vite@latest mon-app -- --template react
cd mon-app
npm install
npm run dev

Ouvrez http://localhost:5173

Module « Bonjour » (0 prop)

Fichier : src/components/Bonjour.jsx

/Ce composant Bonjour est un composant fonctionnel qui retourne un élément JSX. Lorsque ce composant est utilisé dans une application React, il affichera le message « Salut depuis un module ! » dans une balise h1.

export default function Bonjour() {
  return <h1>Salut depuis un module !</h1>
}

Modifiez src/App.jsx :

import "./App.css";
import Bonjour from "./components/Bonjour";

function App() {
  return (
    <>
      <div>
        <Bonjour />
      </div>
    </>
  );
}

export default App;

Résultat : Page affiche « Salut depuis un module ! »
Modifiez le texte dans Bonjour.jsx → HMR instantané (pas de rechargement !)

Module « Badge » (avec props)

Badge.jsx

const Badge = ({ txt }) => <span style={{ background: "#4ade80", padding: "4px 12px", borderRadius: "6px" }}>{txt}</span>;

export default Badge;

Modifiez src/App.jsx

import "./App.css";
import Badge from "./components/Badge";

function App() {
  return (
    <>
      <div style={{ padding: "2rem" }}>
        <Badge txt="Nouveau" />
      </div>
    </>
  );
}

export default App;