Create, Read, Update & Delete avec ReactJs

MERN
MongoDB, ExpressJs, Reactjs, NodeJs
Front-end : ReactJs

Back-end : NodeJs/MongoDB
Categorie

nomcategorie
imagecategorie

Base de donnée : DBCommerce

SGBD: MongoDB
URL : http://localhost:3001/api/categories
Etapes pour CRUD opérations

1. Installation d’une application React

2. Configurer React routing
3. Crééer un formulaire avec Bootstrap
4. Submit form
5. Créer un REST API
6. Installer la bibliothèque Axios et insérer avec une requête POST
7. Afficher les données Backend avec get
8. Fonctions Edit et Update
9. Supprimper les données avec delete
1.Installation d’une application React
C:\reactjs>npx create-react-app frontend
C:\reactjs>cd frontend
Code .
Installer bootstrap
npm install react-bootstrap bootstrap --save
Dans le fichier App.js ajouter
import 'bootstrap/dist/css/bootstrap.min.css';
import {Nav, Navbar,Form, FormControl} from 'react-bootstrap';
  Pour vérifier bootstrap ajouter dans le fichier App.js un bouton
 <button className="btn btn-success">Envoyer</button>
Fichier App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css’;
import {Nav, Navbar,Form, FormControl} from 'react-bootstrap';
import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link«ref="https://reactjs.org"target="_blank«rel="noopener noreferrer" >Learn React</a>
        <button className="btn btn-success">Envoyer</button>
      </header>
    </div>  );}

export default App;
 2. Configurer React routing
 Il faut installer react-router-dom

npm install react-router-dom --save

 Ajouter dans le fichier App.js la ligne suivant :

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
 Accéder au site

https://react-bootstrap.github.io/
 Appuyer sur Components puis sélectionner navbar

Choisir un thème de menu et sélectionner le code relatif et copier le dans le fichier App.js

<Navbar bg="primary" variant="dark">

<Navbar.Brand href="#home">Navbar</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search"
className="mr-sm-2" />
<Button variant="outline-light">Search</Button>
</Form>
</Navbar>
Créer sous le dossier src le dossier Components/Categories
Dans le dossier Categoriescréer trois fichiers : ListCategories.js, InsertCategorie.js et EditCategories.js

Fichier Categories/InsertCategorie.js
import React, {Component} from 'react'

export default class  InsertCategorie extends Component
{
    render(){
    return(
        <div>
            <p>Bienvenue dans le composant Insert</p>
        </div>
    )

    }
}
Fichier Categories/ListCategories.js

import React, {Component} from 'react'

export default class  ListCategories extends Component
{
    render(){
    return(
        <div>
            <p>Bienvenue dans le composant Edit</p>
        </div>
    )

    }
}
 Fichier Categories/EditCategories.js

import React, {Component} from 'react'

export default class EditCategories extends Component
{
    render(){
    return(
        <div>
            <p>Bienvenue dans le composant View</p>
        </div>
    )

    }
}
 Dans le fichier App.js on doit importer les trois fichier pour faire appel dans le menu crée

import InsertCategorie from './Categories/InsertCategorie';
import EditCategories from './Categories/EditCategories';
import ListCategories from './Categories/ListCategories.js‘;

<Nav className="mr-auto">
      <Nav.Link href="/categories">Liste des Catégories</Nav.Link>
      <Nav.Link href="/insertcat">Inserer Catégorie</Nav.Link>
      <Nav.Link href="/editcat">Modifier</Nav.Link>
    </Nav>

<Switch>
    <Route exact path='/insertcat ' component={InsertCategorie}/>
    <Route exact path='/categories' component={ListCategories}/>
<Route exact path='/editcat/:id' component={EditCategories}/>

 </Switch>
  Fichier App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Nav, Navbar,Form, FormControl} from 'react-bootstrap';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import  InsertCategorie  from './Categories/Insert';
import Edit from './Employe/Edit';
import View from './Employe/View';
import './App.css';
 Fichier App.js(suite)

function App() {
  return (
    <Router>
      
      <Navbar bg="primary" variant="dark">
    <Navbar.Brand href="#home">Gestion Commerciale</Navbar.Brand>
    <Nav className="mr-auto">
      <Nav.Link href="/">Liste des Employés</Nav.Link>
      <Nav.Link href="/insert">Inserer</Nav.Link>
      <Nav.Link href="/edit">Modifier</Nav.Link>
    </Nav>
    <Form inline>
      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
      <button variant="outline-light">Chercher</button>
    </Form>

  </Navbar>
  Fichier App.js(suite)
  
  <Switch>
    <Route exact path='/insert' component={Insert}/>
    <Route exact path='/' component={View}/>
    <Route exact path='/edit' component={Edit}/>
  </Switch>
    </Router>
  );
}

