Scribd
Importer
2 vues2 pages

Ds React

Ce document est un devoir surveillé pour un module de technique des applications web, destiné aux étudiants de 2ème année BTS_WEB. Il comprend des exercices à choix multiples sur React, des questions de compréhension et une tâche pratique de développement d'une application React avec Vite. Les étudiants doivent créer une application de compteur interactif avec des fonctionnalités spécifiques et une structure de projet définie.

Transféré par

Abid Arij
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
2 vues2 pages

Ds React

Ce document est un devoir surveillé pour un module de technique des applications web, destiné aux étudiants de 2ème année BTS_WEB. Il comprend des exercices à choix multiples sur React, des questions de compréhension et une tâche pratique de développement d'une application React avec Vite. Les étudiants doivent créer une application de compteur interactif avec des fonctionnalités spécifiques et une structure de projet définie.

Transféré par

Abid Arij
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Devoir surveillé n°2

Groupe Fakher Formation Module : Technique des applications web


Ecole des Cadres de Sousse Durée : 1 heure
Niveau : 2ème année – BTS_WEB
Nom & Prénom :………………………………………………………………………..……………..

Exercice 1: Cocher la ou les bonne(s) réponse(s) :

1. JSX est :

a) Un langage backend b) Une extension JavaScript

c) Un framework d) Créer des interfaces utilisateur (UI)

2. Le Virtual DOM sert à :

a) Stocker les données b) Accélérer les mises à jour UI

c) Remplacer JavaScript d) Gérer les routes

3. useState est utilisé pour :

a) Gérer les API b) Gérer l’état local

c) Créer des routes d) Compiler React

4. React Router sert à :

a) Gérer les composants. b) Gérer les routes.

c) un bundler moderne. d) accélérer les mises à jour UI.

5. Dans React, les données passent principalement :

a) Du composant enfant vers parent b) Du parent vers enfant via props


c) Une copie légère du DOM réel. d) Point d’entrée de l’application React

Exercice 2 : Questions de compréhension

1. Différence entre React avec Vite et React classique

2. C’est quoi le flux de chargement dans React ?

3. Explique la différence entre props et state

4.

Exercice 3 : (Pratique)

Développer une application React avec Vite simple permettant de manipuler un compteur interactif
avec communication entre composants, affichage conditionnel et navigation.

1. Création du projet ds_votreNomPrenom

Installer Bootstrap import 'bootstrap/dist/css/[Link]'

1
src/
│── components/
│ ├──[Link]
2. Structure du projet │ ├──[Link]
│
│
│── pages/
│ ├── [Link]
│
│── [Link]
│── [Link]

3. Composants à créer :

[Link] Afficher :

• Titre de la page

• Le composant Counter

[Link] Affiche composant Home

Ce composant doit :

 utiliser useState
initialiser count à 0

 contenir 3 boutons (fonctions) :


Incrementer (btn btn-success)
Décrementer (btn btn-danger)
[Link] Reset (btn btn-secondary)
(composant principal)
 afficher un composant enfant :
Display (reçoit count en props)

 afficher un message conditionnel :


Le message s’affiche uniquement si :

count === 15

Texte :
" Bravo vous avez atteint 15 !"

[Link] Ce composant reçoit count via props et doit :


 afficher la valeur du compteur
 changer la couleur selon la valeur :
• vert si count > 0
• rouge si count < 0
• noir si count === 0

<h3 style={{ color }}>


Valeur actuelle : {count}
</h3>

Vous aimerez peut-être aussi