TP1  React

1         TP : Créer un composant "Like avec compteur"

2         Remarque : ouvre l’inspecteur (F12) en cas de problème pour inspecter l’erreur

 

Figure 1 : Exemple d’une application React avec état

 

 

 

3         TP 2 :

3.1    Objectif

On vous donne une application React (du TP1) contenant les composants statiques suivants :

  • un composant Welcome , un composant Navbar  et un composant Photo

 

Nous voulons ajouter une interaction via un bouton like :

Lorsqu’un utilisateur clique sur un bouton : Le nombre de "likes" augmente =>etat= count(le nombre de likes)

 

3.2    Etape 1 : Comprendre la gestion des événements en React

En React, les événements permettent de réagir aux actions de l’utilisateur :

  • clic (onClick)
  • saisie (onChange)
  • survol (onMouseOver)
  • soumission (onSubmit)

 C’est l’équivalent de addEventListener en JavaScript, mais simplifié et intégré dans JSX.

 

3.2.1      Syntaxe

Les événements s’écrivent en camelCase et on passe une fonction :

function Button() {

function handleClick() {

    console.log("Bouton cliqué");

  }

 

  return <button onClick={handleClick}>Click</button>;

}

 

4         Gestion de l’état en React

La gestion de l’état (state) permet de rendre un composant dynamique et interactif.
Contrairement aux props (qui sont fixes), le state peut changer pendant l’exécution.

Intérêt  :

  • gérer les interactions utilisateur
  • mettre à jour l’interface automatiquement
  • créer des composants dynamiques

 

Exemple : nombre de likes, compteur, formulaire…

Module utilisé

On utilise le hook useState  pour créer

Memoire +maj du memoire

 

import { useState } from 'react';
const [count, setCount] = useState(0);
  • count → valeur actuelle
  • setCount → fonction pour modifier la valeur
  • 0 → valeur initiale

Sans state → interface statique
Avec state → interface interactive

 

Exemple :

function LikeButton() {

  const [count, setCount] = useState(0);

  

  return (

    <button onClick={() => setCount(count + 1)}>

      {count} Likes

    </button>

  );

}

 Quand on clique :

  • setCount modifie la valeur
  • React re-render le composant
  • le nombre affiché change automatiquement

 

 

4.1     

4.2    Étape 1 : Création du composant

Créer un nouveau composant appelé :

function LikeButton() {



}

4.3    🔹 Étape 4 : Ajouter un état

👉 Importer useState :

import { useState } from 'react';

👉 Ajouter un état :

const [count, setCount] = useState(0);

4.3.1      ❓ Compréhension

  • count → valeur actuelle
  • setCount → fonction pour modifier la valeur
  • 0 → valeur initiale

4.4    🔹 Étape 5 : Affichage

👉 Afficher :

  • un bouton
  • le nombre de likes 
return (

  <div>

    <button>Like</button>

    <p>{count} likes</p>

  </div>

);

4.5    🔹 Étape 6 : Ajouter l’interaction

👉 Modifier le bouton :

<button onClick={() => setCount(count + 1)}>

  Like

</button>

4.5.1      ❓ Question importante

Pourquoi on utilise setCount et pas count = count + 1 ?

👉 Réponse attendue :
➡️ Parce que React met à jour l’interface seulement avec setState

4.6    🔹 Étape 7 : Intégration dans App

👉 Ajouter le composant dans App :

<LikeButton />

👉 Tester plusieurs fois dans l’application :

<LikeButton />

<LikeButton />

4.7    🔹 Étape 8 : Observation clé (TRÈS IMPORTANT)

❓ Question :

Si je clique sur le premier bouton, est-ce que le second change ?

👉 Réponse :
❌ Non

👉 Conclusion :
✔ Chaque composant a son propre state indépendant

4.8    🔹 Étape 9 : Vérification de compréhension

L’étudiant doit être capable de répondre :

  1. Qu’est-ce que useState ?
  2. Quelle est la différence entre count et setCount ?
  3. Pourquoi React ne détecte pas count++ ?
  4. Pourquoi chaque bouton a un compteur différent ?

 

5         Solution

App.jsx

 

 

import './App.css'

function Welcome(p) {

  return <h1 className="welcome-text">Hello, {p.name}</h1>;

}

 

function Navbar(p) {

  return (

    <nav className="navbar">

      <img src={p.src} alt="Profile" className="navbar-photo" />

    </nav>

  );

}

function Photo({ src, alt }) {

  return <img src={src} alt={alt || "photo"} className="photo" />;

}

 

function App() {

  return (

    <div className="app-container">

      <Navbar src="/saida.png" /> {/* replace with your photo path */}

      <div className='div'>

      <Welcome name="Ahmed" />

     

      <Welcome name="Amine" />

      </div>

      <Photo src="/saida.png" alt="Profile" />

    </div>

  );

}

 

export default App;

 

 

Main.jsx

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import './index.css'

import App from './App.jsx'

 

createRoot(document.getElementById('root')).render(

  <StrictMode>

    <App />

  </StrictMode>,

)

 

 

App.css

 

/* Align all components in a row */

.app-container {

  display: flex;

  align-items: center;

  gap: 20px; /* space between components */

}

 

/* Photo styling */

.photo {

  width: 50px;

  height: 50px;

  border-radius: 50%; /* circular photo */

  object-fit: cover;

}

 

/* Welcome text styling */

.welcome-text {

  margin: 0;

  width: 300px;

  font-size: 1.5rem;

}

.div{

  display:flex;

  flex-direction: column;}

 

 

Gestion de l’etat

import { useState } from 'react'

import './App.css'

 

function Welcome(p) {

  return <h1 className="welcome-text">Hello, {p.name}</h1>;

}

 

function Navbar(p) {

  return (

    <nav className="navbar">

      <img src={p.src} alt="Profile" className="navbar-photo" />

    </nav>

  );

}

 

function Photo({ src, alt }) {

  return <img src={src} alt={alt || "photo"} className="photo" />;

}

 

// 🔹 Nouveau composant Like

function LikeButton() {

  const [count, setCount] = useState(0);

 

  return (

    <div className="like-container">

      <button onClick={() => setCount(count + 1)}>

        👍 Like

      </button>

      <p>{count} likes</p>

    </div>

  );

}

 

function App() {

  return (

    <div className="app-container">

      <Navbar src="/saida.png" />

 

      <div className='div'>

        <Welcome name="Ahmed" />

        <LikeButton />   {/* 🔹 ajouté ici */}

 

        <Welcome name="Amine" />

        <LikeButton />   {/* 🔹 chaque user a son compteur */}

      </div>

 

      <Photo src="/saida.png" alt="Profile" />

    </div>

  );

}

 

export default App;

 


Last modified: Wednesday, 22 April 2026, 3:17 PM