Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

C12 : Développer en Front-end S6: Manipuler les propriétés et gérer les états T

C12 : Développer en Front-end S6: Manipuler les propriétés et gérer les états Travaux pratique 1 / 5 6. Travaux pratiques 6.1. Atelier 1 : réalisation du jeu de Dé Ce jeu consiste à réaliser une interface qui affiche après chaque clique sur le bouton jouer le numéro de la face de Dé qui est généré aléatoirement, valeur comprise entre 1 et 6, puis affiche aussi le nombre d’essais. Si la valeur générée est égal à une valeur cachée passée dans props, le programme affiche le message : Bravo vous avez trouvez la face cachée….. C12 : Développer en Front-end S6: Manipuler les propriétés et gérer les états Travaux pratique 2 / 5 Puis il s’affiche le bouton Initialiser qui permet réinitialise l’interface compléter le composant JeuDe.js J e u D e . j s import React from "react"; export default class JeuDe extends React.Component { constructor(props) { super(props); this.state = { face: null, compteur: 0, fin: false }; } jouer() { const valeur = Math.floor(Math.random() * 6) + 1; //completer le code } initialiser(){ this.setState({ face:null, compteur: 0, fin: false }); } render() { return ( <div> <img src="images/Dé.PNG" /> <h1>Jeu de Dé...</h1> <h2>face:….. h2> <h2>nombre d'essais…..<h2> <button onClick={() => this.jouer()}>jouer</button> C12 : Développer en Front-end S6: Manipuler les propriétés et gérer les états Travaux pratique 3 / 5 <p>Bravo vous avez trouvez la face cachée.....</p> <button onClick={() => this.initialiser()}>Initialiser</button> </div> ); } } ind e x . j s import React from "react"; import ReactDOM from "react-dom/client"; import JeuDe from "./components/JeuDe"; const element = document.getElementById("root"); const root = ReactDOM.createRoot(element); function App() { return ( <div> <JeuDe cache={2}/> </div> ); } root.render(<App />); La valeur de la face cachée est passée dans props dans cet exemple face cachée est 2 A mé li o r a t i on d e p r ogr a mm e Améliorer le programme en affichant les faces sous forme d’images C12 : Développer en Front-end S6: Manipuler les propriétés et gérer les états Travaux pratique 4 / 5 Le dossier images continent les images suivantes C12 : Développer en Front-end S6: Manipuler les propriétés et gérer les états Travaux pratique 5 / 5 J e u D e . j s import React from "react"; export default class JeuDe extends React.Component { constructor(props) { super(props); this.state = { face: null, compteur: 0, fin: false }; } jouer() { const valeur = Math.floor(Math.random() * 6) + 1; //a completer } getImage() { //cette méthde retourne un string sous forme ‘images/face1.png’ } initialiser(){ this.setState({ face:null, compteur: 0, fin: false }); } render() { const styleImage = { width: "60px", height: "60px" }; return ( <div> <img src="images/Dé.PNG" /> <h1>Jeu de Dé...</h1> <h2>face……<h2> <img src={this.getImage()} style={styleImage} /> <h2>nombre d'essais………<h2> <button onClick={() => this.jouer()}>jouer</button> <p>Bravo vous avez trouvez la face cachée.....</p> <button onClick={() => this.initialiser()}>Initialiser</button> </div> ); } } All e z b on c o ur ag e uploads/s3/ seance6-travaux-pratique.pdf