React:State(Formulaire)

Créer un formulaire d'inscription d'un étudiant

npx crcf components/Formulaire

Formulaire.js

import React from "react";
class Formulaire extends React.Component{
    constructor(props)
    {
        super(props)
        this.state={
            //un objet qui permet de stocker les valeurs d'un stagiaire
            stagiaire:{
                nom:'',
                prenom:''
            },
            //stocker et afficher la liste des stagiaires ajouté
            listeStagiaires:[]  
        }
        
        
    }
    
    //récupéer la valeur de l'input changé la stocké dans la variable du state stagiaire
    //event : un objet qui contient des information sur l'objet DOM changé comme:
    //event.target.value,event.target.name,.....
    getValue=(event)=>{
        this.setState({
            stagiaire:{
                ...this.state.stagiaire,//permet de récupérer les autres attributs de l'objet stagiaire
                [event.target.name]:event.target.value
                //[event.target.name]:permet de récupéer le nom de l'input qui est change
                //qui peut etre soit nom ou prenom
                
            }
        })
        
    }
    
    //ajouter un nouveau stagiaire dans la variable du state listeStagiaires
    ajouterStagiaire=(event)=>{
        //vérifier si tout les champs sont remplis
        if(this.state.stagiaire.nom!='' && this.state.stagiaire.prenom!='')
        {
        //changer la valeur du state afin d'ajouter un nouveau stagiaire
        this.setState({
            listeStagiaires:[...this.state.listeStagiaires,this.state.stagiaire]
            //...this.state.listeStagiaires: récupéer la listes des stagiaire déja ajouter puis ajouté 
               //un nouveau stagiaire
        })
    }
}
    
    
    render(){
        return(<div>
            <table>
            <tr>
            <td>Nom</td>
            <td><input type="text" name="nom" onChange={this.getValue}/></td>
            </tr>
            <tr>
            <td>Prénom</td>
            <td><input type="text" name="prenom" onChange={this.getValue}/></td>
            </tr>
            <tr>
            <td></td>
            <td><input type="button" value="Ajouter" onClick={this.ajouterStagiaire}/></td>
            </tr>
            </table>
            
            <b>liste stagiaires</b>
            <table>
            <thead>
            <th>Nom</th>
            <th>Prénom</th>
            </thead>
            <tbody>
            {
                this.state.listeStagiaires.map((str) =>{
                    return(<tr>
                        <td>{str.nom}</td>
                        <td>{str.prenom}</td>
                        </tr>)
                    })  
                }
                </tbody>
                </table>
                </div>)
            }
        }
        export default Formulaire

App.js

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

npm start

Exemple 2

Dans cet exemple, nous allons créer une application qui permet à l'utilisateur de saisir son nom et d'afficher un message de bienvenue.

import React, { Component } from 'react';

class WelcomeApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      message: '',
    };
  }

  handleChange = (event) => {
    this.setState({
      name: event.target.value,
    });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const message = `Bienvenue, ${this.state.name} !`;
    this.setState({
      message,
    });
  }

  render() {
    return (
	  <div>
        <h1>Simple Application with this.state and Form</h1>
        <form onSubmit={this.handleSubmit}>
          <label>
            Entrez votre nom : 
            <input type="text" value={this.state.name} onChange={this.handleChange} />
          </label>
          <button type="submit">Envoyer</button>
        </form>
        <div>
          {this.state.message && <p>{this.state.message}</p>}
        </div>
      </div>
    );
  }
}

export default WelcomeApp;

Exemple 3

Dans cet exemple, nous allons créer une application de liste de tâches où l'utilisateur peut ajouter et supprimer des tâches.

import React, { Component } from 'react';

class TodoApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: [],
      newTask: '',
    };
  }

  handleChange = (event) => {
    this.setState({
      newTask: event.target.value,
    });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    if (this.state.newTask.trim() !== '') {
      this.setState({
        tasks: [...this.state.tasks, this.state.newTask],
        newTask: '',
      });
    }
  }

  handleDelete = (index) => {
    const updatedTasks = [...this.state.tasks];
    updatedTasks.splice(index, 1);
    this.setState({
      tasks: updatedTasks,
    });
  }

  render() {
    return (
      <div>
        <h1>Todo List</h1>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.newTask}
            onChange={this.handleChange}
            placeholder="Ajouter une tâche"
          />
          <button type="submit">Ajouter</button>
        </form>
        <ul>
          {this.state.tasks.map((task, index) => (
            <li key={index}>
              {task}
              <button onClick={() => this.handleDelete(index)}>Supprimer</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default TodoApp;

Exemple 4

une application de conversion de devises qui permet à l'utilisateur de saisir une valeur en dollars américains (USD) et de la convertir en euros (EUR) en utilisant un taux de change fixe.

import React, { Component } from 'react';

class CurrencyConverter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      usdAmount: '',
      eurAmount: '',
      exchangeRate: 0.85, // Taux de change USD vers EUR
    };
  }

  handleUsdAmountChange = (event) => {
    this.setState({
      usdAmount: event.target.value,
    });
  }

  convertCurrency = () => {
    const usdAmount = parseFloat(this.state.usdAmount);
    if (!isNaN(usdAmount)) {
      const eurAmount = usdAmount * this.state.exchangeRate;
      this.setState({
        eurAmount: eurAmount.toFixed(2), // Arrondir à deux décimales
      });
    }
  }

  render() {
    return (
      <div>
        <h1>Currency Converter</h1>
        <label>
          USD:
          <input
            type="number"
            value={this.state.usdAmount}
            onChange={this.handleUsdAmountChange}
          />
        </label>
        <button onClick={this.convertCurrency}>Convert</button>
        <p>EUR: {this.state.eurAmount}</p>
      </div>
    );
  }
}

export default CurrencyConverter;

ReactJS+NodeJS

React: Intoduction

Components

State,filter , map ...

Props

Exercices

..

Exercices

Props dans Composant fonctionnel

Routage

Axios ,Fetch, Api

Redux,Redux Toolkit

Exercices Redux

Exercices

React+ionic

Gestion Ventes

Produit CRUD

Reacts:Utils

Utilisateur CRUD

Ventes CRUD

Redux

React:State(Formulaire)

Créer un formulaire d'inscription d'un étudiant

Formulaire.js

App.js