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 :
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 :
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 :
A vous de jouer maintenant ! 💪