JSFiddle - React, Tailwind, and code Playground

Starting point for creating JSFiddles with React.

by findango

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" />

Babel + JSX

class Hideable extends React.Component {
	componentWillMount() {
  	console.log('mount');
  }
  
  componentWillUnmount() {
  	console.log('unmount');
  }
  
  render() {
    return (
    	<div style={{ display: this.props.hidden ? 'none' : 'block'}}>
        {this.props.children} {this.props.hidden}
      </div>
    );
  }
}

class Hello extends React.Component {
  constructor() {
  	super();
    this.state = {
    	hidden: false,
      mounted: true,
    };
    this.toggleHide = this.toggleHide.bind(this);
    this.toggleMount = this.toggleMount.bind(this);
  }
  
  toggleHide() {
  	this.setState({ hidden: !this.state.hidden });
  }
  
  toggleMount() {
  	this.setState({ mounted: !this.state.mounted });  
  }
  
  render() {
    console.log(this.state);
    return (
    	<div>
        <div>Hello {this.props.name} : hidden? {this.state.hidden ? 'yes' : 'no'}</div>
        <button onClick={this.toggleHide}>Hide or Show</button>
        <button onClick={this.toggleMount}>Mount or Unmount</button>
        {this.state.mounted && (
        	<Hideable hidden={this.state.hidden}>This is hideable</Hideable>
        )}
        <div>And this is at the end</div>
    	</div>
    );
  }
}

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