export default App;
Fichier Employe/Insert.js
import React, {Component} from 'react'
import {Form, Col,Button} from 'react-bootstrap';
export default class Insert extends Component
{
    render(){
    return(
        <div>
        <Col md="5">
        <h3>Ajouter un nouvel utilisateur</h3>
        <form>
        <form-group>
        <Form.Label> Matricule</Form.Label>
        <Form.Control type="text" placeholder="Saisir Matricule" />
        <Form.Label > Nom</Form.Label>
        <Form.Control type="text" placeholder="Saisir Nom" />        
        <Form.Label > Prénom</Form.Label>        
        <Form.Control type="text" placeholder="Saisir Prénom" />
        <Form.Label > E-Mail</Form.Label>
        <Form.Control type="text" placeholder="Saisir Email" />
        <br/>
<Button type="submit" variant="primary">Enregistrer</Button>
        </form-group>
        </form>
        </Col>
        </div>
    )
    }
}
On doit créer une fonction qui prend les valeurs des chaps de saisie et les insérer en utilisant la
méthode POST de NodeJs/MongoDB REST API Server
On doit commencer par créer le constructeur et initialiser le State et le relier avec les différents
événements dans le constructeur

constructor(props) {
        super(props);
        this.state = { matricule: '',
                        nom:'',
                        prenom:'',
                        email:''
                        };
      }
 On doit maintenant relier les champs du formulaire aux variables state crée

 On ajouter à notre input un événement onChange qui fait appel à une méthode onChange dont on va créer
pour chaque champs formulaire
<Form.Control type="text" placeholder="Saisir Matricule" value={this.state.matricule} onChange={this.onChangeMatricule} />
  
<Form.Control type="text" placeholder="Saisir Nom" value={this.state.nom} onChange={this.onChangeNom} />

<Form.Control type="text" placeholder="Saisir Prénom" value={this.state.prenom} onChange={this.onChangePrenom}/>

<Form.Control type="text" placeholder="Saisir Email" value={this.state.email} onChange={this.onChangeEmail} />
Les méthodes onChange de chaque champs formulaire

onChangeMatricule=(e)=>{
          this.setState({matricule:e.target.value})
      };
      onChangeNom=(e)=>{
        this.setState({nom:e.target.value})
    };
    onChangePrenom=(e)=>{
        this.setState({prenom:e.target.value})
    };
    onChangeEmail=(e)=>{
        this.setState({email:e.target.value})
    };
 
Les méthodes onSubmit pour envoyer le formulaire
onSubmit=(e)=>{
        e.preventDefault();
        const obj={
            matricule:this.state.matricule,
            nom:this.state.nom,
            prenom:this.state.prenom,
            email:this.state.email
        };
        console.log(obj)
    }

On doit faire appel à cette méthode dans le formulaire

<form onSubmit={this.onSubmit}>
Remplir le formulaire=>Appuyer sur Enregistrer=>Inspecter=>Console: on obtient notre objet saisie
 Insertion de l’objet crée par l’appel de la méthode POST NodeJS/MongoDB REST API

 axios

Pour les projet qui doivent s'interfacer avec une API REST, Axios est un client
HTTP léger basé sur le service $http et similaire à l'API Fetch.
Axios est basé sur des promesses et nous pouvons donc profiter de async et
await plus lisible. Nous pouvons également intercepter et annuler des
demandes, et il existe une protection côté client intégrée contre la falsification
des demandes intersites.
Pour installer axios

npm install axios --save

 On doit importer axios

import axios from 'axios';

La méthode onSubmit devient

onSubmit=(e)=>{
        e.preventDefault();
        const obj={
            matricule:this.state.matricule,
            nom:this.state.nom,
            prenom:this.state.prenom,
            email:this.state.email
        };
        axios.post('http://localhost:3001/employes',obj)
        .then(res=>console.log(res.data));
        this.setState({matricule:'',nom:'',prenom:'',email:''})
    }
Affichage de la liste des employés
Fichier View.js
Dans le constructeur de la classe on crée un State pour intancier un tableau d’employés
constructor(props) {
            super(props);
            this.state = { employes:[] };
          }
 On fait appel à la méthode de chargement de formulaire (onLoad) appelé dans React componentDidMount()
Cette méthode fait appel au service get qui renvoi la liste des employés dans le serveur

componentDidMount(){
            axios.get('http://localhost:3001/employes/')
            .then(res=>{
                this.setState({employes:res.data});
            })
            .catch(function(error){
                console.log(error)
            })
      
          }

Dans cette méthode on a fait appel à axios donc on doit importer le package axios

