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





Exercice:Calculatrice

folder Projet: test_react_project
Créer une Calculatrice

App.js

  import React from 'react';
  import './App.css';
  class  App extends React.Component{
    constructor(props)
    {
      super(props);
      this.state={
       results:'',
      keysNumbers:[0,1,2,3,4,5,6,7,8,9],
      keysOper:['+','/','*','C','S']

    }
  }
   
    getButton=(e)=>{
const valeur=e.target.name;

if(valeur=='C')
{
  this.setState({
    results:''
  })
}
else if(valeur=='S')
{
  this.setState({
    results:this.state.results.toString().slice(0,-1)
  })
}
else if(valeur=='=')
{
this.setState({
  results:eval(this.state.results)
})
}
else
{
  this.setState({
    results:this.state.results+valeur
  })
}
    }
   
    render()
    {
      return (
        <div>
          <fieldset>
       <table>
        <tr>
          <td colSpan={10}><input type="text" value={this.state.results} className="input"/></td>
        </tr>
        <tr>
        {
        this.state.keysNumbers.map((n,index)=>{
       
          return <td><button name={n} onClick={this.getButton}>{n}</button></td>
 
        })
      }
      </tr>
      <tr>
        {
        this.state.keysOper.map((n,index)=>{
       
          return <td colSpan={2}><button name={n} onClick={this.getButton} className="input">{n}</button></td>
 
        })
      }
      </tr>
      <tr>
          <td colSpan={10}><button name='=' onClick={this.getButton} className="input">=</button></td>
        </tr>
       </table>
       </fieldset>
        </div>

        );
       
      }
   
    }
    export default App;