Les développeurs ReactJS rencontrent des difficultés pour gérer efficacement l’ajout et la suppression de produits dans leurs interfaces.
Une mauvaise gestion de ces fonctionnalités peut entraîner des interfaces rigides et peu interactives, réduisant l’expérience utilisateur et l’efficacité de l’application.
Cet article vous propose une solution simple et pratique pour implémenter une interface dynamique en ReactJS, permettant l’ajout et la suppression de produits en temps réel, avec un code optimisé et une approche intuitive.
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>
)
}
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!
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.
