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>

CSS

input {
  display: block;
  margin: 6px;
}

input#sum {
  background: #EFEFEF;
  
}

Babel + JSX

class Hello extends React.Component {
  constructor(props) {
  	super(props);
    this.state = {
    	num1: 1, num2: 2, num3: 4
    };
  }

	handleChange(ev) {
    this.setState({ [ev.target.name]: parseInt(ev.target.value) });
  }

  render(props, state) {
    return (
    	<div>
    	  <input type='number' value={this.state.num1} name='num1' onChange={this.handleChange.bind(this)} />
        <input type='number' value={this.state.num2} name='num2' onChange={this.handleChange.bind(this)} />
        <input type='number' value={this.state.num3} name='num3' onChange={this.handleChange.bind(this)} />
        
        <input type='number' id='sum' readonly value={this.state.num1 + this.state.num2 + this.state.num3} name='sum' />
    	</div>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);