Chapitre 2 — Composants et JSX

🧩 Composants React

Un composant est une fonction JavaScript qui retourne du JSX (du HTML enrichi). C''est l''unité de base de toute application React.

1. Premier composant

function Bouton() {
return <button>Cliquez-moi</button>;
}

2. JSX — JavaScript + XML

JSX permet d''écrire du HTML directement dans JavaScript. Les règles importantes :

• Toujours fermer les balises : <img /> et non <img>
• Utiliser className au lieu de class : <div className="card">
• Une seule racine par composant (utiliser <>...</> Fragment si besoin)
• Variables JS entre accolades : <h1>{titre}</h1>

3. Convention de nommage

⚠️ Les composants commencent TOUJOURS par une majuscule (Bouton, Header, UserCard). Sinon React les confond avec des balises HTML.

4. Composant fonctionnel complet

function ProfilUser() {
const nom = "Aminata";
return (
<div className="profil">
<h2>Bonjour {nom}</h2>
<p>Bienvenue sur ITAG Tech</p>
</div>
);
}