Gérer les Données en ReactJS

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

Manipuler des données ReactJS est crucial pour créer des applications web dynamiques. Dans ce chapitre, nous verrons comment utiliser des fichiers JSON dans une application ReactJS. Vous apprendrez à récupérer, afficher, et mettre à jour des données externes, notamment via des API ou des bases de données. Ce guide complet vous aidera à maîtriser les données ReactJS pour améliorer vos projets web. Pour ceux qui s’intéressent également à la gestion des images dans ReactJS, consultez notre article précédent sur les images ReactJS.

Créer un fichier JSON pour les données en ReactJS

Tout d’abord, nous devons créer le fichier JSON pour nos données ReactJS.

Avez-vous une idée de l’emplacement où nous devrions stocker ce fichier dans la structure de notre projet ?

Si vous n’êtes pas sûr, ne vous inquiétez pas, nous sommes ici pour apprendre ensemble. Nous allons donc naviguer vers le dossier « public » pour créer notre fichier à l’emplacement suivant : public/cars.json.

				
					{
"cars":[
{
"nom":"mustang",
"marque":"ford",
"image":"mustang.png"
},
{
"nom":"challenger",
"marque":"dodge",
"image":"challenger.png"
},
{
"nom":"camaro",
"marque":"chevrolet",
"image":"camaro.png"
}
]
}
				
			


Parfait, nous disposons désormais de données à utiliser. Notre prochaine étape consiste à les manipuler et à les afficher dans notre navigateur. C’est notre objectif principal. Pour atteindre cet objectif avec succès, nous allons procéder étape par étape dans notre mise en œuvre. Pour commencer, nous allons définir les bases de notre projet.

Créons maintenant le fichier cars.js dans le répertoire src/components/cars.js, ainsi que les fichiers CSS pour styliser nos pages : src/styles/cars.css. Ensuite, ajoutons une mise en page dans le fichier index.css pour donner un style à notre page principale : index.css.

				
					body {
background-color:#ccc;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1rem;
}
				
			


Et cela nous donne déjà une petite personnalisation de notre page comme ceci :

Capture d'écran montrant la personnalisation d'une page web avec des données dynamiques.
Mise à jour réussie de notre page grâce à une personnalisation poussée

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

Développer un composant fonctionnel en ReactJS

Créons maintenant notre composant fonctionnel Car pour récupérer nos données dans le fichiers cars.json et les afficher dans le navigateur. Dans le dossier src/component/cars.js

				
					import { useEffect, useState } from "react";
import '../styles/cars.css';
export default function Cars(){
const [cars,setCars] = useState([])
useEffect(()=>{
fetch('cars.json')
.then(response =>response.json())
.then(data=>setCars(data.cars))
.catch(error => console.log(error))
},[]);
function ListCars(){
return cars.map((element)=>{
return(
<>
<h3>{element.nom}</h3>
<img src={element.image}/>
<p>{element.type}</p>
</>
)
})
}
return(
<ListCars/>
);
}
				
			

En examinant ce code, les importations de useEffect et useState depuis React sont utilisées pour gérer les effets de bord et l’état local du composant, respectivement.

Le fichier de style cars.css, comme vous le savez déjà sa raison d’être, est importé pour appliquer les styles au composant Cars.

La fonction Cars (appelé aussi composant) est définie comme un composant fonctionnel. À l’intérieur de cette fonction, un état local est initialisé à l’aide de useState. La variable cars représente les données des voitures, qui est initialement vide.

La fonction useEffect est utilisée pour effectuer une action dès que le composant est monté. Dans ce cas, elle envoie une requête à 'cars.json', récupère les données, puis les stocke dans l’état local cars à l’aide de la fonction setCars.

La fonction ListCars est définie à l’intérieur de Cars. Cette fonction prend les données des voitures et retourne une liste d’éléments JSX, où chaque élément représente une voiture avec son nom, son image et son type.

Enfin, le composant Cars retourne l’élément JSX <ListCars />, ce qui affiche la liste des voitures une fois qu’elles ont été récupérées et chargées dans l’état local.

Bref, ce extrait de code nous permet exactement de récupérer nos données dans le fichiers cars.json

Si vous êtes impatient de voir le résultat et de vérifier si les données ReactJS sont correctement affichées, redémarrez maintenant le projet :

				
					npm start
				
			
Vérification de l'Affichage des Données
Confirmation de la correcte visualisation des données sur notre interface


Voilà, on arrive a afficher nos données non. Parfait.

Maintenant, on va donner de mise en forme pour bien pratiquer un peu le css.

Src/styles/cars.css

				
					article{
display: flex;
justify-content: center;
}
section{
width: 150px;
border: 1px solid #fff;
padding: 20px;
margin: 10px;
background-color: #fff;
opacity: 0.5;
}
section:hover{
opacity: 1;
}
section h3 {
text-align: center;
text-transform: capitalize;
}
section span{
text-decoration: capitalize;
font-weight: 700;
font-size: 0.8rem;
}
section img{
width: 100%;
border-radius: 5px;
}
				
			


Et on est obligé d’importer ce fichier dans notre composant : src/component/cars.js

				
					import { useEffect, useState } from "react";
