Manipuler des fichiers JSON externes peut être un casse-tête pour les développeurs, surtout lorsqu’il s’agit de gérer la récupération, l’affichage, et la mise à jour des données.
Une manipulation incorrecte peut entraîner des erreurs de données, une mauvaise performance, ou des vulnérabilités de sécurité, compliquant la gestion de l’application.
Cet article présente des techniques pratiques pour gérer efficacement des fichiers JSON externes, vous guidant étape par étape pour garantir une manipulation sécurisée et fluide des données dans vos applications.
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 :
Formation React 18 - Maîtriser la Création d'Interfaces Interactives
https://www.alphorm.com/tutoriel/formation-en-ligne-react-18---maitriser-la-creation-dinterfaces-interactives
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
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
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 :
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:
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
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.
Oh, il a été supprimé, et voilà ce que nous attendions.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
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
