TP Synthèse : Créer un site E-commerce

1. Créer un nouveau projet tp-ecom

2. Ajouter les bibliothèques suivantes à l’aide du terminal :
• npm install react-router-dom
• npm install redux react-redux
3. Créer un fichier produits.json qui contient la liste des produits affichés

[
{"id":1,"designation":"Ordinateur Portable Lenovo IdeaPad 5 15ARE05
(81YQ00LXFE)","price":8040.55,"img":"1.jpg"},
{"id":2,"designation":"Ordinateur Portable Lenovo ThinkBook 15 G3 ACL
(21A4001WFE)","price":6040.55,"img":"2.jpg"},
{"id":3,"designation":"Ordinateur Portable Lenovo ThinkPad E14 Gen 4
(21E3009PFE)","price":11950.55,"img":"3.jpg"},
{"id":4,"designation":"Imprimante A3 Multifonction Jet d’encre HP OfficeJet
Pro ","price":4450.56,"img":"4.jpg"},
{"id":5,"designation":"Imprimante Multifonction Laser Monochrome HP LaserJet
M141","price":1970.45,"img":"5.jpg"},
{"id":6,"designation":"Epson EcoTank L3250 Imprimante multifonction à
réservoirs","price":1369.78,"img":"6.jpg"},
{"id":7,"designation":"Écran 23,8 Full HD Lenovo ThinkVision S24e-20
(62AEKAT2EU)","price":1456.78,"img":"7.jpg"},
{"id":8,"designation":"Imprimante Multifonction Jet d'encre Canon PIXMA TS3440
","price":567.88,"img":"8.jpg"}
]

4. Importer BOOTSRAP dans le fichier index.html

5. Créer un Reducer permettant de gérer le panier
6. Créer l’architecture suivante :
 7. Créer une interface comme affiché ci-dessous :
• Un header qui contient un menu permettant d’accéder au panier et retourner à la page
Home (utiliser le principe de routage)
• Une barre de recherche permettant de filtrer des articles
• Et un bouton panier permet d’accéder au panier et aussi indique aux utilisateur le nb
total des articles commandés
• Lorsqu’on clique sur le bouton ajouter au panier, le produit sélectionné va être ajouté
automatiquement dans le panier, si on clique sur un produit déjà commandé, la quantité
s’incrémente automatiquement de 1.
• Lorsqu’on clique sur une photo d’un article, on charge un autre composant :
ProductDetail.js : http://localhost:3000/ProductDetail/1 permettant d’afficher les
informations de l’article choisi.

Le clique sur le bouton panier permet d’afficher un composant avec l’url :

http://localhost:3000/panier pour consulter la commande d’utilisateur.

A partir de cette interface on peut modifier notre commande on supprimant un produit commandé
ou modifier la quantité commandée.

En bas, on fait appel au composant Total.js permettant de calculer le montant total HT et TTC
Ensuite, compléter le code afin d’afficher les informations d’un ordinateur quand on clique sur son
image