Manipuler dynamiquement des éléments HTML, comme les images, peut être complexe et source d’erreurs pour de nombreux développeurs travaillant avec ReactJS.
Sans une approche structurée, le code devient rapidement difficile à maintenir, ce qui nuit à la performance de l’application et complique son évolution.
Dans cet article, découvrez comment gérer efficacement des listes d’images, les ajouter et les supprimer dynamiquement dans ReactJS en utilisant des composants réutilisables et des hooks, tout en garantissant une application optimisée et performante.
Afficher une image avec ReactJS
Pour démarrer, nous commencerons par afficher une image dans notre navigateur. En d’autres termes, nous allons afficher une image avec Reactjs comme celle-ci dans votre navigateur :
Donc, pour ce faire, voyez comment l’implémenter dans notre application, premièrement, il faut que la photo à afficher soit dans le dossier public :
Et puis après, créer le composant image.js pour importer l’image avec ReactJS: src/component/image .js
import {useState} from 'react';
import '../styles/image.css'
export default function Image() {
const [image, setImage] = useState('camaro.png')
return(
<img src= {image}/>
)
}
Ainsi, l’utilisation du hook useState ici vise simplement à gérer l’état local de l’image Reactjs à afficher. Comme vous le savez déjà, pour que le composant soit appelé, il est nécessaire de l’importer dans le fichier index.js. Examinons maintenant le code du fichier index.js.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
import Image from './component/image';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Image/>
</React.StrictMode>
);
Pour lancer l’application, exécutez maintenant la commande suivante : npm start et verrez le résultat :
Nous avons réussi à afficher la photo maintenant.
Formation React 18 - Maîtriser la Création d'Interfaces Interactives
Dominez la création d'interfaces modernes avec React 18 et ses nouvelles fonctionnalités!
Afficher deux images dynamiques en ReactJS
Après avoir appris à afficher une seule image avec ReactJS, nous étendrons nos connaissances pour afficher plusieurs images de manière dynamique.
Pour réaliser cela, la procédure reste similaire, mais cette fois-ci, au lieu d’afficher une seule image, nous afficherons deux images avec ReactJS. Ainsi, la différence réside uniquement au niveau de notre composant image.js. Analysons-le maintenant : src/component/image.js.
import {useState} from 'react';
import '../styles/image.css'
export default function Image() {
const [images, setImage] = useState(['camaro.png','mustang.png'])
function ImageList(){
return images.map((element) =>{
return(
<img src= {element}/>
);
});
}
return (
<ImageList/>
);
}
À l’intérieur du composant Image ReactJS, une fonction nommée ImageList est définie. Cette fonction est responsable de mapper à travers le tableau d’images et de retourner une liste d’éléments <img>, où chaque élément <img> affiche une image spécifiée dans le tableau.
La méthode map() est utilisée pour itérer sur chaque élément du tableau images. Pour chaque élément, un élément <img> est retourné avec l’attribut src défini sur le nom de fichier de l’image correspondante.
Enfin, dans le retour de la fonction principale Image, le composant ImageList est rendu. Cela permet d’afficher toutes les images spécifiées dans le tableau images en utilisant la fonction ImageList. Et dans le fichier index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
import Image from './component/image';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Image/>
</React.StrictMode>
);
Et comme d’habitude, on est impatient de voir le résultat, du coup, démarrer votre application maintenant pour le voir :
npm start
Comme vous pouvez le constater, l’ordre dans lequel les images ReactJS sont affichées correspond à l’ordre dans lequel elles sont définies dans le tableau de notre composant.
Tester maintenant si on change la place de notre photo dans le tableau : src/component/image.js
import {useState} from 'react';
import '../styles/image.css'
export default function Image() {
const [images, setImages] = useState(['mustang.png','camaro.png'])
function ImageList(){
return images.map((element) =>{
return(
<img src= {element}/>
);
});
}
return (
<ImageList/>
);
}
Et cela nous donne les mêmes photos mais l’ordre d’affichage est différent.
À présent, nous avons réussi à afficher deux images avec ReactJS, et il va sans dire que vous serez également capable d’afficher un nombre quelconque d’images en suivant le même principe.
Ajouter une image
Après avoir appris à afficher des images dans nos applications ReactJS, il est temps d’explorer comment ajouter dynamiquement une nouvelle image à notre interface utilisateur. Cette fonctionnalité est particulièrement utile lorsque nous voulons permettre aux utilisateurs d’importer leurs propres images ou lorsque nous voulons ajouter des images de manière programmée en réponse à des événements ou à des conditions spécifiques. Dans cette partie du cours, nous découvrirons comment ajouter une image de manière interactive dans notre application ReactJS, c’est-à-dire, si veut on veut quelque chose comme cela :
Et quand l’utilisateur clique sur le boutton ajouter une image, la troisième image sera ajoutée
Vous avez une idée pour en faire ? Si vous dites non, pas de panique, on l’implémentera ensemble.
Voyons maintenant l’implémentation au niveau de notre composant image.js.
import {useState} from 'react';
import '../styles/image.css'
export default function Image() {
const [images, setImages] = useState(['mustang.png','camaro.png'])
const [img,setImg] = useState('challenger.png')
function ImageList(){
return images.map((element) =>{
return(
<img src= {element}/>
);
});
}
function AddImg(){
let newImg = [...images,img]
setImages(newImg);
}
return (
<>
<p><button onClick={AddImg}>Ajouter une image</button></p>
<ImageList/>
</>
);
}
Dans notre composant Image, on y a ajouté une fonction AddImg :
function AddImg(){
let newImg = [...images,img]
setImages(newImg);
}
Cette fonction est appelée lorsque l’utilisateur souhaite ajouter une nouvelle image. Elle crée d’abord une nouvelle copie du tableau images en ajoutant le nom de fichier de la nouvelle image (img) à la fin du tableau (Ici elle s’appelle challenger). Ensuite, la fonction setImages est utilisée pour mettre à jour l’état images avec ce nouveau tableau contenant la nouvelle image ajoutée.
Dans le retour de la fonction principale Image, un bouton « Ajouter une image » est affiché. Lorsque ce bouton est cliqué, la fonction AddImg est appelée pour ajouter la nouvelle image au tableau images. Ensuite, la fonction ImageList est appelée pour afficher la liste mise à jour des images.
Après avoir redémarrer notre application, on a un résultat comme ceci :
Voilà, et quand un utilisateur clique sur le boutton ajouter une image, il sera ajouté une autre image comme ceci :
On a réussi à réaliser notre objectif maintenant.
Supprimer une image en ReactJS
Il est temps d’explorer comment supprimer une image avec ReactJS d’une manière interactive. La possibilité de supprimer des images est essentielle pour maintenir une interface utilisateur propre et organisée, surtout lorsque les utilisateurs peuvent ajouter ou importer plusieurs images. Dans cette section du cours, nous plongerons dans les différentes approches pour supprimer une image spécifique de notre liste d’images affichées. Pour mieux comprendre ce que nous cherchons à accomplir, examinons les détails ci-dessous :
Et si on clique sur le boutton Delete, l’image ciblée va disparaitre.
Voyons, comment cela se fait dans notre composant alors :
Image .js
import {useState} from 'react';
import '../styles/image.css'
export default function Image() {
const [images, setImages] = useState(['mustang.png','camaro.png'])
const [img,setImg] = useState('challenger.png')
function ImageList(){
return images.map((element) =>{
return(
<div>
<img src= {element}/>
<button
onClick={()=>{
let newTableau = images.filter((nom)=> nom!== element);
setImages(newTableau);
}}
>Delete</button>
</div>
);
});
}
function AddImg(){
let newImg = [...images,img]
setImages(newImg);
}
return (
<>
<p><button onClick={AddImg}>Ajouter une image</button></p>
<ImageList/>
</>
);
}
La fonction ImageList est responsable de mapper à travers le tableau images et de retourner une liste d’éléments <div>, où chaque élément <div> contient une image spécifiée dans le tableau ainsi qu’un bouton « Delete ». Lorsque ce bouton est cliqué, la fonction onClick est déclenchée, supprimant l’image associée du tableau images en utilisant la méthode filter(), puis mettant à jour l’état images avec le nouveau tableau filtré en utilisant la fonction setImages. Et puis dans le rendu, un bouton « Ajouter une image » est affiché. Lorsque ce bouton est cliqué, la fonction AddImg est toujours appelée pour ajouter la nouvelle image au tableau images. Ensuite, la fonction ImageList est appelée pour afficher la liste mise à jour des images avec la possibilité de les supprimer grâce au bouton « Delete ».
Voyons le résultat maintenant comme preuve de tout cela si tout fonctionne très bien :
Après avoir supprimé une image en utilisant le bouton « Delete », voici le résultat affiché sur cette dernière capture d’écran.
Exercice d’application : manipulation d’images
Afin de mettre en pratique et d’évaluer votre compréhension de ce que nous venons d’apprendre, il est désormais temps de passer à l’exercice. J’aimerais commencer par vous présenter l’exercice. Notre tâche consistera à afficher une liste de produits avec la possibilité d’ajouter ou de supprimer des produits. Pour une meilleure compréhension, examinons l’image ReactJS ci-dessous, qui devrait clarifier l’idée et vous donner une meilleure idée de la façon de la mettre en œuvre.
Voilà, comme vous voyez, il y a une liste de produits avec un boutton qui nous permet de supprimer le produit et enfin on a un formulaire pour ajouter aussi un produit. Donc pour ce faire, on va le réaliser étape par étape.
Première chose à faire, on va essayer de mettre en place les bases du projet. Voyons la structure du dossiers alors.
Cela veut dire que chaque composant doit stocker dans le dossier component et chaque style css doit etre dans le dossier styles pour bien structurer notre projet.
Maintenant, créer le composant Produit dans le dossier : src/component/produit.js
export default function Produit(){
return(
<div>
<section>
<table>
<thead>
<tr>
<th>Produit</th>
<th>Tarif</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
</tbody>
</table>
</section>
<section></section>
</div>
)
}
Cet élément, il y a deux sections enveloppées dans une balise <div>.
La première section contient un tableau avec un en-tête de tableau <thead> contenant trois colonnes : « Produit », « Tarif », et « Delete ». Le corps du tableau <tbody> contient une ligne <tr> avec trois cellules <td> contenant des données « Data1 », « Data2 », « Data3 » qui sont sous forme d’exemple.
La deuxième section est actuellement vide (<section></section>), ce qui signifie qu’elle n’affiche aucun contenu mais elle sera pour le formulaire et nous allons le voir apres.
Cet extrait de code nous donne quelque chose celui la apres avoir démarrer le projet avec la commande que vous connaissez déjà :
npm start
Parfait, mais pour la mettre en forme, ajouter un fichier css dans le dossier styles : src/styles/produit.css.
div{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
section{
background-color:#ecf0f1;
font-family: Arial, Helvetica, sans-serif;
padding: 20px 25px;
margin: 30px;
border-radius: 10px;
}
h2{
font-size: 1.1rem;
letter-spacing: 1px;
color: #d35400;
}
th{
text-transform: uppercase;
font-size: 0.8rem;
color:#333;
}
td{
text-align: center;
padding-top: 10px;
padding-bottom: 5px;
border-bottom: 1px dashed #ccc;
}
Grâce à cette feuille de style CSS, notre page se présente de la manière suivante :
Maintenant, nous allons définir les produits dans notre composant : src/component/produit.js
import { useState } from 'react'
import '../styles/produit.css'
export default function Produit(){
const [prods, setProds] = useState([
{produit:'ordinateur',tarif:'1000e'},
{produit:'souris',tarif:'15e'},
{produit:'clabier',tarif:'30e'},
{produit:'fauteuil',tarif:'250e'}
]);
function ProduitList(){
return prods.map((p)=>{
return(
<tr>
<td>{p.produit}</td>
<td>{p.tarif}</td>
<td><button>Delete</button></td>
</tr>
)
})
}
return(
<div>
<section>
< h2>Liste de produits< /h2>
<table>
<thead>
<tr>
<th>Produit</th>
<th>Tarif</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<ProduitList/>
</tbody>
</table>
</section>
<section>
< h2>Ajouter un produit< /h2>
</section>
</div>
)
}
Ce code définit un composant React appelé Produit qui affiche une liste de produits avec leurs tarifs et la possibilité de supprimer chaque produit.
Dans ce composant, la fonction useState de React est importée pour gérer l’état local du composant. Une variable d’état prods est déclarée à l’aide de useState pour stocker les produits sous forme de tableau d’objets, chaque objet représentant un produit avec ses attributs « produit » et « tarif« .
La fonction ProduitList est définie à l’intérieur de Produit. Cette fonction utilise la méthode map pour parcourir le tableau prods et retourner une série de lignes de tableau <tr> représentant chaque produit avec son nom, son tarif et un bouton « Delete » pour supprimer le produit.
Dans le rendu de Produit, une structure HTML est retournée, comprenant deux sections. La première section contient une liste de produits affichée dans un tableau, en utilisant la fonction ProduitList pour générer les lignes du tableau à partir des données stockées dans prods.
En démarrant votre application, on aura le resultat comme ceci :
Exactement, comme vous avez pu le remarquer, le bouton « Delete » n’a pas encore de fonctionnalité associée. En d’autres termes, lorsque vous cliquez sur ce bouton, rien ne se passe. Nous allons maintenant rendre ce bouton fonctionnel.
Pour le faire, il suffit juste d’apporter une modification sur le boutton ‘Delete‘ dans la fonction ProduitList du composant comme ceci :
function ProduitList(){
return prods.map((p)=>{
return(
<tr>
<td>{p.produit}</td>
<td>{p.tarif}</td>
<td><button
onClick={()=>{
let newTableau = prods.filter((element)=>element!==p);
setProds(newTableau);
}}
>Delete</button></td>
</tr>
)
})
}
Le bouton « Delete » est configuré avec un événement onClick qui déclenche une fonction fléchée lorsqu’il est cliqué. Cette fonction utilise la méthode filter pour créer un nouveau tableau newTableau qui exclut l’élément p actuel, c’est-à-dire le produit associé à la ligne de tableau sur laquelle le bouton « Delete » a été cliqué. Ensuite, la fonction setProds est utilisée pour mettre à jour l’état prods avec le nouveau tableau newTableau, ce qui aura pour effet de supprimer le produit de la liste affichée à l’écran.
Ensuite , on va mettre en place le formulaire . Donc , dans le composant sur la deuxième section pour ajouter un produit, regrdons maintenant le code du formulaire :
<section>
< h2>Ajouter un produit< /h2>
<form>
<input type='text' name='produit' placeholder='Produit'></input>
<input type='text' name='tarif' placeholder='Tarif'></input>
<button id='valider'>Valider</button>
</form>
</section>
Dans la feuille de styles, regardons les ajustements effectués pour mettre en forme notre formulaire de manière appropriée.
Src/styles/produits.css
input{
display: block;
margin-bottom: 20px;
padding: 10px;
background: stransparent;
border: none;
outline: none;
border-bottom: 1px solid #27ae60;
}
button{
padding: 5px 15px;
border-radius: 5px;
border:none;
background-color : #fff;
cursor: pointer;
opacity: 0.7;
}
button :hover{
opacity: 1;
}
#valider{
display: block;
margin: auto;
}
Et tout cela nous donne un résultat comme ceci :
Nous approchons de notre objectif final. Nous allons conclure avec la dernière fonctionnalité, qui est l’ajout d’un produit. En d’autres termes, une fois que nous remplirons le formulaire, le produit sera ajouté à la liste des produits affichée.
Pour le faire, il suffit juste de créer une fonction pour ajouter le produit ajouté dans la liste de produits affichée. Examinons le avec le code ceci :
function AddProd(e){
e.preventDefault();
let produit = document.getElementById('produit').value;
let tarif = document.getElementById('tarif').value;
let newTableau = [...prods,{produit:produit,tarif:tarif}]
setProds(newTableau)
document.getElementById('produit').value = '';
document.getElementById('tarif').value = '';
}
Cette fonction AddProd est une fonction JavaScript qui est appelée lorsque le formulaire d’ajout de produit est soumis. Voici ce qu’elle fait :
e.preventDefault():Cette ligne empêche le comportement par défaut du formulaire, c’est-à-dire le rechargement de la page lors de la soumission du formulaire.
let produit = document.getElementById(‘produit’).value : Cette ligne récupère la valeur de l’élément input ayant l’identifiant ‘produit’ dans le formulaire. Cela correspond au nom du produit saisi par l’utilisateur.
let tarif = document.getElementById(‘tarif’).value; : Cette ligne récupère la valeur de l’élément input ayant l’identifiant ‘tarif’ dans le formulaire. Cela correspond au tarif du produit saisi par l’utilisateur.
let newTableau = […prods,{produit:produit,tarif:tarif}] : Cette ligne crée un nouveau tableau newTableau en copiant le contenu de prods à l’aide de l’opérateur de décomposition (…). Ensuite, un nouvel objet représentant le produit saisi par l’utilisateur est ajouté à ce tableau. Cet objet contient les propriétés produit et tarif avec les valeurs récupérées précédemment.
setProds(newTableau) : Cette ligne met à jour l’état prods avec le nouveau tableau newTableau contenant le produit ajouté. Cela aura pour effet de rafraîchir l’affichage de la liste des produits avec le nouveau produit ajouté.
Et enfin, le formulaire sera vide si les données sont validées.
On a fini sur cela maintenant, donc pour tester si tout fonctionne bien, on redémarre l’application et voyons le résultat:
Voilà, on va tenter d’ajouter le produit cahier avec le tarif 10, et on verra si cela ajoutera dans la liste de produit affichée :
Super, tout fonctionne parfaitement, nous avons réussi à atteindre notre objectif et avons conclu cet article avec succès.
Conclusion
Maîtriser l’affichage dynamique d’images avec image ReactJS est une compétence précieuse pour tout développeur web. Ce guide vous a appris à afficher une image, gérer plusieurs images, ajouter de nouvelles images dynamiquement et les supprimer de manière interactive. Ces compétences vous aideront à créer des applications web réactives et engageantes. Continuez à explorer les possibilités offertes par image ReactJS pour améliorer encore plus vos projets. Et par la suite nous allons traiter le volet des données Docker.
