Image ReactJS : Affichage dynamique

L'Équipe Alphorm
L'Équipe Alphorm Ajouter un commentaire 21e lecture en min

Dans notre article précédent, nous avons exploré le hook useEffect et son importance dans la gestion des effets de bord dans les applications React. Aujourd’hui, nous allons nous concentrer sur l’affichage dynamique d’images, une autre facette essentielle du développement web moderne. Utiliser image ReactJS pour manipuler et afficher des images offre flexibilité et efficacité. Ce tutoriel vous guide à travers les étapes pour afficher, ajouter et supprimer des images dans une application image ReactJS. Que vous soyez débutant ou expérimenté, vous découvrirez des techniques pratiques et des exemples concrets pour maîtriser l’affichage d’images avec image ReactJS.

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 :

Photo affichée sur un navigateur grâce à React.
Démarrage de l'affichage de photos sur un navigateur avec React


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 :

Photo dans le dossier public d'une application React.
Une photo prête à être affichée, stockée dans le dossier public de React.

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 :

"Commande 'npm start' exécutée pour démarrer l'application React."
Exécution de la commande 'npm start' pour lancer l'application React

Nous avons réussi à afficher la photo maintenant.

Pour approfondir vos connaissances et maîtriser pleinement ReactJS, découvrez notre formation vidéo sur React.

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
				
			
Application React affichée dans le navigateur après exécution de 'npm start'.
Affichage de l'application React suite au démarrage avec '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.

Photos affichées dans un ordre différent après rafraîchissement dans l'application React.
Changement d'ordre des photos suite à un rafraîchissement.

À 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 :

Ajout d'une image de manière interactive dans une application ReactJS
Intégration interactive d'image dans ReactJS


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 :

Redémarrage de l'application ReactJS pour afficher les modifications.
Visualisation des modifications après redémarrage de l'application ReactJS.


Voilà, et quand un utilisateur clique sur le boutton ajouter une image, il sera ajouté une autre image comme ceci :

Ajout d'une image supplémentaire en cliquant sur un bouton dans une application ReactJS
Ajout dynamique d'une image avec ReactJS à la suite d'un clic utilisateur.


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 :

Suppression d'une image spécifique par l'utilisateur dans une liste d'images sur ReactJS
Interaction utilisateur pour supprimer une image choisie dans ReactJS


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 :

"Résultat final montrant le fonctionnement correct de l'application ReactJS après suppression d'une image."
Application ReactJS en action : suppression réussie d'une image."
"Interface de l'application ReactJS montrant l'espace vide après la suppression d'une image."
"Visualisation de l'application après utilisation de la fonction de suppression."


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.

Interface montrant une liste de produits avec options d'ajout et de suppression dans une application ReactJS.
Interactivité avancée dans la gestion de produits sous ReactJS.


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.

Schéma représentant la structure de dossiers organisée pour une application ReactJS
Interactivité avancée dans la gestion de produits sous ReactJS.


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
				
			
Capture d'écran montrant la commande 'npm start' exécutée dans le terminal pour démarrer une application ReactJS.
Initialisation d'un projet ReactJS avec '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 :

Résultat visuel d'une application ReactJS stylisée avec CSS, montrant des éléments UI améliorés.
Application React embellie par CSS


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 :

Capture d'écran du processus de relancement d'une application ReactJS dans le navigateur."
Redémarrage réussi de l'application React


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 :

Vue de l'application React après les derniers ajustements
Mise à jour réussie avec les derniers ajustements


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:

Commande npm start exécutée dans un terminal pour relancer une application React et tester les modifications
Exécution de la commande npm start pour tester le bon fonctionnement de l'application React après modifications


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 :

Interface utilisateur montrant l'ajout d'un cahier au prix de 10 euros dans une application de gestion de produits
Nouveau cahier ajouté avec succès au catalogue à un prix compétitif de 10€

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.

 
ÉTIQUETÉ : Reactjs
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.
Laisser un commentaire