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





React:liste des produits + Pagination

folder Projet: VentesReactNodeJS (FullStack :backEndProject et front_end_project)
Dans cette partie on va afficher la liste de produits de la table produit avec la pagination
Produit(id,nom,prix,qteStock)
BackEnd :Nodejs+ExpressJs+mysql:pour créer les RestApis
FrontEnd :React+Axios pour consommer les apis

BackEnd Créer les Apis :backEndProject

  1. 1Créer la méthode afficherNparPage() dans src/models/Produits :permettant d'exécuter la requête Sql :select * from produit limit StartFrom,LigneParPage
  2. 2Créer la méthode afficherNparPage() dans src/controllers/ProduitController:permettant d'appelere la methode afficherNparPage() du model Produit et envoyer le resultat au projet FontEnd de React
  3. 3Ajouter la route :http://localhost:8081/produits/StartFrom/LigneParPage mappé avec la fonction afficherNparPage() du controller ProduitController

1.Model:créer la fonction afficherNpagePage() dans src/models/Produit.js

/**Afficher la liste des produit du page : page**/
Produit.afficherNparPage = (page,LigneParPage,result) =>{

/*Supprimer les non Numérique from les paramètres*/
page=parseInt(page.replace(/\D/g,''));
LigneParPage=parseInt(LigneParPage.replace(/\D/g,''));
console.log(LigneParPage);
/*Limit start,LigneParPage : */
let start=(page-1)*LigneParPage;
connexion.query('SELECT * FROM produit limit ? ,?',[start,LigneParPage] ,(err, res)=>{
if(err){
result(err,null);
}else{
/*retourne la liste des produits*/
result(null,res);
}
})

}

2.Controller: Créer la fonction afficherNpagePage() dans src/controllers/ProduitController.js

/*Afficher LigneParPage produits à partir de la page :page */
exports.afficherNparPage = (req, res)=>{
ProduitModel.afficherNparPage(req.params.page,req.params.LigneParPage, (err, produits)=>{
if(err)
/*si erreur envoyer l'erreur*/
res.send(err);
/*sinon envoyer la liste des produits*/
res.send(produits)
})
}

3.Routes: ajouter la ligne de routage dans src/routes/ProduitRoutes.js

/*Afficher LigneParPage produits à partir de la page :page*/
routerProduits.get('/:page/:LigneParPage', produitController.afficherNparPage);

2.FrontEnd créer la vue listeProduits.js dans le projet :front_end_project

  1. 1Créer la components src/components/Produits/listeProduits permettant d'afficher le tableau d'object envoyer la méthode afficherNparPage() du controller ProduitController du projet backEndProject avec la pagination

React: Créer la component listeProduits.js

npx crcf components/Produits/listePagination

Installer react-js-pagination

npm i react-js-pagination
import React, { useState,useEffect } from 'react';
import axios from "axios";
import {Table} from 'react-bootstrap';
import Pagination from "react-js-pagination";

/*Afin d'utiliser le hooks useState() la component doit etre déclaré sous forme d'une fonctions*/
function ListePagination() {
/***** 1 **** :initialier un tableau de produit à remplir */
/*Créer une state avec un tableau vide qui sera remplir par le backend*/
const [listeProduit, setlisteProduit] = useState([]);

/***** 2 **** :Paramètrer js-pagination */
/*Déclarer le numéro de la page acuellement affiché*/
const [pageAffiche, setPageAffiche] = useState(1);
/*le nombre de lignes à affichées par page*/
const ligneParPage = 2;
/*le nombre totale des lignes à récupérer à partir du backend select count()...*/
const totaleLigne = 10;


/***** 3 **** :Appler le backEnd Service */
/*Appler l'api pour récupérer la liste des produit da la base de donnes*/
const afficherPage = () =>
{
//demander l'api
axios.get('http://localhost:8081/apis/produits/'+pageAffiche+'/'+ligneParPage)
//attend er recevoir la réponse du serveur
.then(response => {
//changer l'état du state afin de remplir le tableau listeProduit
setlisteProduit(response.data);
});
}


/***** 4 **** :Changer la variable du state numPage si on clique sur la pagination */
/*Lorsque on clique sur un lien dans le paginator*/
const chargerNouvellePage = (numPage) =>
{
setPageAffiche(numPage);
/*Appler le backEnd service avec la nouvelle page à affichée */
this.afficherPage();
}
/***** 5 **** :Appler le backEnd une fois la component est affichée */
/*Une fonction hooks qui remplace les lifeCycle methods*/
useEffect(() => {
/*Charger les produit une fois la componentDidMount :(chargé)*/
afficherPage();
});

return(
<div>
<h3>La liste des produits</h3>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Nom</th>
<th>qteStock</th>
<th>prix</th>
</tr>
</thead>
<tbody>
{/*Boucler sur la tableau et afficher son contenu*/}
{listeProduit.map(p=>(
<tr>
<td>{p.id}</td>
<td>{p.nom}</td>
<td>{p.qtestock}</td>
<td>{p.prix}</td>
</tr>
))}
</tbody>
</Table>

{/*Paramètrer le paginator */}
<Pagination
itemClass="page-item" /*les classes bootstrap*/
linkClass="page-link"
activePage={pageAffiche}
itemsCountPerPage={ligneParPage}
totalItemsCount={totaleLigne}
pageRangeDisplayed={ligneParPage}
onChange={chargerNouvellePage}
/>
</div>);

}


export default ListePagination;

Ajouter une route dans le fichier App.js

App.js

import './App.css';
/*des classe qui permet de créer des routes pour
/produits/ajouter/
/produits/
....
*/
import {
BrowserRouter as Router,
Route,
Routes
} from "react-router-dom";


/*importer les styles boostrap*/
import 'bootstrap/dist/css/bootstrap.min.css';
/*Importer les components*/
import Ajouter from './components/Produits/ajouter/ajouter.js'
import ListePagination from './components/Produits/listePagination/listePagination.js'
import Liste from './components/Produits/liste/liste.js'
import Details from './components/Produits/details/details.js'
import Navigation from './components/navigation/navigation.js'

function App() {
return (
<div>
{/*Définir un router */}

<Router>
<Navigation/>
<Routes>
<Route exact path="/produits/" element={<Liste/>}/>
<Route exact path="/produits/ajouter" element={<Ajouter/>}/>
<Route exact path="/produits/:id" element={<Details/>}/>
<Route exact path="/produitsListe" element={<ListePagination/>}/>
</Routes>
</Router>


</div>
);
}

export default App;

Demarer le backEndProject

backEndProject>node Serveur.js

Demarer le front_end_project

font_end_project>npm start