Devoir Surveillé
Objectif et description :
On souhaite développer une application pour la vente en ligne de
différents articles. Dans notre contexte, nous nous intéressons
particulièrement à deux types de produits : les PC portables et les
réfrigérateurs, comme le montre la figure 1.
Pour le faire, nous souhaitons utiliser ReactJS, vite et Bootstrap. Cette
application comporte :
1. Une barre de navigation (Un composant [Link] sera développé)
contenant une zone de texte et un bouton "rechercher".
2. Différents composants représentant chacun un produit. Chaque
produit est représenté par un composant [Link] (il s'agit d'un
composant card en bootstrap). Ce composant affiche :
a. Le type et la marque du produit (concaténation)
b. Une image illustrative du produit
c. Une liste contenant les différentes données décrivant le produit.
Les éléments de la liste sont affichés en deux parties. La première
contient les données partagées entre les deux types de produits. La
seconde contient les données spécifiques à chaque produit en
utilisant le rendu conditionnel. Pour cela, deux autres composants
réagissent sont développés.
d. Un bouton ajouter au panier.
3. [Link] : permet d'afficher uniquement les
éléments de la liste spécifiques au composant réfrigérateur
(référence, volume, classe énergétique)
4. [Link] : permet d'afficher uniquement les éléments
de la liste spécifique au composant PC Portable
function App() {
return (
<div className="row row-cols-1 row-cols-md-4 g-4">
<Produit
type="réfrigérateur"
marque="samsung"
couleur="silver"
volume="400L"
energie="A+"
reference="RT40K500JS8"
description="Twin Cooling"
imageSrc="./public/[Link]"
/>
<Produit
type="pc Portable"
marque="lenovo"
couleur="Gris"
ram="16GO"
disque="512G SSD 20 Tris"
processeur="i5 10-128"
description="15.6"
imageSrc="./public/[Link]"
/>
</div>
)
}
Figure 2 : Partie du code du fichier [Link]
1. Donner l’arbre, correspondant à la figure 1, généré par
ReactDom.
2. Développer le composant DetailsRefrigerateur sachant qu’il
permet d’afficher un élément de liste (<li>) pour chacune des
données (référence, volume et énergie) et que toutes les trois
données sont obligatoires et de type string.
3. Développer le composant DetailsComputer sachant qu’il
permet d’afficher un élément de liste (<li>) pour chacune des
données (ram, disque et processeur) et que toutes les trois données
sont de type string et sont obligatoires.
4. Au niveau du composant Produit, développer une fonction
afficheDetails qui affiche, selon le type du produit, soit un
composant DetailsRefrigerateur soit un composant DetailsComputer.
function afficheDetails(props) { ... }
5. Développer le composant Produit permettant de rendre un card
pour chaque produit en affichant :
a. son type et sa marque concaténés,
b. l’image illustrative,
c. une liste qui contient :
i. les données marque et couleur,
ii. DetailsRefrigerateur ou DetailsComputer selon le type
du produit en utilisant la fonction afficheDetails,
iii. une description si elle n’est pas vide,
iv. un bouton "Ajouter au Panier".
Réponse :
2. Composant DetailsRefrigerateur
function DetailsRefrigerateur({ reference, volume, energie }) {
return (
<>
<li>Référence: {reference}</li>
<li>Volume: {volume}</li>
<li>Classe énergétique: {energie}</li>
</>
);
}
[Link] = {
reference: [Link],
volume: [Link],
energie: [Link]
};
3. Composant DetailsComputer
function DetailsComputer({ ram, disque, processeur }) {
return (
<>
<li>RAM: {ram}</li>
<li>Disque: {disque}</li>
<li>Processeur: {processeur}</li>
</>
);
}
[Link] = {
ram: [Link],
disque: [Link],
processeur: [Link]
};
4. Fonction afficheDetails
function afficheDetails(props) {
if ([Link]() === "réfrigérateur") {
return <DetailsRefrigerateur
reference={[Link]}
volume={[Link]}
energie={[Link]}
/>;
} else if ([Link]() === "pc portable") {
return <DetailsComputer
ram={[Link]}
disque={[Link]}
processeur={[Link]}
/>;
}
return null;
}
5. Composant Produit
function Produit(props) {
const { type, marque, couleur, description, imageSrc } = props;
return (
<div className="col">
<div className="card h-100">
<div className="card-body">
<h5 className="card-title">{type} {marque}</h5>
<img src={imageSrc} className="card-img-top" alt={`${type}
${marque}`} />
<ul className="list-group list-group-flush">
<li className="list-group-item">Marque: {marque}</li>
<li className="list-group-item">Couleur: {couleur}</li>
{afficheDetails(props)}
{description && <li className="list-group-
item">Description: {description}</li>}
</ul>
<button className="btn btn-primary mt-3">Ajouter au
Panier</button>
</div>
</div>
</div>
);
}
[Link] = {
type: [Link],
marque: [Link],
couleur: [Link],
description: [Link],
imageSrc: [Link],
// Props pour réfrigérateur
reference: [Link],
volume: [Link],
energie: [Link],
// Props pour PC portable
ram: [Link],
disque: [Link],
processeur: [Link]
};
Notes supplémentaires:
1. J'ai utilisé PropTypes pour la validation des props (nécessite l'import
de 'prop-types')
2. Le composant Produit gère à la fois les props pour réfrigérateur et
PC portable
3. La description est affichée uniquement si elle existe
4. L'image utilise la prop imageSrc passée en paramètre
5. Le bouton "Ajouter au Panier" est stylisé avec les classes Bootstrap
6. La fonction afficheDetails est appelée à l'intérieur du composant
Produit pour afficher les détails
