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:Props

folder Projet: test_react_project
Props :permet à une componenet parent d’envoyer des données à une component child

Parent est la component qui import une autre component(child)

Exemple 1
 import React, { Component } from 'react';

// Composant enfant
class Welcome extends Component {
  render() {
    return <h1>Bienvenue, {this.props.name} !</h1>
  }
}
export default Welcome;
// Composant parent
class App extends Component {
  render() {
    return (
      	  
	<div>
        <Welcome name="John" />
        <Welcome name="Jane" />
        <Welcome name="Alice" />
      </div>
    );
  }
}

export default App;
Exemple 2
import React, { Component } from 'react';

// Composant enfant
class BookInfo extends Component {
  render() {
    return (
      <div>
        <h2>Titre: {this.props.title}</h2>
        <p>Auteur: {this.props.author}</p>
        <p>Année de publication: {this.props.year}</p>
      </div>
    );
  }
}
export default BookInfo;
import React, { Component } from 'react';
 // Composant parent
class BookList extends Component {
  render() {
    return (
      <div>
        <h1>Liste de livres</h1>
        <BookInfo title="Harry Potter" author="J.K. Rowling" year="1997" />
        <BookInfo title="To Kill a Mockingbird" author="Harper Lee" year="1960" />
        <BookInfo title="The Great Gatsby" author="F. Scott Fitzgerald" year="1925" />
      </div>
    );
  }
}

export default BookList;
Exemple 3
import React, { Component } from 'react';

// Composant enfant pour afficher les informations d'un livre
class BookInfo extends Component {
  render() {
    const { title, author, year } = this.props.book;
    return (
      <div>
        <h2>Titre: {title}</h2>
        <p>Auteur: {author}</p>
        <p>Année de publication: {year}</p>
      </div>
    );
  }
}
import React, { Component } from 'react';
// Composant parent pour afficher une liste de livres
class BookList extends Component {
  render() {
    const books = [
      { title: "Harry Potter", author: "J.K. Rowling", year: "1997" },
      { title: "To Kill a Mockingbird", author: "Harper Lee", year: "1960" },
      { title: "The Great Gatsby", author: "F. Scott Fitzgerald", year: "1925" }
    ];

    return (
      <div>
        <h1>Liste de livres</h1>
        {books.map((book, index) => (
          <BookInfo key={index} book={book} />
        )}
      </div>
    );
  }
}

export default BookList;

Exemple

App.js

import React from 'react';
  import './App.css';
  import ChildComponent1 from './components/childComponent1'
  class  App extends React.Component{
    constructor(props)
    {
      super(props);
      this.state={
        listeGroupe:['Groupe1','Groupe2','Groupe3']
      }
    }
   
    render()
    {
      return (
        <div>
         <ChildComponent1
         donnees1="bonjour"
         Unclient={{client:{nom:'abc',prenom:'xyz'}}}
         listeGroupe={this.state.listeGroupe}
         />
        </div>

        );
       
      }
   
    }
    export default App;
npx crcf components/childComponent1

childComponent1.js

import React, { Component } from "react";

class ChildComponent1 extends Component {
	constructor(props)
	{
		super(props);
		this.state={
			mesGroupes:this.props.listeGroupe,
			monClient:this.props.Unclient
		}
	}
	render() {
		return 
	<div>
	<table>
		<tr>
			<td>donnees1 From parent:</td>
			<td>{this.props.donnee1}</td>
		</tr>
		<tr>
			<td>mesGroupe From parent:</td>
			<td>
				<ol>
					{
						this.state.mesGroupes.map((g)=>{
						return <li>{g}</li>	})
					}
				</ol>
			</td>
		</tr>
		<tr>
		<td>Client From parent</td>
		<td><ul>
			Nom:{
			this.state.monClient.client.nom
				}
		<br/>
			Prnéom:{
			this.state.monClient.client.prenom
				}
			</ul>
		</td>
	</tr>

</table>
</div>;
	}
}

export default ChildComponent1;

Exemple 4

App.js

  import React from 'react';
  import './App.css';
  import ChildComponent1 from './components/childComponent1'
  class  App extends React.Component{
    constructor(props)
    {
      super(props);
      this.state={
        input:''
      }
    }
   
