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 :Crud Client(id,nom,prenom)

App.js


 
import React, { useState } from "react";
import { Routes,Route ,useNavigate,Link} from "react-router-dom";
import Ajouter from "./Ajouter";
import ListClient from "./ListClient";
import Details from "./Details";
import Modifier from "./Modifier";
export default function App()
{


    const [listeClients,setListClients]=useState([])
const navigate =useNavigate()
    const ajouterClient=(client)=>{

        setListClients([...listeClients,client]);
        navigate("/clients",{state:{message:"Bien ajouter"}})

    }

    const supprimerClient=(index)=>{
       setListClients(listeClients.filter((c,i)=>i!=index)) 
    }

    const modifierClient=(client)=>{
        const listeClientsModifier=listeClients.map((c,index)=>{
            if(c.id==client.id){
               return client; 
            }
            return c;

        })

        setListClients(listeClientsModifier);
        navigate("/clients",{state:{message:"Bien modifié"}})

    }

    return (<div>
        <Link to="/ajouter">Ajouter</Link>
        <Link to="/clients">Liste Clients</Link>
        <Routes>
     <Route path="/ajouter" 
     element={<Ajouter ajouterClient={ajouterClient}   />} />
     <Route path="/clients" element={<ListClient listesClient={listeClients} supprimerClient={supprimerClient}/>} />
     <Route path="/details" element={<Details />} />
     <Route path="/modifier" element={<Modifier modifierClient={modifierClient} />} />
        </Routes>
        </div>)
}
 

Ajouter.js


 import React, { useState } from "react";
export default function Ajouter({ajouterClient})
{
    const [client,setClient]=useState({
        id:'',
        nom:'',
        prenom:''
    })

    const getValue=(event)=>{
       setClient({
        ...client,
        [event.target.name]:event.target.value
       })    
    }

    const validerajouter=()=>
    {

        alert("hi")
        //validation des inputs....
        if(client.id!='')
        {
            ajouterClient(client)

        }
    }

    return (<div>
   id: <input name="id" type="number" value={client.id}  onChange={getValue} />
  <br/> nom: <input name="nom" type="text" value={client.nom}  onChange={getValue} />
  <br/>  prenom: <input name="prenom" type="text" value={client.prenom}  onChange={getValue} />
    <input value="ajouter" type="button" onClick={validerajouter} />
      </div>)
}

ListClient.js


 import React,{useState} from "react";
import { useLocation, useNavigate } from "react-router-dom";
export default function ListClient({listesClient,supprimerClient})
{


const  location=useLocation();
const navigate=useNavigate();
const ShowDetails=(v)=>{
navigate("/details",{state:{client:v}})
}

const modifier=(v)=>{
    navigate("/modifier",{state:{client:v}})
    }
    return (<div>
   <table>
    <thead>
        <th>Id</th>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Actions</th>
    </thead>
    <tbody>
        {listesClient.map((c,index)=>(
            <tr>
                <td>{c.id}</td>
                <td>{c.nom}</td>
                <td>{c.prenom}</td>
                <td>
                    <button onClick={()=>supprimerClient(index)}>Supprimer</button>
                <button onClick={()=>ShowDetails(c)}>Details</button>
                <button onClick={()=>modifier(c)}>Modifier</button>
                
                </td>
                
            </tr>
        ))
    }
    </tbody>
   </table>
   {location.state!=null?location.state.message:""}
    </div>)
}

Details.js


 import React, { useState } from "react";
import { useLocation } from "react-router-dom";
export default function Details()
{
    const location=useLocation();
    const [client,setClient]=useState(location.state.client);
    return (<div>

les details du client {client.id}
<br/>
Nom:{client.nom}
<br/>
prénom:{client.prenom}
    </div>)
}

Modifier.js

import React ,{useState} from "react";
import { useLocation } from "react-router-dom";

export default function Modifier({modifierClient})
{
    const location=useLocation();
    const [client,setClient]=useState(location.state!=null?location.state.client:null)
  const getValue=(event)=>{
    setClient({
        ...client,
        [event.target.name]:event.target.value
    })
  }
  
  return (&t;div>

&t;input name="nom" value={client.nom} onChange={getValue} />
&t;input name="prenom" value={client.prenom} onChange={getValue} />
&t;input value="Modifier" type="button"  onClick={()=>modifierClient(client)} />
    &t;/div>)
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
//import App from './App';

import reportWebVitals from './reportWebVitals';

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

import App from './ExerciceRoutage/App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
 
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();