Scribd
Importer
7 vues2 pages

Example

Le document contient un questionnaire à choix multiples (QCM) sur React, abordant des concepts tels que la syntaxe JSX, les hooks, le rendu conditionnel et la gestion des événements. Il inclut également un exercice pratique demandant la création d'un composant 'SelecteurCouleur' qui change la couleur d'un texte en fonction de l'état. Les réponses correctes aux questions et les instructions pour le code sont implicites dans le contenu.

Transféré par

abde.belfarchi
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
7 vues2 pages

Example

Le document contient un questionnaire à choix multiples (QCM) sur React, abordant des concepts tels que la syntaxe JSX, les hooks, le rendu conditionnel et la gestion des événements. Il inclut également un exercice pratique demandant la création d'un composant 'SelecteurCouleur' qui change la couleur d'un texte en fonction de l'état. Les réponses correctes aux questions et les instructions pour le code sont implicites dans le contenu.

Transféré par

abde.belfarchi
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

PARTIE 1 : QCM

1. Quelle est la syntaxe correcte pour afficher une variable JavaScript nom dans du JSX
A. <nome> B. {nom} C. ${nom} D. (nom)

2. Quel Hook est utilisé pour créer une variable d'état (state) ?
A. useState B. useEffect C. useContext D. useRedux

3. Comment écrit-on des styles en ligne (inline styles) en React ?


A. style="color: red;" B. style={color: "red"} C. style={{ color: "red" }}
D. style={ "color": "red" }

4. Comment passe-t-on une donnée d'un Parent vers un Enfant ?


A. Via le State B. Via les Props C. Via le CSS

5. Que se passe-t-il si un composant retourne deux balises div côte à côte sans parent
A .Cela fonctionne normalement. B. React renvoie une erreur.
C. Seule la première div s'affiche.

6. Lorsque vous affichez une liste d'éléments avec la méthode .map(), quel attribut
unique est obligatoire pour chaque élément ?
A. id B. index C. key D. Props

7. Quelle est la bonne syntaxe pour afficher un message UNIQUEMENT si isLogged


est vrai (Rendu conditionnel)
A. if (isLogged) <p>Bienvenue</p> B. isLogged && <p>Bienvenue</p>
C. <p visible={isLogged}>Bienvenue</p>

Dans un formulaire React, comment empêche-t-on le rechargement de la page lors


de la soumission (onSubmit) ?
A. return false. B. [Link](). C. [Link]().

9. Comment écrit-on un commentaire à l'intérieur du JSX ?


A. `` B. // commentaire C. {/* commentaire */}

10. Qu'est-ce que props {{children}}


A. Les composants enfants définis dans le State.
B. Le contenu qui se trouve entre la balise ouvrante et la balise fermante du composant.
C. Une méthode pour créer des enfants.
PARTIE 3 : PRATIQUE

Énoncé : Créez un composant SelecteurCouleur.


1. Il possède un state couleur initialisé à "black".
2. Il affiche un texte "Texte en couleur" dont la couleur change selon le state.
3. Deux boutons "Rouge" et "Bleu" permettent de changer le state respectivement
en "red" et "blue".

Codez le composant ci-dessous :

// 1. Imports
import React, { ........... } from 'react';

function SelecteurCouleur() {
// 2. Déclarez le state 'couleur'
const [............, setCouleur] = useState("black");

return (
<div>
{/* 2. Appliquez le style dynamique ici */}
<h1 style={{ color: ..............}}> Texte en couleur </h1>
{/* 3. Bouton Rouge */}
<button onClick={() => setCouleur("red")}> Rouge </button>
{/* 4. Bouton Bleu (Complétez le onClick) */}
<button onClick={ ................ }> Bleu </button>
</div>
);
}
export default SelecteurCouleur;

Vous aimerez peut-être aussi