Technologies Web (M2 GL)

Série de TP N°2 (nodejs, react, bootstrap)

1. Avec npm installer l’application « create-react-app » puis créer une application
« react » en utilisant la commande « npx » et « create-react-app »
2. On souhaite réaliser une application de vente d’animaux de compagnie où il y aura
un menu constitué de trois pages : « Home », « Animals », « Birds », « Food for your
pet ».
a. Créer un tableau javascript qui contiendra le menu dans un tableau JS,
utiliser une boucle pour parcourir ledit tableau et générer une liste UL où
chaque « li » sera un composant react de type « Link », ayant un attribut
« to » pour l’URL et « label » comme titre du lien. Évidemment il aura
(/home, /animals, birds, et /food comme « url », chacun avec son label en
français.
b. Créer les trois pages Animals.js, Birds.js, et Food.js dans le dossier src/pages
3. Dans la page « Animals.js » créer un composant react AnimalsList qui recevra en
paramètre « props » la liste des « Animaux » que le composant doit afficher. Dans
App.js, appelez le composant AnialList avec comme paramètre réel « myAnimals » ci-
dessous défini.
4. Créer un composant Animal.js dans /src/components/, incluez-le dans Animals.js et
appelez-le pour chaque élément de la liste passée en paramètre en lui passant un
seul élément animal comme « props »
Pour des besoins de tests, supposez initialement, que dans le composant App, vous avez
une liste d’animaux avec les attributs suivants : nom, espece, age, descr, image. Par
exemple (à corriger):
myAnimals=[{
{‘nom’ : ‘Tom’, espece : ‘Chat’, ‘age’ : ‘2’, ‘descr’ : ‘un chat hyper gentil’, ‘image’ :
‘/images/Tom.jpg’},
{‘nom’ : ‘Greta’, ‘Chien’, ‘5’, ‘une chienne adorable pour les enfants’,‘/images/Greta.jpg’}
{‘nom’ : ‘Brandon’, ‘Chien’, ‘10’, ‘Ce bulldog est fait pour les grands amateurs’,
‘/images/Brandon.jpg’}
}]
5. Ajoutez bootstrap au projet et afficher chaque composant Animal dans un div avec la
classe « card ».
6. Modifiez le menu en 2 pour utiliser la classe navbar de Bootstrap (copier un
exemple de menu du site de bootstrap)
7. On souhaite que l’utilisateur puisse faire un « like » sur un « Animal », ajouter un
bouton Like à la carte, ajouter un champ « liked » initialisé à false dans le tableau
myAnimals », ajouter le code nécessaire pour modifier le tableau lorsque l’utilisateur
« like » ou « enlève le like » d’un animal.
NB : Vous pouvez travailler sur la page à la place Birds si ça vous tente.