📘 Chapitre – Créer un composant fonctionnel

1. 🎯 Objectif pédagogique

Apprendre à créer un composant fonctionnel React, à l’importer dans l’application et à l’utiliser dans l’arborescence des composants.

2. 📚 Concepts abordés

• Définition d’un composant fonctionnel
• Règles de nommage (majuscule pour les composants)
• Export et import d’un composant (export default)
• Utilisation d’un composant dans App.jsx
• Syntaxe JSX de base (équivalent HTML)

3. 🧠 Explication théorique

Un composant fonctionnel est une fonction JavaScript qui retourne du JSX (JavaScript + XML), qui ressemble à du HTML. Exemple :

function Bonjour() {
  return <h2>Bonjour React !</h2>;
}

Un composant doit commencer par une majuscule, sinon React le considère comme un élément HTML natif.

Pour utiliser ce composant dans un autre fichier :

import Bonjour from './Bonjour';

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

4. 🛠 Tutoriel pratique

Résumé du travail : Créer un composant Bonjour.jsx et l’afficher dans App.jsx.

Arborescence projet :

react-demo/
 ├── src/
 │   ├── App.jsx
 │   └── Bonjour.jsx

Étape 1 : Créer Bonjour.jsx

function Bonjour() {
  return <h2>Bienvenue dans mon premier composant React</h2>;
}

export default Bonjour;

Étape 2 : Importer dans App.jsx

import Bonjour from './Bonjour';

function App() {
  return (
    <div>
      <h1>Page d’accueil</h1>
      <Bonjour />
    </div>
  );
}

export default App;

Étape 3 : Lancer l’application

npm run dev

Vous verrez maintenant votre message « Bienvenue dans mon premier composant React ».

Étape 4 : Ajouter un second composant (optionnel)

function Footer() {
  return <footer>&copy; 2025 - Mon App React</footer>;
}

export default Footer;

Puis l’importer dans App.jsx :

import Footer from './Footer';
...
<Footer />

5. 🧾 Résumé et points-clés

• Un composant fonctionnel est une fonction retournant du JSX.
• Toujours commencer le nom d’un composant par une majuscule.
• L’instruction export default permet de l’utiliser dans d’autres fichiers.
• Les composants sont réutilisables et combinables.