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

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

folder Projet: test_react_project
State: est similaire à un propos mais il est private et controller par sa component ,c'est un objet javascript qui stock l'état des données de la component en temps reél,permettant de controller le comportement de la component
Le changement de la valeur du State implique le render de la component

Exemple

Créer la component TestState permettant d'afficher les valeurs de sa State :

npx crcf components/TestState
TestState.js
import React, { Component } from "react";

class TestState extends Component {
  /*le constructeur de la component*/
  /*props :récupérer les données envoyées par le prent s'elles existent*/
  constructor(props) {
    /*Envoyer les données props à la classe mère dans ce cas Component*/
    super(props);
    //Créer une state
    this.state = {
      produit:{
        id: "1",
        nom: "produit1",
        qteStock: 40,
        prix: 15.3
      },
      villes:['Casa','Paris','madrid'],
      listeClient:[
        {nom:'client1',tel:'064454'},
        {nom:'client2',tel:'047858'},
        {nom:'client3',tel:'045212'}

      ]
    };
   
  }
  render() {
    return (
    <div>
      <fieldset>
        <legend>Produit Détails</legend>
        <table>
          <tr>
            <td>Id</td>
            <td>{this.state.produit.id}</td>
          </tr>
          <tr>
            <td>Nom</td>
            <td>{this.state.produit.nom}</td>
          </tr>
          <tr>
            <td>QteStock</td>
            <td>{this.state.produit.qteStock}</td>
          </tr>
          <tr>
            <td>Prix</td>
            <td>{this.state.produit.prix}</td>
          </tr>
        </table>
      </fieldset>

      <fieldset>
        <legend>Liste Villes</legend>
        <ol>
          {
            this.state.villes.map((ville)=>
            {
            return(
            <li>{ville}</li>
            )
            }
            )
          }
        </ol>
      </fieldset>

      <fieldset>
        <legend>Liste Client</legend>
        <table>
          <thead>
            <tr>
            <th>Nom</th>
            <th>Tel</th>
            </tr>
          </thead>
          <tbody>
            {this.state.listeClient.map((client)=>
            {
              return (
              <tr>
                <td>{client.nom}</td>
                <td>{client.tel}</td>
              </tr>)
            })}
          </tbody>
        </table>
      </fieldset>
   
    </div>);
  }
}

export default TestState;

App.js
  /*Importer le Css */
  import React from 'react';
  import './App.css';
  /*Importer TestState Component */
  import TestState from './components/TestState/TestState';
  class  App extends React.Component{
    constructor(props)
    {
      /*Appeler le constructeur del classeMere React.Component */
      super(props);
     
    }
     
    render()
    {
      return (
        <div>
       <TestState />
        </div>
        );
      }
    }
    export default App;
npm start

Exemple 2

Créer un compteur avec deux button + et button - 

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  decrement = () => {
    this.setState({ count: this.state.count - 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

export default Counter;