menu FixWins.com apps Spring MVC Spring Boot Angular Laravel ExpressJS ReactJS PFE list

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:Changer la valeur du State

State avec un objet Simple

Créer la component ExempleState1 permettant de changer du state avec un objet simple

npx crcf components/ExempleState1

ExempleState1.js

import React, { Component } from "react";

class ExempleState1 extends Component {
  constructor(props)
  {
    super(props)
    this.state={
      variable1:''
    }
   
  }
  //fin constructeur
 
  changerVariable1=(event)=>
  {
    this.setState({
      variable1:"Nouvelle Valeur"
    })
  }
 
  render() {
    return (
      <div>
      variable1={this.state.variable1}
      <input  type="button" onClick={this.changerVariable1} value="Changer Variable1"/>
     
      </div>)
      ;
    }
  }

export default ExempleState1;

App.js

  import React from 'react';
  import './App.css';
  import ExempleState1 from './components/ExempleState1/ExempleState1';
  class  App extends React.Component{
    constructor(props)
    {
      super(props);
     
    }
   
    render()
    {
      return (
        <div>
        <ExempleState1 />
        </div>
        );
      }
    }
    export default App;

npm start

Exemple 2

Récuper la valeur d'un input la sauvegarder dans la variable State

import React, { Component } from 'react';

class InputForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  handleInputChange = (e) => {
    this.setState({ inputValue: e.target.value });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    alert('You submitted: ' + this.state.inputValue);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.handleInputChange}
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default InputForm;

State avec un objet complexe

Créer la component ExempleState2 permettant de changer du state avec un objet complexe

npx crcf components/ExempleState2

ExempleState2.js

import React, { Component } from "react";

class ExempleState2 extends Component {
  constructor(props)
  {
    super(props)
    this.state={
      produit:{
        libelle:'produit1',
        prix:45.41,
        marque:'marque1'
      }
    }
  }
    changerLibelle=(event)=>
    {
      this.setState({
        produit:{
          ...this.state.produit, /*Récuper le produit courant */
          libelle:"Nouvelle libelle"} /*Puis changer la valeur d'un attribut */
      })
    }


    changerPrix=(event)=>
    {
      this.setState({
        produit:{
          ...this.state.produit,
          prix:210}
      })
    }

    changerMarque=(event)=>
    {
      this.setState({
        produit:{
          ...this.state.produit,
          marque:"Nouvelle marque"}
      })
    }

 
  render() {
    return (
    <div>
   Libelle:        {this.state.produit.libelle}
    <input type="button" onClick={this.changerLibelle} value="Changer"/>
   
   <br/>Libelle:   {this.state.produit.prix}
    <input type="button" onClick={this.changerPrix} value="Changer"/>

   <br/>Libelle:   {this.state.produit.marque}
   <input type="button" onClick={this.changerMarque} value="Changer"/>

    </div>);
  }
}

export default ExempleState2;

App.js

  import React from 'react';
  import './App.css';
  import ExempleState2 from './components/ExempleState2/ExempleState2';
  class  App extends React.Component{
    constructor(props)
    {
      super(props);
     
    }
   
    render()
    {
      return (
        <div>
        <ExempleState2 />
        </div>
        );
      }
    }
    export default App;
npm start