React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Number extends React.Component {
 	render () {
 	 	return (
 	 	 	<div className="number">  { this.props.value } </div>
 	 	)
 	}
}


const randomNumberBetween = (min, max) =>
  Math.floor(Math.random() * (max - min + 1)) + min;

class Game extends React.Component {
  constructor() {
    super();
    this.target = Array(4).fill().map(number => randomNumberBetween(1, 10)).reduce( (sum, slot) => sum + slot);
  }
  	/*
  	-----------> the following random number function and target variable seem to be in the wrong part of the code because it breaks but I'm not sure where I should put it then: */


  	 render () {
  	 	 return (
  	 	 	 <div>
  	 	 	  <div className="help">
  	 	 	   pick the four numbers that make the target number
  	 	 	  </div>
  	 	 	   <div className="target">{ this.target }</div>
  	 	 	     <Number value="X" />
  	 	 	     <Number value="X" />
  	 	 	     <Number value="X" />
  	 	 	     <Number value="X" />
  	 	 	     <Number value="X" />
  	 	 	     <Number value="X" />

  	 	 	     <div className="footer">
          <div className="timer-value">15</div>
          <button>Start</button>
        </div>

  	 	 	  </div>
  	 	 	)
  }
}


ReactDOM.render(
  <Game />,
  document.getElementById('container')
);