Adivina el número con React

Creamos dos componentes App y Result. Los componentes de la aplicación contienen toda la lógica, tienen estado y el componente Resultado solo muestra el mensaje apropiado en la página de acuerdo con la suposición del usuario. El componente de la aplicación tiene un campo de entrada controlado en el que el usuario puede escribir y adivinar el número. Hay un accesorio predeterminado que configuramos en el componente de la aplicación ‘secreto’ que contiene el número secreto requerido y se genera aleatoriamente. El componente de la aplicación pasa el valor del campo de entrada y el número secreto al componente Result. En consecuencia, el componente de resultado muestra el mensaje apropiado de que el número adivinado es alto, bajo o correcto.

Requisito previo: 
 

• Conocimientos básicos de React.
• Configuración del entorno de desarrollo

Ejemplo: aquí editaremos el archivo index.html y el archivo app.js según nuestro requisito. Para el resultado crearemos un componente y diseñaremos el componente de salida. 
 

• índice.js:

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

• aplicación.js:

import React, { Component } from 'react'
import Result from './Result'
 
class App extends Component{
 
  static defaultProps =  {
    secret : Math.floor(Math.random() * 20) + 1
  }
 
  constructor(props){
    super(props)
    this.state = { term : '' }
 
    this.handleChange = this.handleChange.bind(this)
  }
 
  handleChange(event){
    this.setState({
      [event.target.name] : event.target.value
    })
  }
 
  render(){
    return (
      <div>
        <div>
          <label htmlFor='term'>
            Guess Number between 1 to 20
          </label>
        </div>
        <input
          id='term'
          type='text'
          name='term'
          value={this.state.term}
          onChange={this.handleChange}
        />
   
        <Result term={this.state.term}
            secretNum={this.props.secret} />
      </div>
    )
  }
}
export default App

• Result.js: este componente se crea para el resultado.

import React from 'react'
 
const Result = ({ term , secretNum }) => {
  let result;
  if(term){
    if(secretNum > term){
      result = 'You guessed Lower'
    }
    else if(secretNum < term){
      result ='You guessed Higher'
    }
    else{
      result ='Yippee, guessed it!'
    }
  }
  return <h3>{result}</h3>
}
 
export default Result

Producción :

Aplicación para adivinar números