React : des composants réutilisables ⚛️

React c'est comme des Lego : tu construis des petits blocs (composants) que tu peux réutiliser partout pour faire une grande application !

1. La philosophie React ⚛️

pseudo ' Un composant React = une fonction qui retourne du HTML ' On peut lui passer des "props" (propriétés) comme des paramètres

FONCTION Bonjour(props) ' props.nom contient la valeur passée RETOURNER <h1>Bonjour, {props.nom} !</h1> FIN FONCTION

' Utilisation : <Bonjour nom="Alice" /> ⬅ Affiche "Bonjour, Alice !" <Bonjour nom="Bob" /> ⬅ Affiche "Bonjour, Bob !" ``'

function Bonjour({ nom }: { nom: string }) {
    return <h1>Bonjour, {nom} !</h1>;
}

// Utilisation
<Bonjour nom="Alice" />
<Bonjour nom="Bob" />

2. État (State) et événements 🔄

L'état (state) c'est la mémoire du composant. Quand l'état change, le composant se re-affiche automatiquement.

Exécution pas à pas
pseudo
1/38
1' useState : crée une variable "réactive"2' Quand on la modifie, le composant se met à jour3 4FONCTION Compteur()5    [compte, setCompte] ← useState(0)  ⬅ compte = 0 au départ6    7    RETOURNER8        <div>9            <p>Compteur : {compte}</p>10            <button onClick={() → setCompte(compte + 1)}>11                +112            </button>13            <button onClick={() → setCompte(0)}>14                Réinitialiser15            </button>16        </div>17FIN FONCTION18 19' Quand on clique sur +1 :20' setCompte(0+1) → compte devient 1 → le <p> se met à jour !21' C'est React qui gère tout ça automatiquement !22``'23 24```tsx25import { useState } from "react";26 27function Compteur() {28    const [count, setCount] = useState(0);29 30    return (31        <div>32            <p>Compteur : {count}</p>33            <button onClick={() => setCount(count + 1)}>+1</button>34            <button onClick={() => setCount(0)}>Réinitialiser</button>35        </div>36    );37}38 
▶️
' useState : crée une variable "réactive"
' useState : crée une variable "réactive"Le programme exécute cette action, puis passe à la suivante.
Le programme exécute cette instruction, puis passe à la suivante.

3. Le cycle de vie d'un composant 🔄

pseudo ' Le cycle de vie React :

1. Le composant se MONTE (apparaît à l'écran)
2. L'utilisateur interagit → l'ÉTAT change
3. React RE-REND le composant (nouvelle version)
4. React compare l'ancien et le nouveau
5. Seules les DIFFÉRENCES sont appliquées au vrai DOM
6. Si le composant disparaît → il se DÉMONTE ``'

4. Effets de bord (useEffect) 🌊

Parfois, on veut faire quelque chose après que le composant s'affiche : charger des données, écouter un clic, etc.

Exécution pas à pas
pseudo
1/45
1' useEffect : exécute du code APRÈS l'affichage2' Le tableau [userId] dit : "réexécute seulement si userId change"3 4FONCTION ProfilUtilisateur(props)5    [user, setUser] ← useState(null)6    [loading, setLoading] ← useState(true)7    8    useEffect(() → {9        async FONCTION charger()10            setLoading(true)11            réponse ← fetch("/api/users/" + props.userId)12            données ← réponse.json()13            setUser(données)14            setLoading(false)15        FIN FONCTION16        charger()17    }, [props.userId])  ⬅ Dépend de userId18    19    SI loading ALORS RETOURNER <div>Chargement...</div>20    RETOURNER <div>{user.nom}</div>21FIN FONCTION22``'23 24```tsx25import { useState, useEffect } from "react";26 27function ProfilUtilisateur({ userId }: { userId: number }) {28    const [user, setUser] = useState(null);29    const [loading, setLoading] = useState(true);30 31    useEffect(() => {32        async function charger() {33            setLoading(true);34            const res = await fetch('/api/users/' + userId);35            const data = await res.json();36            setUser(data);37            setLoading(false);38        }39        charger();40    }, [userId]); // Recharge si userId change41 42    if (loading) return <div>Chargement...</div>;43    return <div>{user?.name}</div>;44}45 
▶️
' useEffect : exécute du code APRÈS l'affichage
' useEffect : exécute du code APRÈS l'affichageLe programme exécute cette action, puis passe à la suivante.
Le programme exécute cette instruction, puis passe à la suivante.

5. Composants avec formulaire 📝

Exécution pas à pas
pseudo
1/50
1FONCTION FormulaireContact()2    [form, setForm] ← useState({nom: "", email: "", message: ""})3    4    FONCTION handleChange(e)5        ' Met à jour LE champ qui a changé6        setForm({...form, [e.target.name]: e.target.value})7    FIN FONCTION8    9    FONCTION handleSubmit(e)10        e.preventDefault()    ⬅ Empêche le rechargement de la page11        afficher("Envoi :", form)12    FIN FONCTION13    14    RETOURNER15        <form onSubmit={handleSubmit}>16            <input name="nom" value={form.nom} onChange={handleChange} />17            <input name="email" value={form.email} onChange={handleChange} />18            <textarea name="message" value={form.message} onChange={handleChange} />19            <button>Envoyer</button>20        </form>21FIN FONCTION22``'23 24```tsx25function FormulaireContact() {26    const [form, setForm] = useState({27        nom: "",28        email: "",29        message: "",30    });31 32    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {33        setForm({ ...form, [e.target.name]: e.target.value });34    };35 36    const handleSubmit = (e: React.FormEvent) => {37        e.preventDefault();38        console.log("Envoi :", form);39    };40 41    return (42        <form onSubmit={handleSubmit}>43            <input name="nom" value={form.nom} onChange={handleChange} placeholder="Nom" />44            <input name="email" value={form.email} onChange={handleChange} placeholder="Email" />45            <textarea name="message" value={form.message} onChange={handleChange} />46            <button type="submit">Envoyer</button>47        </form>48    );49}50 
🧩
FONCTION FormulaireContact()
FONCTION FormulaireContact()Le programme exécute cette action, puis passe à la suivante.
On définit une fonction appelée "FormulaireContact()". Cette fonction contient des instructions qui seront exécutées quand on l'appelle.

Exercices pour toi 🎯

1. Compteur amélioré : ajoute un bouton "-1" et un bouton "×2" au compteur
2. Composant Liste : crée un composant ListeTaches avec une entrée pour ajouter des tâches
3. Profil utilisateur : utilise useEffect pour charger des données depuis une API
4. Mini-app : construis un petit convertisseur °C ↔ °F avec un formulaire