5. Exercice : Afficher la liste des pokémons

Je vous propose d’améliorer notre composant App.tsx, afin de lister tous les pokémons présent dans son state. Pour cela, vous devrai utiliser la méthode JavaScript map.

Cependant, avant de développer notre template, je vous propose d’ajouter la librairie CSS Materialize pour avoir une interface utilisateur digne d’un vrai site. Vous n’êtes pas obligé de l’utiliser, mais cela vous permettra d’avoir la même base de code que celle utilisée dans ce cours.

Pour cela, ajoutez le CSS de Materialize pour styliser notre application. Ajoutez cette ligne dans le fichier index.html, avant la balise </head> :

<!-- Chargement de Materialize pour l'interface utilisateur -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

Et c’est tout, la librairie Materialize est chargé dans notre projet. Retournez dans votre application, vous devriez déjà voir une légère différence au niveau du style de notre application !

Maintenant, c’est à vous de jouer. Vous devez transformer notre composant App.tsx actuel pour qu’il affiche une liste qui affiche le nom de nos 12 pokémons. Il n’y a aucun piège, l’idée est de passer à la pratique à travers un exercice simple, pour vous donner confiance pour la suite. 💪

Bon courage à vous, on se retrouve de l’autre côté !