Compétence 11 : FRONT END REACT

Filière : Full Stack 201 CONTROLE N1 QSM le 9/11/2022

1. ReactJS utilise _____ pour augmenter les performances

A. DOM virtuel
B. DOM réel
C. Les deux A et B sont vrais.
D. Aucune de ces réponses n’est vraie.
2. React est basé sur :
A. Les modules
B. Les services
C. Les composants
D. Les microservices
3. Quelles sont les limites de ReactJS?
A. React ne concerne que la couche View de l’application, nous avons donc toujours besoin de l’aide des
autres technologies pour obtenir un ensemble d’outils complet pour le développement.
B. React utilise des modèles en ligne et JSX. Cela peut sembler gênant pour certains développeurs
C. La bibliothèque de react est trop grande
D. Tout les réponses sont vrais
4. Comment accéder à l’état d’un composant à l’intérieur d’une fonction membre?
A. this.getState()
B. this.prototype.stateValue
C. this.state
D. this.values
5. La méthode componentDidMount est appelée lorsque ____
A. Le composant est créé pour la première fois
B. L’état du composant est mis à jour
C. Les deux A et B sont vrais.
D. Aucune de ces réponses n’est vraie.
6. À quoi sert le deuxième argument de setState?
A. Pour appeler du code une fois l’opération setState terminée
B. Pour remplacer complètement l’état au lieu de l’action par défaut
C. Pour accéder à l’état précédent avant l’opération setState
D. Aucune de ces réponses n’est vraie.
7. Quelles sont les deux façons dont les données sont traitées dans React?
A. state & props
B. services & components
C. state & services
D. props & components
8. Dans React, qu’est-ce qui est utilisé pour transmettre des données à un composant de l’extérieur?
A. setState
B. render avec des arguments
C. props
D. PropTypes
9. Qui développe React.js?
A. Google
B. Twitter
C. Apple
D. Facebook

10. Dans ReactJS, les props peuvent être utilisés pour passer des________
A. propriétés au composant
B. gestionnaires d’événements au composant
C. Les deux A et B sont vrais.
D. Aucune de ces réponses n’est vraie.
Compétence 11 : FRONT END REACT

Filière : Full Stack 201 CONTROLE N2 le 16/11/2022

On souhaite créer un formulaire en utilisant React JS qui gère la liste d’équipe de Foot Maroc
2022/2023

1. Créer un composant react qui permet d’ajouter un joueur

2. Ajouter à ce composant une fonction qui permet afficher la liste des joueurs

3. Créer un autre composant qui permet de faciliter la recherche par nom d’un joueur

Exemple :

CORRECTION
import React, { useState } from "react";
import ReactDOM, { createRoot } from 'react-dom/client';

import reportWebVitals from './reportWebVitals';

import './index.css';

function Recherche() {

const listEtudi =
[{nom:"Bounou",prenom:"Yassine",poste:"GARDIEN",photo:"photo6.jfif"},
{nom:"Hakimi",prenom:" Achraf ",poste:"DÉFENSEUR",photo:"photo3.jfif"},
{nom:"Romain ",prenom:"Saïss",poste:"DÉFENSEUR",photo:"photo1.jfif"},
{nom:"Amrabat",prenom:"Sofyan ",poste:"MILIEU",photo:"photo5.jfif"},
{nom:"Ziyech",prenom:"Hakim ",poste:"MILIEU",photo:"photo2.jfif"},
{nom:"Boufal",prenom:"Sofiane ",poste:"ATTAQUANT",photo:"photo4.jfif"}];
const [list, setList] = useState(listEtudi);
const [nomE,setNomE]=useState('');
const [preE,setPreE]=useState('');
const [villeE,setVilleE]=useState('');
const [photoE,setPhotoE]=useState('');

const AjouerClient=(e)=>{
e.preventDefault();

/*const tEtud2=[...listEtudi,
{nom:nomE,prenom:preE,ville:villeE,photo:photoE}]
setList(tEtud2)*/
list.splice(1,0,{nom:nomE,prenom:preE,ville:villeE,photo:photoE})
setNomE('');
setPreE('');
setVilleE('');
}

const Rechercher = (e) => {

if (e.target.value === "") {

setList(listEtudi);
return;
}
const ListRech = listEtudi.filter((etud) =>
etud.nom.toLowerCase().search(e.target.value.toLowerCase()) !== -1);
setList(ListRech);
};
return (
 <div className="app">
<div>
<form onSubmit={AjouerClient}>
<h1> Equipe de Foot Maroc 2022/2023 - Ajouter des Joueurs </h1>
<pre>Nom Joueur : <input type="Text" value={nomE}
onChange={(e)=>{setNomE(e.target.value)}} ></input><br></br></pre>
<pre>Prénom Joueur : <input type="Text" value={preE}
onChange={(e)=>{setPreE(e.target.value)}} ></input></pre>
<pre>poste Joueur :
<br></br> <br></br> GARDIEN<input type ="radio"
onChange={(e)=>{setVilleE(e.target.value)}} ></input> DÉFENSEUR<input type
="radio" onChange={(e)=>{setVilleE(e.target.value)}} ></input> MILIEU<input
type ="radio" onChange={(e)=>{setVilleE(e.target.value)}} ></input>
ATTAQUANT<input type ="radio" onChange={(e)=>{setVilleE(e.target.value)}}
></input>
</pre><br></br>

<pre>Photo : <input type="file" value={photoE}

onChange={(e)=>{setPhotoE(e.target.value)}} ></input></pre>
<br></br><br></br>
<input type ="submit" value="Ajouter Client"></input>
</form>
</div>
<br></br><br></br>
<div>
Rechercher : <input type="text" onChange={Rechercher} ></input>
</div>
{
list.map((etud) => (
<div >{etud.nom}</div>
))}

<main className="container">
<h1>Composition Equipe de Foot Maroc 2022/2023 - Liste des
Joueurs
</h1>
<center><img className="" height={80} width="80px" src="images.jfif" alt=""
/></center>
<div className="row mb-2">
{list.map((etud) => (

<div className="col">
<div className="">
<img className="" height={180} width="180px" src={etud.photo} alt=""
/>
<div className="card-body">
<p className="card-title"></p>
 <p className="card-text">{etud.nom + ' '+etud.prenom}</p>
<p className="card-text">{etud.Ville}</p>
<p className="card-text">{etud.poste}</p>
<button type="button" className="btn btn-sm btn-outline-
secondary">Supprimer</button>

</div>
</div>
</div>

))}
</div>
</main>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Recherche/>

);