3.3. Exercice : Créer un état pour gérer nos Pokémons

Nous allons commencer par rappeler que l’objectif de notre application est de gérer des Pokémons. Or pour le moment, notre application se contente d’afficher « Hello, React !« .

Il faut donc enrichir quelque peu le composant App.tsx de notre application. Je propose de commencer par ajouter un state à notre composant, qui contiendra une liste de pokémons. Et ce sera à vous de le faire, vous avez assez de connaissances pour réussir cette implémentation. 😉

Mais avant de vous laisser chercher tout seul, je me dois de vous donner deux choses :

• Une classe TypeScript permettant de modéliser un Pokémon.
• Un fichier de données contenant quelques Pokémons à injecter dans notre composant, à titre d’exemple.

Le modèle

Créer un nouveau dossier models dans le dossier src de votre application.

À l’intérieur du dossier models, créer un fichier pokemon.ts avec le code suivant :

export default class Pokemon {
 // 1. Typage des propiétés d'un pokémon.
 id: number;
 hp: number;
 cp: number;
 name: string;
 picture: string;
 types: Array<string>;
 created: Date;

 // 2. Définition des valeurs par défaut des propriétés d'un pokémon.
 constructor(
  id: number,
  hp: number = 100,
  cp: number = 10,
  name: string = '...',
  picture: string = 'https://assets.pokemon.com/assets/cms2/img/pokedex/detail/XXX.png',
  types: Array<string> = ['Normal'],
  created: Date = new Date()
 ) {
  // 3. Initialisation des propiétés d'un pokémons.
  this.id = id;
  this.hp = hp;
  this.cp = cp;
  this.name = name;
  this.picture = picture;
  this.types = types;
  this.created = created;
 }
}

Ce code est un peu long mais il ne doit pas vous effrayer. Il y a beaucoup de redondances dans cette classe ,car un pokémon possède 7 propriétés. Avec le commentaires que j’ai ajouté vous devriez comprendre le fonctionnement de ce code.

Cette classe a pour rôle de représenter un pokémon dans notre application. Chaque pokémon aura donc :

• Id : un identifiant unique sous forme de nombre.
• Hp : le nombre de points de vie du pokémon.
• Cp : le nombre de dégâts d’un pokémon.
• Name : un nom pour le pokémon.
• Picture : l’url d’une image représentant le pokémon. Si vous remplacez le terme « XXX » de l’url par un nombre, cela donne normalement accès à une image de pokémons.
• Types : un tableau contenant les types du pokémon (Eau, Feu, Vol, etc…).
• Created : la date de création du pokémon.

Les données

Maintenant, créons un fichier mock-pokemon.ts  dans le dossier models, qui contiendra les données de plusieurs Pokémons. Le fichier est un peu long, mais il s’agit simplement de données mises à disposition pour notre application. Etant donné que nous n’allons pas modifier ce fichier dans la suite du cours, je vous propose de le récupérer directement :

import Pokemon from './pokemon';
 
export const POKEMONS: Pokemon[] = [
 {
  id: 1,
  name: "Bulbizarre",
  hp: 25,
  cp: 5,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/001.png",
  types: ["Plante", "Poison"],
  created: new Date()
 },
 {
  id: 2,
  name: "Salamèche",
  hp: 28,
  cp: 6,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/004.png",
  types: ["Feu"],
  created: new Date()
 },
 {
  id: 3,
  name: "Carapuce",
  hp: 21,
  cp: 4,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/007.png",
  types: ["Eau"],
  created: new Date()
 },
 {
  id: 4,
  name: "Aspicot",
  hp: 16,
  cp: 2,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/013.png",
  types: ["Insecte", "Poison"],
  created: new Date()
 },
 {
  id: 5,
  name: "Roucool",
  hp: 30,
  cp: 7,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/016.png",
  types: ["Normal", "Vol"],
  created: new Date()
 },
 {
  id: 6,
  name: "Rattata",
  hp: 18,
  cp: 6,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/019.png",
  types: ["Normal"],
  created: new Date()
 },
 {
  id: 7,
  name: "Piafabec",
  hp: 14,
  cp: 5,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/021.png",
  types: ["Normal", "Vol"],
  created: new Date()
 },
 {
  id: 8,
  name: "Abo",
  hp: 16,
  cp: 4,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/023.png",
  types: ["Poison"],
  created: new Date()
 },
 {
  id: 9,
  name: "Pikachu",
  hp: 21,
  cp: 7,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/025.png",
  types: ["Electrik"],
  created: new Date()
 },
 {
  id: 10,
  name: "Sabelette",
  hp: 19,
  cp: 3,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/027.png",
  types: ["Normal"],
  created: new Date()
 },
 {
  id: 11,
  name: "Mélofée",
  hp: 25,
  cp: 5,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/035.png",
  types: ["Fée"],
  created: new Date()
 },
 {
  id: 12,
  name: "Groupix",
  hp: 17,
  cp: 8,
  picture: "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/037.png",
  types: ["Feu"],
  created: new Date()
 }
];

export default POKEMONS;

Comme vous pouvez le constater, ce fichier ne fait qu’exporter la constante POKEMONS à la ligne 3, qui contient des données nécessaires pour notre application.

Bon, maintenant vous avez tous les éléments nécessaires pour améliorer le composant Asp.tsx de notre application. Pour rappel, voici ce que vous devez faire :

• Définir une variable d’état nommé pokemons dans le composant App.tsx.
• Initialiser cet état avec la liste de pokémons contenu dans la constante POKEMONS.
• Typer l’état pokemons, afin qu’il contienne un tableau de pokémons (Un peu plus dur celui là, mais il y a toutes les réponses dans le cours).
• Afficher le nombre de pokémons présent dans votre state à l’utilisateur. Petit indice, la fonction JavaScript length devrait pouvoir vous aider, et JSX permet d’interpréter du JavaScript… je dis ça, je dis rien.

A vous de jouer maintenant ! 💪