JSFiddle - React, Tailwind, and code Playground

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      show: true
    };
  }

  ToggleClick = () => {
    this.setState({ show: !this.state.show });
  }

  render() {
    return (
      <div>
          <button onClick={this.ToggleClick}>
            { this.state.show ? 'Hide number' : 'Show number' }
          </button>
          { this.state.show ? <h2>{ this.state.count }</h2> : '' }
      </div>
    );
  }
}

ReactDOM.render(<App /> , document.getElementById("root"))