¿Cómo crear una aplicación para lanzar monedas usando ReactJS?

Básicamente, queremos crear una aplicación para lanzar o lanzar la moneda. cada vez que se lanza una moneda al azar, se muestra un lado de una moneda de cara y cruz y también queremos realizar un seguimiento de cuántas veces se lanzan las monedas y cuántas veces aparecen caras y cruces.

Creamos tres componentes ‘App’ y ‘FlipCoin’ y ‘Coin’. El componente de la aplicación representa un solo componente FlipCoin. No hay una lógica real dentro del componente de la aplicación. El componente FlipCoin contiene toda la lógica detrás. Tiene una moneda de utilería predeterminada que es una array que contiene dos imágenes cara y cruz (caras de una moneda). Es un componente con estado y tiene caras actuales de tres estados, el número total de lanzamientos y el número de caras. Un controlador de eventos de clic se establece en el botón ‘voltear’. La función del controlador básicamente elige la cabeza o la cola de la cara al azar en función de un valor generado aleatoriamente y actualiza el estado actual de la cara de la cara elegida cada vez que se ejecuta el controlador. La función del controlador también realiza un seguimiento de cuántas veces se hace clic en el botón de volteo y cuántas veces se genera aleatoriamente la cara de la cabeza y actualiza su valor al estado respectivo. El último componente Coin es responsable de mostrar la cara correcta de la moneda de acuerdo con el lado elegido al azar de la función de controlador en el componente FlipCoin. FlipCoin utiliza un sistema de accesorios para comunicarse con el componente Coin. 

Ejemplo: En este ejemplo, haremos algunos cambios en App.js para importar un componente. En ese componente, incluiremos dos caras de una moneda de una imagen. Y voltea eso como una sola imagen.

Nombre de archivo- index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

Nombre de archivo: App.js: el componente de la aplicación representa solo un componente FlipCoin 

import React from 'react';
import FlipCoin from './FlipCoin'
 
const App=()=> {
  return (
    <div className="App">
      <FlipCoin />
    </div>
  );
}
 
export default App;

Nombre de archivo- FlipCoin.js: Contiene toda la lógica detrás. Es un componente con estado. Los estados son currFace, totalFlips y heads. Contiene dos caras de una moneda como accesorio predeterminado y actualiza el estado de currFace de acuerdo con un número aleatorio que se genera cada vez que el componente se vuelve a renderizar. Es responsable de configurar el controlador de eventos, actualizando todos los estados de acuerdo con el componente de moneda de procesamiento de interacción del usuario.

import React,{ Component } from 'react'
import Coin from './Coin'
 
class FlipCoin extends Component{
  static defaultProps = {
    coins : [
     
      // Sides of the coin
      {side:'head', imgSrc:
'https://media.geeksforgeeks.org/wp-content/uploads/20200916123059/SHalfDollarObverse2016head-300x300.jpg'},
      {side:'tail', imgSrc:
'https://media.geeksforgeeks.org/wp-content/uploads/20200916123125/tails-200x200.jpg'}
    ]
  }
 
  constructor(props){
    super(props)
     
    // Responsible to render current updated coin face
    this.state = {
       
      // Track total number of flips
      currFace : null,
      totalFlips:0,
      heads: 0
    }
     
    // Binding context of this keyword
    this.handleClick = this.handleClick.bind(this)
  }
 
   // Function takes array of different faces of a coin
  //  and return a random chosen single face
  choice(arr){
    const randomIdx = Math.floor(Math.random() * arr.length)
    return arr[randomIdx]
  }
   
  // Function responsible to update the states
  // according to users interactions
  flipCoin(){
    const newFace = this.choice(this.props.coins)
    this.setState(curState => {
      const heads = curState.heads +
      (newFace.side === 'head' ? 1 : 0)
      return {
        currFace:newFace,
        totalFlips:curState.totalFlips + 1,
        heads:heads
      }
    })
  }
 
  handleClick(){
    this.flipCoin()
  }
  render(){
    const {currFace, totalFlips, heads} = this.state
    return(
      <div>
        <h2>Let's flip a coin</h2>
         
        {/* If current face exist then show current face */}
        {currFace && <Coin info={currFace} />}
         
        {/* Button to flip the coin  */}
        <button onClick={this.handleClick}>Flip Me!</button>
         
         
 
<p>
          Out of {totalFlips} flips, there have been {heads} heads
          and {totalFlips - heads} tails
        </p>
 
 
 
      </div>
    )
  }
}
 
export default FlipCoin

 
Nombre de archivo: Coin.js: responsable de mostrar el lado de una moneda de acuerdo con el estado actual del componente FlipCoin. El componente FlipCoin se comunica con el componente Coin a través del sistema de accesorios

import React,{ Component } from 'react'
 
class Coin extends Component{
  render(){
    return(
      <div class='Coin'>
        <img
          style={{ width:'200px', height:'200px' }}
          src={this.props.info.imgSrc}
        />
      </div>
    )
  }
}
 
export default Coin

 
 Producción :