Example

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 FactDisplay extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    	count: 0,
    	fact: '0 is the start',
    };
    this.increment = this.increment.bind(this);
  }

	increment() {
  	this.setState((prevState) => ({ count: prevState.count + 1 }));
    getFact()
    	.then((fact) => this.setState({ fact }));
  }

	render() {
  	return (
    	<div>
        <div>Count: {this.state.count}</div>
        <div>
          <button onClick={this.increment}>Next</button>
        </div>
        <div dangerouslySetInnerHTML={{ __html: this.state.fact }}></div>
      </div>
    );
  }
}

function getFact() {
	return fetch('https://api.icndb.com/jokes/random')
  	.then((resp) => resp.json())
    .then((data) => data.value.joke);
}

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