ReactJS+NodeJS

React: Intoduction

1.Introduction,istallation

Components

2.a>Components 2.b> Constructeur et propriétés 2.c> Components:Exemples

State,filter , map ...

4.a> State (data) 4.b> State (change data) 4.c> State (Formulaire)
Exercice 1:Vente Produit Exercice 2:Note Stagiaire Exercice 3:Quizz Exercice 4:Gestion matchs Exercice 5:Crud Produit

Props

5a.Props introduction Exercice 1

Exercices

6.a Nombre Random 6.b Game Pile ou Face 6.c Calculatrice 6.c Quizz 6.c Les Styles Dynamiques 6.c Array Object Filter

..

7.React Hooks

Exercices

Exercice1: Client Crud Exercice2 :Filter Teams Exercice3 : Multi-select

Props dans Composant fonctionnel

Exemples Exercice1 Exercice2 Exercice3

Routage

7.Routage 8.Routage :public and restricted

Axios ,Fetch, Api

CRUD application

Redux,Redux Toolkit

Cours Redux

Exercices Redux

Exercice1 Social App Exercice1 WhatsApp App Exercice2 Restaurant App Exercice3 Student App Exercice4 Income ,Expense App Exercice5 Bank App

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:Gestion des ventes

Créer une application en React permettant de:
  1. Ajouter un produit dans un tableau
  2. Supprimer un produit
  3. Modifier un produit
  4. Vendre un produit
  5. Si la quantité d'un produit devient égale à 0 la ligne de ce produit doit etre colorée en rouge
import React,{Component} from "react"
class TPCrudProduit extends React.Component{
    constructor(props){
        super(props)
        this.state={

            //objet permet de récupérer les données from les inputs
            produit:{
                id:0,
                nom:'',
                prix:0,
                quantite:0,
                marque:''
            },

            //sauvegarder les produits afin de les affichés
            listeProduit:[],
            errorChamps:false,
            buttonAjouter:true
        }

    }


    //récupérer les valeurs des inputs puis les sauvegarder dans l'objet produit du state
    getValue=(event)=>
    {
          this.setState({
                produit:{
                    ...this.state.produit,
                    [event.target.name]:event.target.value
                }
            })

       
       }
       
   

    //ajouter un produit dans le tableau listeProduits

    ajouterProduit=()=>{
        //récupérer l'objet produit from state
        const {produit}=this.state;
        //vérifier si tout les champ de l'objet produit du state sont remplis
        if(produit.nom!='' && produit.marque!='' && produit.prix>0 && produit.quantite>0)
        {
            //insérer le produit dans le tableau
            this.setState({

               
                listeProduit:[...this.state.listeProduit,produit],
                //initialiser les attribut de l'objet produit afin d'ajouter un nouveau produit
                produit:{
                    id:this.state.produit.id+1,
                    nom:'',
                    prix:0,
                    quantite:0,
                    marque:''
                },
                errorChamps:false

            })
        }
        //Erreur tout les champs sont obligatoires
        else {
            this.setState({
                errorChamps:true
            })

        }

    }


    //supprimer un produit avec son id passé en paramètre
    supprimerProduit=(idprod)=>{
        this.setState({
            listeProduit:this.state.listeProduit.filter((p)=>p.id!=idprod)
        })
    }


    modifierProduit=(prod)=>{
        this.setState({
            produit:prod,
            buttonAjouter:false
        })

    }

    validerModifier=()=>{
     
        this.setState({
            //boucler sur les produit de la liste
            listeProduit:this.state.listeProduit.map((pro)=>{
                //si le prduit pro de la liste son id=id du produit à modifier
                 if(pro.id==this.state.produit.id)
                 {
                    //on remplace pro avec le produit modifier (this.state.produit)
                    return this.state.produit
                 }
                 //si non on garde le produit pro
                 else
                 {
                    return pro
                 }
            }),
            //reafficher le bouton ajouter
            buttonAjouter:true,
            //initialiser les champs
            produit:{
                id:this.state.listeProduit[this.state.listeProduit.length-1].id+1,
                nom:'',
                prix:0,
                quantite:0,
                marque:''
            },

        })

    }



    vendre=(idpro)=>{
        this.setState({
            listeProduit:this.state.listeProduit.map((pro)=>{

                if(pro.id==idpro)
                {
                    if(pro.quantite>0){
                        pro.quantite-=1;
                    }
                }
            return pro;
        })
        })
    }
    render(){
        return(<div>

            <table>
                <tr>
                    <td>Nom</td>
                    <td><input type="text" name="nom" value={this.state.produit.nom} onChange={this.getValue}/></td>
                </tr>
                <tr>
                    <td>Prix</td>
                    <td><input type="number" name="prix" value={this.state.produit.prix} onChange={this.getValue}/></td>
                </tr>
                <tr>
                    <td>Marque</td>
                    <td><input type="text" name="marque" value={this.state.produit.marque} onChange={this.getValue}/></td>
                </tr>
                <tr>
                    <td>Quantite</td>
                    <td><input type="number" name="quantite" value={this.state.produit.quantite} onChange={this.getValue}/></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        {this.state.buttonAjouter==true?<input type="button" value="Ajouter" onClick={this.ajouterProduit}/>:
                                                        <input type="button" value="Modifier" onClick={this.validerModifier}/>
                    }
                       
                        </td>
                </tr>
            </table>
           
            {
                this.state.errorChamps==true?<span style={{backgroundColor:"red"}}>Erreur tout les champs sont obligatoire</span>:''
            }
            <h5>Listes produits</h5>
            <table>
              <thead>
                <th>Id</th>
                <th>Nom</th>
                <th>Prix</th>
                <th>Marque</th>
                <th>Quantite</th>
                <th>Actions</th>
              </thead>
              <tbody>
                {this.state.listeProduit.map((pro)=>{
                    return (<tr style={{backgroundColor:pro.quantite<=0?'red':''}}>
                        <td>{pro.id}</td>
                        <td>{pro.nom}</td>
                        <td>{pro.prix}</td>
                        <td>{pro.marque}</td>
                        <td>{pro.quantite}</td>
                        <td>
                            <input type="button" onClick={()=>this.supprimerProduit(pro.id)} style={{width:'33%'}} value="supprimer"/>
                            <input type="button" onClick={()=>this.modifierProduit(pro)} style={{width:'33%'}} value="modifir"/>
                            <input type="button" onClick={()=>this.vendre(pro.id)} style={{width:'33%'}} value="vente"/>
                           
                        </td>
                    </tr>)
                })}
              </tbody>
            </table>
        </div>)
    }
}
export default TPCrudProduit