    changeValue=(e)=>{
    this.setState({
      input:e.target.value
    })
    }
    render()
    {
      return (
        <div>
          <input type="text" onChange={this.changeValue} />
         <ChildComponent1  valeurInput={this.state.input}   />
        </div>

        );
       
      }
   
    }
    export default App;

ChildComponent1.js

import React, { Component } from "react";

class ChildComponent1 extends Component {
  constructor(props)
  {
    super(props)
 
  }
  render() {
    return(
     <div>
     Valeur From parent: {this.props.valeurInput}
    </div>
    );
  }
}

export default ChildComponent1;

Exemple 3 :Envoyer les données from Child to Parent

2.Child-->Parent :CallbackEvent:La component parent peut appeler et retourner la valeur d'une fonction du Child

App.js

  import React from 'react';
  import './App.css';
  import ChildComponent1 from './components/childComponent1'
  class  App extends React.Component{
    constructor(props)
    {
      super(props);
      this.state={
        input:''
      }
    }
   
    changeValue=(v)=>{
    this.setState({
      input:v
    })
    }
    render()
    {
      return (
        <div>
          <p>Valeur From Child:{this.state.input}</p>
         <ChildComponent1  fonctionParent={this.changeValue}   />
        </div>

        );
       
      }
   
    }
    export default App;

ChildComponent1.js

import React, { Component } from "react";

class ChildComponent1 extends Component {
  constructor(props)
  {
    super(props)
 
  }
  sendToParent=(e)=>{
    this.props.fonctionParent(e.target.value)
  }
  render() {
    return(
     <div>
     <input type="text" onChange={this.sendToParent} />
    </div>
    );
  }
}

export default ChildComponent1;





Exemple 4

Envoyer un tableau d'objet à la component Test.js puis les afficher


App.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navigation from './components/navigation/navigation.js'
/*importer la component Test pour l'afficher */
import Test from './components/Test/Test.js'
/*importer les composantes bootstrap utilisé dans App*/
import {Container} from 'react-bootstrap';


function App() {
/* un tableau d'objet à envoyer à la component Test */
const produits = [
{id: '1',nom: 'produit1',qteStock:40,prix:47.5},
{id: '2',nom: 'produit2',qteStock:10,prix:12},
{id: '3',nom: 'produit3',qteStock:80,prix:43}
]
return (
<div>
{/*appler la navigation */}
<Navigation />
{/*appler Test dans le container (boostrap class)*/ }
<Container fluid>
{/*donneesRecu:est un props de la component Test*/}
<Test donneesRecu={produits} />
</Container>
</div>
);
}

export default App;

Test.js :Récupérer les données reçues avec props puis les afficher avec Array.map()
import React, { Component } from "react";
import {Table} from 'react-bootstrap';

class Test extends Component {
render() {
/*récupérer les données reçues du props */
const { donneesRecu } = this.props

return (
<div>
<h3>Liste des données envoyées par le parent (App.js) avec props</h3>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Nom</th>
<th>qteStock</th>
<th>prix</th>
</tr>
</thead>
<tbody>
{donneesRecu.map(p=>(
<tr>
<td>{p.id}</td>
<td>{p.nom}</td>
<td>{p.qteStock}</td>
<td>{p.prix}</td>
</tr>
))}
</tbody>
</Table>
</div>)
;
}
}

export default Test;

Utilisation du pattern ...props

Permet de passer des données via du props sans passé par des variables:
App.js
/*importer les styles boostrap*/
import 'bootstrap/dist/css/bootstrap.min.css';
import SendMessage from './components/sendMessage/sendMessage.js';

function App() {
/*Créer une données à envoyer */
const infoClients = {
client:{
nom: "Magi ",
email: "magi@fixwins.com",
tel: "044546"
}
};
return (
<div className="container">
<br/>
<div className="card text-success mb-3">
<div className="card-header card bg-warning">Hi i am APP the parent </div>
<div className="card-body">
je envoie des infoClient à ma child
</div>
</div>


<SendMessage {...infoClients} />
</div>
);
}
export default App;

npx crcf components/sendMessage
import React from 'react';

function SendMessage(props) {
return (
<div className="card text-success card bg-light mb-3">
<div className="card-header">Je suis Child de APP</div>
<div className="card-body">
<ul class="list-group">
<li class="list-group-item">Nom :<b>{props.client.nom}</b></li>
<li class="list-group-item">email :<b>{props.client.email}</b></li>
<li class="list-group-item">tel :<b>{props.client.tel}</b></li>

</ul>

</div>
</div>
)
}
export default SendMessage;