React:State

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

Utilisation des component fonctionnelle

Composants fonctionnels:
- Ils sont définis comme des fonctions JavaScript.
- Ils ne possèdent pas d'état local (state), mais peuvent utiliser le hook useState pour gérer un état local.
- Ils n'ont pas de méthodes de cycle de vie propres à la classe, mais peuvent utiliser les hooks comme useEffect pour effectuer des effets de bord.
- Ils sont plus légers et plus simples à comprendre que les composants de classe.
- Ils favorisent l'utilisation de la programmation fonctionnelle, ce qui peut rendre le code plus lisible et plus facile à tester.

import React, { useState } from "react";

const TestState = () => {
  const [produit] = useState({
    id: "1",
    nom: "produit1",
    qteStock: 40,
    prix: 15.3
  });

  const [villes] = useState(['Casa','Paris','madrid']);

  const [listeClient] = useState([
    {nom:'client1',tel:'064454'},
    {nom:'client2',tel:'047858'},
    {nom:'client3',tel:'045212'}
  ]);

  return (
    <div>
      <fieldset>
        <legend>Produit Détails</legend>
        <table>
          <tbody>
            <tr>
              <td>Id</td>
              <td>{produit.id}</td>
            </tr>
            <tr>
              <td>Nom</td>
              <td>{produit.nom}</td>
            </tr>
            <tr>
              <td>QteStock</td>
              <td>{produit.qteStock}</td>
            </tr>
            <tr>
              <td>Prix</td>
              <td>{produit.prix}</td>
            </tr>
          </tbody>
        </table>
      </fieldset>

      <fieldset>
        <legend>Liste Villes</legend>
        <ol>
          {villes.map((ville, index) => (
            <li key={index}>{ville}</li>
          ))}
        </ol>
      </fieldset>

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

export default TestState;

Les composants de classe (Class Components) et les composants fonctionnels (Functional Components) sont deux approches pour créer des composants React, et chacune a ses propres caractéristiques et avantages.

Composants de classe:
- Ils sont définis en utilisant la syntaxe de classe JavaScript.
- Ils étendent la classe React.Component ou React.PureComponent.
- Ils peuvent avoir un état local (state) géré par this.state et sont dotés de méthodes de cycle de vie telles que componentDidMount, componentDidUpdate, etc.
- L'utilisation de this est courante pour accéder aux props et à l'état (this.props et this.state).
- Ils permettent la définition de méthodes spécifiques au composant.

import React, { Component } from 'react';

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // Initialiser l'état local
    };
  }

  render() {
    return (
      // JSX à rendre
    );
  }
}

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;

Exemple 2:avec les components fonctionnelle

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  }

  const decrement = () => {
    setCount(count - 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>

ReactJS+NodeJS

Etudiant Exercices

React: Intoduction

Components

State,filter , map ...

Exercices

Props

Props fonctionnel

Routage

Axios ,Fetch, Api

Redux,Redux Toolkit

Exercices Redux

Examens

Redux -Thunk

Exercices

React+ionic

Gestion Ventes

Produit CRUD

Reacts:Utils

Utilisateur CRUD

Ventes CRUD

Redux

React:State

Exemple

Utilisation des component fonctionnelle

Exemple 2

Exemple 2:avec les components fonctionnelle