6. Correction : Afficher la liste des pokémons

Je vous fournis ci-dessous une correction avec le style fourni par Materialize. Le choix de l’interface utilisateur est très subjectif, et il est tout à fait probable que vous n’ayez pas le même code que celui de la correction. De plus, je me suis permis d’ajouter plus d’informations dans ma liste de pokémon, comme l’image et la date de création du pokémon, ce qui n’étais pas prévu initialement dans l’exercice que je vous ai donné.

La liste des pokémons devrait s’afficher dans votre navigateur !

Cependant, je vous invite à vous inspirer de cette correction, afin d’avoir la même base pour la suite du cours. Voici le template du composant App.tsx :

 return (
  <div>
   <h1 className="center">Pokédex</h1>
    <div className="container"> 
     <div className="row"> 
      {pokemons.map(({id, name, picture, created}) => (
       <div className="col s6 m4" key={id}>
        <div className="card horizontal">
         <div className="card-image"> 
          <img src={picture} alt={name}/>
         </div>
         <div className="card-stacked">
          <div className="card-content">
           <p>{name}</p>
           <p><small>{created.toString()}</small></p>
          </div>
         </div>
        </div> 
       </div>
      ))}
     </div> 
    </div>
   </div>
  );

TOUTES les classes utilisées ci-dessus sont des classes issues de la librairie Materialize, et ne sont pas liées à la syntaxe des templates JSX.

Nous allons détailler chaque ligne, comme ça personne n’est perdu.

  • Ligne 3 : Un titre avec la classe center : c’est une classe de Materialize qui permet de centrer du texte.
  • Ligne 4 : Une balise div avec la classe container : c’est une classe de Materialize qui permet de centrer le contenu de notre page web.
  • Ligne 5 : Une balise div avec la classe row : c’est encore une classe de Materialize (décidément !) qui permet de définir une ligne dans la page, ce qui va nous permettre d’afficher nos pokémons les uns à la suite des autres.
  • Ligne 6 : On utilise la méthode JavaScript map, afin de créer un nouveau bloc JSX pour chacun de nos pokémons. On précise que sur des petits écrans, chaque Pokémon prendra la moitié de l’écran : s6, et sur les autres écrans (tablettes, PC) chaque Pokémon prendra un tiers de l’écran : m4. Ces classes signifient respectivement : s pour small (petits écrans) et m pour medium (écrans moyens). Le container que nous avons défini précédemment possède une largeur arbitraire de 12, donc s6 signifie : « Prendre la moitié de l’écran sur les petits écrans », car 6 est bien la moitié de 12 ! 🤓
  • Ligne 7 : On ajoute la propriété key, car c’est indispensable pour une liste en JSX. On utilise logiquement l’identifiant unique de chaque pokémon comme valeur pour la clef.
  • Ligne 8 : On utilise la classe card et horizontal pour définir un bloc avec une image à gauche et un texte à droite au sein de chaque bloc.
  • Ligne 10 : On utilise la syntaxe des accolades de JSX pour définir une source et des informations à notre image.
  • Ligne 14 et 15 : On affiche des informations supplémentaires concernant le pokémon, à savoir son nom et sa date de création.

Aussi, remarquez comme j’ai utilisez le destructuring à la ligne 6, pour ne récupérer que les propriétés d’un pokémon dont j’ai besoin : id, name, picture et created.

Je vous invite à jeter un coup d’œil à la documentation de Materialize pour comprendre ce que font toutes les classes CSS de notre template. La documentation est très bien faite, et il nous suffit la plupart du temps de récupérer les classes dont on a besoin pour ajouter du style à notre page web.

Au final, vous devriez obtenir la liste des pokémons qui s’affiche dans votre navigateur, après avoir lancé l’application avec npm start, bien sûr !