import axios from 'axios';
Le Tableau dans le fichier View.js dont on va afficher les données

render(){
    return(
        <div>
           <h3 align="center">Liste des employés</h3>
           <Table striped bordered hover size="sm">
            <thead>
             <tr>
             <th>Matricule</th>
             <th>Nom</th>
             <th>Prénom</th>
             <th>Email</th>
             <th colSpan="2">Actions</th>
            </tr>
             </thead>
         <tbody>
            {this.employesList()}
        </tbody>
        </Table>
        </div>
    )

    }
Dans le tableau nous avon:
1- fait appel à la balise Table, donc on doit importer le package react-bootstrap

import {Table} from 'react-bootstrap’;
2- on a fait appel à la méthode {this.employesList()} pour cela on doit définir cette fonction
employesList=() =>{
             return this.state.employes.map(employe=>{
               return <EmployeList emps={employe}/>
            });   
        }

3- on a fait appel au composant EmployeList auquel on a envoyé l’objet employé retourné par

la méthode componentDidMount, donc on doit l’importer

import EmployeList from './EmployeList';
4- on doit ajouter le composant Employelist dans un nouveau fichier Employelist.js

pour cela l’objet envoyé par le composant View va être affecté à la variable props du composant EmployeList

const {emps}=this.props;
 Fichier EmployeList.js

import React, {Component} from 'react';
import {Button} from 'react-bootstrap';
export default class Employelist extends Component
{
render(){
    const {emps}=this.props;
    return(
        
        <tr>
            <td>{emps.matricule}</td>
            <td>{emps.nom}</td>
            <td>{emps.prenom}</td>
            <td>{emps.email}</td>
            <td><Link to={"/edit/" + emps._id} className="btn btn-primary">Edit</Link></td>
            <td><Button  variant="danger" onClick={this.deleteEmp}>Supprimer</Button></td>
        </tr>
    )
}
    
}
Suppression d’un employé d’id donné
Dans le fichier EmployeList.js on ajoute la méthode delete qui fait appel à la méthode REST API du serveur

<td><Button  variant="danger" onClick={this.deleteEmp}>Supprimer</Button></td>

deleteEmp=()=>{
        console.log(this.props.emps._id)
        axios.delete("http://localhost:3001/employes/"+ this.props.emps._id )
        .then(this.setState({redirect:true}))
        .catch(err=>console.log(err))
        
    }
Constructeur de la classe EmployeList
constructor(props) {
        super(props);
        this.state={
            redirect:false
        }
    }

La variable redirect change d’état et une redirection vers le composant / (home)

const {emps}=this.props;
    const {redirect} = this.state;
    if(redirect){
        return<Redirect to = '/'/>
    }
La structure du fichier Edit.js a la même structure que le fichier insert.js.

render(){
return(   
  <div>
  <Col md="5">
  <h3>Modifier un utilisateur</h3>
  <form >
  <form-group>
  <Form.Label> Matricule</Form.Label>
  <Form.Control type="text"  value={this.state.matricule} onChange={this.onChangeMatricule} />
  <Form.Label > Nom</Form.Label>
  <Form.Control type="text"  value={this.state.nom} onChange={this.onChangeNom} />        
  <Form.Label > Prénom</Form.Label>        
  <Form.Control type="text"  value={this.state.prenom} onChange={this.onChangePrenom}/>
  <Form.Label > E-Mail</Form.Label>
  <Form.Control type="text"  value={this.state.email} onChange={this.onChangeEmail} />
  <br/>
  <Button type="submit" variant="primary">Enregistrer</Button>
  </form-group>
  </form>
  </Col>
  </div>
}
Les méthodes onChange()

onChangeMatricule=(e)=>{
        this.setState({matricule:e.target.value})
    };
    onChangeNom=(e)=>{
      this.setState({nom:e.target.value})
  };
  onChangePrenom=(e)=>{
      this.setState({prenom:e.target.value})
  };
  onChangeEmail=(e)=>{
      this.setState({email:e.target.value})
  };
  
Les méthodes componentDidMount()

componentDidMount(){
          
        axios.get('http://localhost:3001/employes/'+ this.props.match.params.id)
        .then(res => {
            this.setState({
                matricule:res.data.matricule,
                nom:res.data.nom,
                prenom:res.data.prenom,
                email:res.data.email
                
            });
        })
        .catch(function(error){
            console.log(error)
        })
Le constructeur de la classe Edit

constructor(props) {
        super(props);
        this.state = { matricule: '',
                        nom:'',
                        prenom:'',
                        email:''
                        };
      }

Les imports des packages

import React, {Component} from 'react'
import {Form, Col,Button} from 'react-bootstrap';
import axios from 'axios';