JSFiddle - React, Tailwind, and code Playground

by wittnl

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="app">
<!-- ReactDOM will replace this -->
<p>How does this work?</p>
<p>Can you see this now?</p>
</div>

Babel + JSX

class Subcomponent extends React.Component {
	constructor(props) {
		super(props);
    this.state = {
  		clickCount: 0
  	}
  }

	render() {
  	return (
      <div>
        <input
          onClick ={() => this.setState({ clickCount: this.state.clickCount + 1})}
          value={`Button clicked ${this.state.clickCount} times`}
          type="button" />
      </div>
    );
  }
}

class Main extends React.Component {
	render() {
  	return (
    	<div>
        <h1>Collabo?!1</h1>
        <p>CCAC exercises 😱</p>
        <Subcomponent />
      </div>
    );
  }
}

ReactDOM.render(
	<Main />,
  document.getElementById('app')
);