Affichage des Pokémon de la première génération

Consignes

Votre mission est de créer une application React qui affiche les Pokémon de la première génération. Vous utiliserez un composant pour afficher tous les Pokémon sur une page, et un autre composant pour afficher les détails d'un seul Pokémon lorsqu'il est sélectionné.

Étapes à suivre

Suivez les étapes ci-dessous pour accomplir cette tâche :

1. Création du projet

Commencez par créer un nouveau projet React en utilisant Create React App ou tout autre outil de votre choix. Assurez-vous d'avoir Node.js et npm (ou yarn) installés sur votre machine.

2. Création des composants

Dans le dossier ./src/components, créez les composants nécessaires pour afficher les Pokémon. Voici les composants à créer :

PokemonList.js : Composant pour afficher tous les Pokémon de la première génération.
PokemonDetails.js : Composant pour afficher les détails d'un seul Pokémon.

Importer l'ensemble dans le fichier App.js.

3. Utilisation des propriétés (props)

Dans le composant PokemonList.js, utilisez les propriétés (props) pour passer les données des Pokémon au composant enfant. Vous pouvez stocker les données des Pokémon dans un fichier JSON et les importer dans le composant.

Affichez les informations suivantes pour chaque Pokémon :

Id : L'identifiant unique du Pokémon.
Nom : Le nom du Pokémon.
Type : Le(s) type(s) du Pokémon.

4. Affichage des détails d'un Pokémon

Lorsque l'utilisateur sélectionne un Pokémon dans la liste, affichez ses détails dans le composant PokemonDetails.js. Utilisez les propriétés (props) pour passer les caractéristiques du Pokémon au composant.

Affichez les caractéristiques suivantes pour le Pokémon sélectionné :

Points de vie (PV)
Attaque
Défense
Attaque Spéciale
Défense Spéciale
Vitesse

5. Récupération des données des Pokémon

Utilisez les liens suivants pour obtenir les données des Pokémon de la première génération :

Extraire les données nécessaires et les stocker dans un fichier JSON (./src/data/pokemonData.json par exemple). Importez ensuite ce fichier dans votre application pour utiliser les données des Pokémon.

6. Bonus (facultatif)

Ajoutez des images des Pokémon à partir d'une source externe. Vous pouvez utiliser l'API Pokémon pour obtenir les images des Pokémon en fonction de leur identifiant.
Améliorez le style des pages en utilisant des bibliothèques de composants ou des CSS personnalisés.

Conclusion

N'hésitez pas à personnaliser davantage l'exercice en ajoutant des fonctionnalités supplémentaires ou en peaufinant le design selon vos besoins et vos compétences.

Ce projet vous permettra de mettre en pratique vos connaissances en React, de travailler avec des composants et des propriétés (props) pour afficher et gérer les données des Pokémon, ainsi que d'utiliser des fichiers JSON pour stocker les données.

Note : Assurez-vous d'importer les fichiers de données correctement et de configurer les composants et le routage pour que l'exercice fonctionne correctement.

8.1 Portfolio 8.3 Meteo