TPs ReactJS

TP1 : Manipulation des classes

1. Créer la classe Document contenant les attributs id et
dateEdition.
2. Créer la classe Livre qui hérite de la classe Document
contenant en plus les attributs titre et auteur.
3. Créer deux instances de Document.
4. Créer trois instances de Livre.
5. Créer la méthode infoLivre qui retourne les informations
du livre comme ci-dessous :
Livre : id :11 Titre : POO Auteur : Auteur1 Date
Edition :4/4 /2023

1
TP 2 : Manipulation des tableaux
Soit :

let livres=[

{id:1,titre:"POO",auteur:"auteur1",prix:300},
{id:2,titre:"HTML",auteur:"auteur2",prix:100},
{id:3,titre:"CSS",auteur:"auteur3",prix:200},
{id:4,titre:"Jvascript",auteur:"auteur1",prix:200},

1. Créer la liste titres contenant tous les titres à partir de

livres en utilisant map.
2. Créer la liste titresAuteur1 contenant tous les livres de
l’auteur auteur1 à partir de livres en utilisant filtrer.
3. Chercher le livre dont l’id est égal à 2 en utilisant find.
4. Calculer le total des prix en utilisant reduce.
5. Créer un Array mesLivres copie de livres.

2
TP 3 : Langage JSX
Créer l’interface suivante en utilisant JSX.

3
TP 4 : Votre Premier Projet React

Créer la même interface du TP3 en utilisant React

Remarque :
Utiliser la commande : npx create-react-app tp4

4
TP 5 : Incrémenter et décrémenter un nombre (class
component)
Créer une classe component permettant d’incrémenter et de
décrémenter un nombre comme le montre l’image ci-dessous :

TP 6 : Incrémenter et décrémenter un nombre (fonction

component)
Créer une fonction component permettant d’incrémenter et de
décrémenter un nombre comme le montre l’image ci-dessous :

5
TP 7 : Jeu de Dé

Réaliser l’application de jeu de Dé comme le montre l’image ci-

dessous :

6
TP 8 : Les formulaires

Créer le formulaire ci-dessous :

7
TP 9 : Consommation des API

Afficher les articles des utilisateurs depuis les liens suivants :

https://jsonplaceholder.typicode.com/users
https://jsonplaceholder.typicode.com/posts
Comme le montre l’image ci-dessous :

8
TP 10 : Les Hooks

Récupérer les coordonnées de la souris comme le montre

l’image ci-dessous :

9
TP 11 : Le routage

En se basant sur le TP4, afficher les détails de chaque article

comme le montre l’image ci-dessous :

Remarque :
Utiliser la commande : npm install react-router-dom

10
TP 12 : Projet CRUD : Application de gestion des
stagiaires

Réaliser l’application de gestion des stagiaires suivante comme

le montre l’image ci-dessous :

11
TP 13 : Redux
Remarque :
Utiliser les commandes : npm install react-router-dom
npm install redux react-redux

soit :
const initialState={

stagiaires:[
{id:1,nom:"Stagiaire1",filière:"DD"},
{id:2,nom:"Stagiaire2",filière:"ID"}
]
};

En utilisant Redux, créer l’application de gestion des stagiaires

suivante comme le montre l’image ci-dessous :

12