JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

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

Babel + JSX

function Hello(){
	return(
  <div>
  <h1>Hello React</h1>
  </div>
  )
}
class Clock extends React.Component{
	constructor(props){
  	super(props)
    this.state = {date: new Date()}
  }
  componentDidMount(){
  	this.timeId = setInterval(
    ()=>this.tick(),
    1000
    )
  }
  componentWillUnMount(){
  	clearInterval(this.timeId)
  }
  tick(){
  	this.setState({
    	date: new Date()
    })
  }
  render(){
  	return(
    <div>
      <h2>{this.state.date.toLocaleTimeString()}</h2>
    </div>
    )
  }
}
ReactDOM.render(<Clock />, document.getElementById('root'))