ReactJs ile sayı bulmaca oyunu - https://jscomplete.com/repl için

sayi-bulmaca.jsx

const Textbox = (props) =>  {
    return (
      <input value={props.estimation} onKeyDown={props.keyDownHandler} onChange={props.changeHandler}/>
    )
}

const Result = (props) => {
	return (
  	<span style={{fontSize:14}}>#{props.order}. {props.estimation}  {props.result}</span>
  )
}

const ResultList = (props) => {
	if(props.results && props.results.length === 0)
  	return (<div></div>);
    
	let sortedResults = props.results.sort((a,b) => a.timestamp > b.timestamp ? -1 : 1).slice(0, 10);
	return (
  	<div style={{'background-color':'#eee', padding:'5px'}}>
      <h3>Son 10 Tahmin</h3>
      <div>
        {sortedResults.map(r=> <div><Result {...r}/></div>)}
      </div>
    </div>
  )
}

const NumberOfEstimations = (props) => {
	return (
  	<div>{props.estimationCount} tahmin yaptınız.</div>
  )
};

class App extends React.Component {
	
  state = {estimation:"", secret: Math.round(Math.random() * 1000), estimationCount:0, results: []};
  initState = () => {
  	this.setState({estimation:"", secret: Math.round(Math.random() * 1000), estimationCount:0, results: []});
  };
  handleKeyDown = (event) => {
  	if(event.keyCode === 13) {
    	let diff = parseInt(this.state.estimation) - this.state.secret;
      
      if(diff > 0) {
      	this.addToResultHistory("Daha küçük");
      } else if(diff < 0) {
      	this.addToResultHistory("Daha büyük");
      } else {
      	this.addToResultHistory("BRAVO! Bildin!");
        alert("Bravo! " + this.state.estimationCount + " defada bildiniz.");
        this.setState({secret: Math.round(Math.random() * 1000)});
        this.initState();
      }
      // empty box
      this.setState({estimation:""});
    }
  };
  
  addToResultHistory = (result) => {
  	this.setState(prevState => ({results: prevState.results.concat({estimation: this.state.estimation, result: result, timestamp:Date.now(), order: ++prevState.estimationCount}), estimationCount: prevState.estimationCount++}));
  };
  
  changeHandler = (event) => {
  	let newVal = event.target.value;
    if(!isNaN(newVal) && parseInt(newVal) >= 0) {
    	this.setState({estimation:parseInt(newVal)});
    }
  };
  render() {
  	return (
    <div>
      <h1>Sayı Bulmaca Oyunu</h1>
      <div className="intro">0 ile 1000 arasında bir sayıyı bulmaya çalışacaksınız. Sayıyı yazıp Enter tuşuna basın ve bulana kadar devam edin.</div>
    	  <Textbox estimation={this.state.estimation} keyDownHandler={this.handleKeyDown} changeHandler={this.changeHandler} />
        <NumberOfEstimations estimationCount={this.state.estimationCount}/>
        <ResultList results={this.state.results}/>
      </div>
    )
  }
}

ReactDOM.render(<App/>, mountNode);