JSFiddle - React, Tailwind, and code Playground

by Alexandre Azevedo

HTML

<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/browser.min.js"></script>
<div id="counter"></div>

Babel + JSX

class Counter extends React.Component {

  constructor() {
    super();
    this.state = {
      counter: 0
    };
    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    });
    console.log(this.state.counter);
  }

  render() {
    return (
    	<div>
      	<button onClick={ this.increment }>Click!</button>
        <h4>{ this.state.counter }</h4>
      </div>
    );
  }

}

ReactDOM.render(
  <Counter />,
  document.getElementById('counter')
);