menu FixWins.com apps Spring MVC Spring Boot Angular Laravel ExpressJS ReactJS PFE list

Exercices

LocalStorage Weather Api ToDo et LocalStorage

React+ionic

Ionic Create project 4.React Outils utiles 5.Lifecycle Methods 6.JSX

Gestion Ventes

Produit CRUD

6.Form :Ajouter un produit 8.Liste produits 9.Pagination 10.Liste produits +Pagination 11.Liste produits +Datatable 11.Liste produits +load more 12.Supprimer un produit 14.Details d'un produit 15.Recherche et Autocomplete

Reacts:Utils

Gestion des erreurs Variables d'environment Cookies Internationalization proptypes Form validation React Animation Fragment Google Maps

Utilisateur CRUD

18.Inscription upload file 19.Connexion et Les sessions 19.Connexion: JWT Token

Ventes CRUD

17.Vendre un produit 18.Facture Generate PDF 19.Statisques Charts

Redux





Exercice:Saisir la note d'un stagiaire

Créer une application react qui permet de saisir le nom , prenom , groupe et la liste des notes d'un stagiaire puis afficher son resultat

Exemple :avec les components fonctionnels

import React, { useState } from 'react';

const TpStagiaireNote = () => {
  const [stagiaire, setStagiaire] = useState({
    nom: '',
    prenom: '',
    groupe: ''
  });

  const [uneNote, setUneNote] = useState({
    module: '',
    note: 0
  });

  const [listeNotes, setListeNotes] = useState([]);
  const [resultat, setResultat] = useState({
    moyenne: 0,
    adminOuNon: ''
  });

  const groupes = ['groupe1', 'groupe2', 'groupe3'];
  const modules = ['module1', 'module2'];
  let totalNote = 0;

  const getValue = (event) => {
    setStagiaire({
      ...stagiaire,
      [event.target.name]: event.target.value
    });
  };

  const getNote = (event) => {
    setUneNote({
      ...uneNote,
      [event.target.name]: event.target.value
    });
  };

  const ajouter = () => {
    totalNote += parseFloat(uneNote.note);
    const Vmoyen = totalNote / (1 + listeNotes.length);
    const etat = Vmoyen >= 10 ? "Admin" : "Nom Admin";

    setListeNotes([...listeNotes, uneNote]);
    setResultat({
      moyenne: Vmoyen,
      adminOuNon: etat
    });
  };

  return (
    <div>
      <table>
        <tbody>
          <tr>
            <td>Nom</td>
            <td><input type="text" name="nom" onChange={getValue} /></td>
          </tr>
          <tr>
            <td>Prénom</td>
            <td><input type="text" name="prenom" onChange={getValue} /></td>
          </tr>
          <tr>
            <td>Groupe</td>
            <td>
              <select name="groupe" onChange={getValue}>
                {groupes.map((g, index) => (
                  <option key={index}>{g}</option>
                ))}
              </select>
            </td>
          </tr>
          <tr>
            <td>Module</td>
            <td>
              <select name="module" onChange={getNote}>
                {modules.map((m, index) => (
                  <option key={index}>{m}</option>
                ))}
              </select>
            </td>
          </tr>
          <tr>
            <td>Note</td>
            <td><input type="number" name="note" onChange={getNote} /></td>
          </tr>
          <tr>
            <td></td>
            <td><input type="button" value="Ajouter" onClick={ajouter} /></td>
          </tr>
        </tbody>
      </table>

      <div>
        Nom: {stagiaire.nom}<br />
        Prénom: {stagiaire.prenom}<br />
        Groupe: {stagiaire.groupe}<br />
      </div>

      <div>
        <h3>Les notes</h3>
        <table>
          <thead>
            <tr>
              <th>Module</th>
              <th>Note</th>
            </tr>
          </thead>
          <tbody>
            {listeNotes.map((n, index) => (
              <tr key={index}>
                <td>{n.module}</td>
                <td>{n.note}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div>
        Moyenne: {resultat.moyenne}
        <b>{resultat.adminOuNon}</b>
      </div>
    </div>
  );
};

export default TpStagiaireNote;
import React,{Component} from "react";
class TpStagiaireNote extends React.Component{
constructor(props){
super(props)
this.state={
stagiaire:{
nom:'',
prenom:'',
groupe:''
},
uneNote:{module:'',note:0},
listeNotes:[],
resultat:{
moyenne:0,
adminOuNon:''
}


}

///un attributs afin de remplire la balie select du groupe
this.groupes=['groupe1','groupe2','groupe3']
this.modules=['module1','module2']
this.totalNote=0;
}
getValue=(event)=>{
this.setState({
stagiaire:{
...this.state.stagiaire,
[event.target.name]:event.target.value


}

})
}

//récupérer la note et le module
getNote=(event)=>{
this.setState({
uneNote:{
...this.state.uneNote,
[event.target.name]:event.target.value
}
})
}
//remplir le tableau des notes
ajouter=()=>{
//calculer la moyenne
this.totalNote+=parseFloat(this.state.uneNote.note);
let Vmoyen=this.totalNote/(1+this.state.listeNotes.length);

if(Vmoyen>=10){
var etat="Admin"
}
else
{
etat="Nom Admin"
}

//ajouter la nouvelle note dans le tableau des notes
//mettre ajour le resultat
this.setState({
listeNotes:[...this.state.listeNotes,this.state.uneNote],
resultat:{
moyenne:Vmoyen,
adminOuNon:etat

}
})
}
render()
{
return(<div>
<table>
<tr>
<td>Nom</td>
<td><input type="text" name="nom" onChange={this.getValue}/></td>
</tr>
<tr>
<td>Prénom</td>
<td><input type="text" name="prenom" onChange={this.getValue}/></td>
</tr>
<tr>
<td>Groupe</td>
<td>
<select name="groupe" onChange={this.getValue}>
{this.groupes.map((g)=>{
return (<option>{g}</option>)
})}
</select>
</td>
</tr>

<tr>
<td>Module</td>
<td>
<select name="module" onChange={this.getNote}>
{this.modules.map((m)=>{
return (<option>{m}</option>)
})}
</select>

</td>
</tr>
<tr>
<td>Note</td>
<td><input type="number" name="note" onChange={this.getNote}/></td>
</tr>

<tr>
<td></td>
<td><input type="button" value="Ajouter "onClick={this.ajouter}/></td>
</tr>

</table>

<div>
nom:{this.state.stagiaire.nom}<br/>
Prénom:{this.state.stagiaire.prenom}<br/>
Groupe:{this.state.stagiaire.groupe}<br/>
</div>
<div>
<h3>Les notes</h3>
<table>
<tr>
<th>Module</th>
<th>Note</th>
</tr>
{
this.state.listeNotes.map((n)=>{
return(<tr>
<td>{n.module}</td>
<td>{n.note}</td>
</tr>

)
})
}
</table>
</div>
<div>
Moyenne:{this.state.resultat.moyenne}
<b>{this.state.resultat.adminOuNon}</b>
</div>
</div>)
}

}
export default TpStagiaireNote