Corrigé-DEVOWFS M204 EFMR

Direction Régionale Rabat – Salé – Kénitra
Année de Formation 2022/2023
Examen régional de Fin de Module
M204 Développement front-end
Filière: DEVWFS Durée : 2h30

Année : 2 A Barème : / 40
Eléments de Correction
Partie Théorique (20 pts)
Exercice 1 : (4 pts)
Citez quelques avantages de Redux :
 Changements d'état prévisibles

 Etat centralisé
 Débogage facile
 Conserver l'état de la page
 undo/redu
 Modules complémentaires de l'écosystème angular,vue,react ,vanilla js
Exercice 2 : Choisir la bonne réponse (10 pts)
1- Comment appeler en JSX une fonction mafonction() depuis un élément h2 ? (2 pts)

A. <h2>{mafonction()}</h2>
B. <h2>${mafonction()}</h2>
C. <h2>{mafonction}</h2>
D. <h2>${mafonction}</h2>
2- Comment incorporer ce style inline qui spécifie font-size :14px et color :green avec du
code JSX ? (2 pts)
A. style={{font-size:14,color:'green'}}
B. style={{fontSize:'14px',color:'green'}}
C. style={fontSize:'14px',color:'green'}
D. style={{font-size:14px,color:'green'}}
3- On utilise quelle fonction pour modifier l’état d’un composant React? (2 pts)
A. this.getState()
B. this.State = {}
1
C. this.setState()
D. this.changeState()
4- La méthode componentDidMount est invoquée quand (2 pts)
A. L’état du composant est mis à jour
B. Le composant est créé pour la première fois
C. Le composant est supprimé
D. Le composant est retiré du DOM
5- Comment faire pour rendre une liste dynamique de composants en fonction des
valeurs d’un tableau. (2 pts)
A. Inclure une boucle for ou while
B. Utiliser la méthode reduce du tableau
C. Utiliser le composant <Each />
D. Utiliser la méthode Array.map()
Exercice 3 : Expliquer l’intérêt des codes suivants : (6 pts)
Code 1
componentDidMount(){
fetch('https://jsonplaceholder.typicode.com/users')
.then((response)=>{ console.log(response); return response.json()})
.then((users)=>{this.setState({utilisateurs:users})})
}
Consommation d’un API par fetch classe composant
Code 2
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => { document.title = `vous avez cliqué ${count} fois`; });
return (
<div>
<p>vous avez cliqué {count} fois</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
2
</div>
);
}
Le titre de document va prendre la valeur du compteur après chaque modification compteur,

Le composant fonctionnel Example permet d’afficher automatiquement le compteur dans le
paragraphe en bas puis aussi dans le titre du document.
Partie Pratique (20 pts)
1- Ecrire le code du (des) composant(s) permettant d’afficher la liste des voyages comme
présentées dans la page 1 du site (8 pts)
import { Link } from 'react-router-dom';

function Product(props) {
const { id, intitule, prix, source } = props;
let src = "/pictures/"+source;
let url = "/product/"+id;
return (
<div className="col">
<div className="card shadow-sm">
<img className="bd-placeholder-img card-img-top" src={src} alt="" />
<div className="card-body">
<p className="card-title">{intitule}</p>
<p className="card-text">{prix}</p>
<div className="d-flex justify-content-between align-items-center">
<Link to={url}><button>Plus de détails</button></Link>
</div>
</div>
</div>
</div>
);
}
export default Product;
import Product from './Product';

function Products(props) {
return (
<main className="container">
3
<h1>Circuits réguliers</h1>
<div className="row mb-2">
{props.products.map((product) => (
<Product key={product.id} id={product.id} intitule={product.intitule}
prix={product.prix} source={product.source} />
))}
</div>
</main>
)
}
export default Products;
2- Ecrire le code du (des) composant(s) permettant d’afficher les détails du voyage (6

pts)
import { useParams } from 'react-router-dom';

import { Link } from 'react-router-dom';
function Detail(props) {
const { id } = useParams();
let product = props.products.find(item => item.id === parseInt(id))
let src = "/pictures/"+product.source;
return (
<main className="container">
<Link to="/">Revenir aux autres circuits</Link><br/>
<img className="bd-placeholder-img w-25" src={src} alt="" />
<p>{product.intitule}</p>
<p>{product.prix}</p>
</main>
);
}
export default Detail;
3- Ecrire le code du composant App.js en utilisant les routages (6 pts)
import React from 'react';
4
import { Routes, Route } from 'react-router-dom';
import Products from './Components/Products';
import Detail from './Components/Detail';
function App() {
//inclure ici le tableau products
return (
<div className="App">
<Routes>
<Route path="/" element={<Products products={products} />} />
<Route path="/product/:id" element={<Detail products={products} />} />
</Routes>
</div>
);
}
export default App;

Corrigé-DEVOWFS M204 EFMR

Transféré par

Droits d'auteur :

Formats disponibles

Corrigé-DEVOWFS M204 EFMR

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Corrigé-DEVOWFS M204 EFMR

Transféré par

Droits d'auteur :

Formats disponibles

Direction Régionale Rabat – Salé – Kénitra

Année de Formation 2022/2023

Examen régional de Fin de Module

M204 Développement front-end

Filière: DEVWFS Durée : 2h30

Partie Théorique (20 pts)

Citez quelques avantages de Redux :

 Changements d'état prévisibles

Exercice 2 : Choisir la bonne réponse (10 pts)

1- Comment appeler en JSX une fonction mafonction() depuis un élément h2 ? (2 pts)

Consommation d’un API par fetch classe composant

Le titre de document va prendre la valeur du compteur après chaque modification compteur,

Partie Pratique (20 pts)

import { Link } from 'react-router-dom';

import Product from './Product';

2- Ecrire le code du (des) composant(s) permettant d’afficher les détails du voyage (6

import { useParams } from 'react-router-dom';

3- Ecrire le code du composant App.js en utilisant les routages (6 pts)

import React from 'react';

Vous aimerez peut-être aussi