JSFiddle - React, Tailwind, and code Playground

by zpczjl

HTML

<script src="//cdn.bootcss.com/react/15.6.1/react.js"></script>
<script src="//cdn.bootcss.com/react/15.6.1/react-dom.js"></script>
<div id="app">

</div>

SCSS

@import url("//cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");

Babel + JSX

var globalVariable = "leon"
class Application extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        color: 'blue'
      }
      this.globalVariable = globalVariable
    }
    render() {
      return (
        <div>
          <div className='wrapper' ref={el => this.el = el}>
            <label>
                <input />
                <p className="test">author: {this.globalVariable}</p>
                <button style={{color: this.state.color}} className='test' onClick={e => {alert('author: ' + this.globalVariable); this.setState({color: 'red'})}}>test</button>
            </label>
          </div>
        </div>
      )
    }
  }
ReactDOM.render(<Application />, document.getElementById("app"))


setTimeout(_ => {
  document.querySelector('.test').addEventListener('click', e => {
  	console.log(e)
  })
	
  document.querySelector('.test').click()
}, 2000)