Effet et affichage répété

Module 4

A la fin de ce quatrième module, l'étudiant devra être capable d'effectuer l'affichage répété des données. De plus, il devra être capable d'utiliser le hook d'effet ou useEffect.

Contenu du module

Nous aborderons les points suivants:

Affichage répété

En JavaScript, lorsque nous voulons appliquer une fonction donnée à chaque élément d'un tableau et obtenir un nouveau tableau avec les résultats. On pense directement à la méthode map(). Comment cette méthode fonctionne-t-elle?

Fonctionnement de la méhode map()

Dans le code ci-dessous, la méthode map() est utliée pour prendre un tableau de nombres et calculer le carrée de chacun de ces nombres. Par la suite, le nouveau tableau retourné par map() est afeccté à une variable 'carres' et pour finir, le résulat est affiché dans la console :

Demo méthode map()

const nombres = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const carres = nombres.map((nombre) => nombre * nombre);
console.log(carres);

Résultat dans la console

[1, 4, 9, 16, 25, 36, 49, 64, 81]

Usage de la méthode map() dans React

Pour illustrer l'usage de la méthode map() dans React, nous allons reprendre notre application du module3 et lui ajouter de nouveaux composants pour afficher des images.

biblio-app-module-3

composant 'Galerie' : Dans le dossier 'components', créer le composant 'Galerie.jsx' qui va prendre en entrée un tableau d'images et les afficher en utilisant la méthode map()

/components/Galerie.jsx

import Image from 'next/image'
import styles from './Gallerie.module.css'
export default function Gallerie({ images }) {
    return <div className={styles.gallerie}>
        {/* Usage de map() dans les accolades */}
        {/* Les clés (key) aident React à identifier quels éléments d’une liste ont changé, ont été ajoutés ou supprimés.  */}
        {images.map((image, index) =>
            <Image
                key={index}
                src={image.src}
                alt={image.alt}
                width={image.width}
                height={image.height}
            />
        )}
    </div>
}

Important

les clés (key) aident React à identifier quels éléments d’une liste ont changé, ont été ajoutés ou supprimés. Il est donc impératif d'attribuer une clé (key) à chaque élément et elle doit permettre d'identifer l'élément de façon unique. Dans notre cas, nous avons utilisé l'index mais il est recommandé d'utiliser l'index en dernier recours. Nous aurions pu utiliser l'URL comme clé malgré sa longueur.

gallerie-pokemon.json : Les informations de nos images telles l'URL, la taille sont stockées dans un fichier json nommé 'gallerie-pokemon.json'. Vous devez donc le télécharger et le sauvegarder dans le dossier 'public' de votre application.

Télécharger gallerie-pokemon.json

Importer Gallerie et gellerie-pokemon : Ajouter le code suivant au debut du composant 'Documents.jsx'

/components/Documents.jsx

import Gallerie from '@/components/Galerie.jsx'
import galleriePokemon from '@/publi gallerie-pokemon.json'

Appel du composant 'Galerie' : Ajouter le code suivant à la fin du composant 'Documents.jsx' pour appeler le composant 'Galerie' afin qu'il affiche les images

/components/Documents.jsx

 <Gallerie images={galleriePokemon} />

Modifier 'next.config.mjs' : Remplacer le code de 'next.config.mjs' par le code suivant, pour indiquer à Next les paramètres des images.

/next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'img.pokemondb.net',
                port: '',
                pathname: '/artwork/**'
            }
        ]
    }
};
export default nextConfig;

En savoir plus sur la méthode map()

Le hook d'effet ou useEffect

Le hook d'effet ou useEffect dans React permet de gérer les effets secondaires, tels que les appels réseaux, les abonnements, ou la modification du DOM, dans un composant fonctionnel.

useEffect avec modification du DOM

Nous allons créer un composant 'Titre' pour modifier le titre de page suite à un clic sur un bouton

/component/Titre.jsx

import { useState, useEffect } from 'react';
export default function Titre() {
    // variable pour contenir le nombre de clic
    const [count, setCount] = useState(0);
    useEffect(() => {
        // Met à jour le titre du document via l’API du navigateur
        document.title = `Vous avez cliqué ${count} fois`;
    });
    return (
      <div>
        <p>Vous avez cliqué {count} fois</p>
        <button onClick={() => setCount(count + 1)}>
          Cliquez ici
        </button>
      </div>
    );
}

Important

Il ne reste plus qu'à importer notre nouveau composant dans le composant 'Accueil' pour le tester.

useEffect : Réalisation d'un compte à rebours

/component/Timer.jsx

import { useEffect, useState } from 'react'
import styles from './Timer.module.css'
export default function Timer({ compte }) {
    const [decompte, setCompte] = useState(compte || 10);
    useEffect(() => {
        // Exécuté au chargement du composant dans la page
        const intervalID = setInterval(() => {
            if (decompte > 0) {
                setCompte(decompte - 1);
            } else {
                clearInterval(intervalID);
            }
        }, 1000);
        return () => {
            // Exécuté lorsque le composant est enlevé de la page
            clearInterval(intervalID);
        };
    });
    return <div className={styles.timer}>{decompte}</div>;
}

Bon à savoir

setInterval() est une méthode JavaScript permettant d'excuter un bloc de code avec répétiton après un delai fixé. Dans notre cas, le delai est 1 seconde.

Pour tester le composant 'Timer', vous pouvez l'importer dans 'Accueil' et l'appeler avec le code suivant:

/component/Accueil.jsx

<Timer/>
<Timer compte={50}/>
<Timer compte={100}/>

En savoir plus sur useEffect()

Code source

Télécharger le projet créé

Important

Avant d'executer la commande 'npm run dev', bien vouloir exécuter la commande 'npm i'.

Travail à faire

Télécharger le travail