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 Hello extends React.Component {
	static getDerivedStateFromProps(props, state) {
    const name = state.name !== props.name ? { name: props.name } : null;
    console.log(`getDerivedStateFromProps returned: ${JSON.stringify(name)}`);
    return name;
  }
  
  constructor(props) {
  	super(props);
    this.state = { name: 'John' };
  }
  
  componentDidUpdate() {
    console.log('componentDidUpdate was called');
  }

  render() {
    console.log('render was called');
    return <div>Hello {this.state.name}</div>;
  }
}

class App extends React.Component {
	componentDidMount() {
  	this.interval = setInterval(() => {
    	const names = ['Jarvis', 'World'];
    	this.setState({name: names[Math.floor(Math.random()* 10) % names.length]});
    }, 1000);
  }
  
  componentWillUnmount() {
  	clearInterval(this.interval);
  }
  
  constructor(props) {
  	super(props);
    this.state={name: 'Test'};
  }

	render() {	
	  return <Hello name={this.state.name} />;
  }
}

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