import '../styles/cars.css';
export default function Cars(){
const [cars,setCars] = useState([])
useEffect(()=>{
fetch('cars.json')
.then(response =>response.json())
.then(data=>setCars(data.cars))
.catch(error => console.log(error))
},[]);
function ListCars(){
return cars.map((element)=>{
return(
<section>
<h3>{element.nom}</h3>
<p>Marque: <span>{element.marque}</span></p>
{<img src={element.image}/>}
</section>
)
})
}
return(
<article>
<ListCars/>
</article>
);
}
				
			


Voilà, comme vous remarquez, on a bien importé le fichier cars.css dans notre composant. En redémarrant pour voir la nouvelle mise en forme, exécuter la commande :

				
					 npm start
				
			
Écran montrant la personnalisation d'une page ReactJS
Aperçu de la personnalisation avancée d'une page ReactJS utilisant des données externes

D’après ce résultat, on bien afficher et mettre en forme les données ReactJS. Super.

Tout se passe bien jusque-là, mais si je vous demande , comment faire si veut avoir quelque chose comme ceci sur notre navigateur :

Icône d'étoile pour supprimer le contenu ciblé dans une application ReactJS
Utilisation d'une icône étoile pour la suppression rapide de données dans ReactJS


C’est-à-dire, on a une petite etoile qui nous permet de supprimer le contenu ciblé mais à condition que le ne s’affiche que le souris passe sur le contenu. Cela vous semble difficile. C’est normale mais pas de panique,on va le realiser ensemble.

Examener d’abord la modification dans notre composant pour ajouter la petite étoile :

				
					function ListCars(){
return cars.map((element)=>{
return(
<section>
<div>x</div>
<h3>{element.nom}</h3>
<p>Marque: <span>{element.marque}</span></p>
{<img src={element.image}/>}
</section>
)
})
}
				
			


Dans la fonction ListCars(), nous avons simplement ajouté une div pour représenter une petite étoile dans le rendu. Ensuite, pour la mise en forme, examinons le code suivant présent dans le même fichier cars.css :

				
					section div {
position: absolute;
top: 7px;
right: 15px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color:#333;
color: #ccc;
display: flex;
justify-content: center;
align-items:center;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
visibility: hidden;
}
section:hover div {
visibility: visible;
}
				
			


Cette modification nous donne quelque chose comme cei dans notre navigateur  en démarrant notre projet:

Résultat visible après l'utilisation de l'icône étoile pour supprimer un élément
Le résultat immédiat de la suppression de contenu dans une application ReactJS


D’accord, cependant la fonctionnalité de la petite étoile n’est pas encore opérationnelle. En d’autres termes, cliquer dessus ne produit aucun effet pour le moment. Il nous reste encore une tâche à accomplir pour atteindre pleinement notre objectif alors.

Alors pour terminer, on va regarder la modification dans notre composant :src/component/cars .js

				
					import { useEffect, useState } from "react";
import '../styles/cars.css';
export default function Cars(){
const [cars,setCars] = useState([])
useEffect(()=>{
fetch('cars.json')
.then(response =>response.json())
.then(data=>setCars(data.cars))
.catch(error => console.log(error))
},[]);
function ListCars(){
return cars.map((element)=>{
return(
<section>
<div
onClick={()=>{
let newTableau = cars.filter((id)=>id!== element);
setCars(newTableau);
}}
>x</div>
<h3>{element.nom}</h3>
<p>Marque: <span>{element.marque}</span></p>
{<img src={element.image}/>}
</section>
)
})
}
return(
<article>
<ListCars/>
</article>
);
}
				
			


La modification consiste au niveau de la fonction ListCars(),Un élément <div> représentant une petite croix ‘x’. Cet élément est configuré avec un événement onClick qui se déclenche lorsque l’utilisateur clique dessus. Lorsque la croix est cliquée, une fonction fléchée est exécutée. Cette fonction utilise la méthode filter pour créer un nouveau tableau newTableau qui exclut la voiture actuelle (element) de la liste. Ensuite, la fonction setCars est appelée pour mettre à jour l’état cars avec le nouveau tableau newTableau, ce qui a pour effet de supprimer la voiture de la liste affichée.

Nous approchons de notre objectif maintenant, mais pour nous assurer que tout fonctionne correctement, il est essentiel de tester le projet.

				
					npm start
				
			
Résultat visible après l'utilisation de l'icône étoile pour supprimer un élément
Le résultat immédiat de la suppression de contenu dans une application ReactJS

Voici ce qui s’affiche dans le navigateur. Si vous cliquez sur l’une de ces données ReactJS, vous verrez ce qui se passera.

Capture d'écran montrant le résultat final de l'application ReactJS après la manipulation des données externes
Le rendu final de l'application avec données externes manipulées avec succès


Oh, il a été supprimé, et voilà ce que nous attendions.

Conclusion

Maîtriser les données ReactJS est essentiel pour développer des applications web interactives. Nous avons couvert comment récupérer, afficher, et mettre à jour des fichiers JSON. En appliquant ces techniques, vous gérerez efficacement les données ReactJS dans vos projets, optimisant ainsi l’expérience utilisateur et la performance de vos applications. Et par la suite nous allons traiter le volet de contrôle des formulaires de ReactJS

É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