JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<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="container"></div>

Babel + JSX

class App extends React.Component {
	
  render() {
  	return (
    	<div>
        <Diff/>
    	</div>
    );
  }
}


class Diff extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      count: 1
    }
  }

  handler = (e) => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render () {
    return (
      <div>
        {/* DOM element的type不同 */}
        {
          this.state.count%2 ?
          <div><p>1</p></div> :
          <h1><p>1</p></h1>
        }
        {/* Component Element的type不同 */}
        {
          this.state.count%2 ?
          <Button /> :
          <Input />
        }
        <button onClick={this.handler}>test{this.state.count}</button>
      </div>
    )
  }
}

class Button extends React.Component {
  constructor () {
    super()
    console.log('button constructor')
  }
  componentWillMount () {
    console.log('button will mount')
  }
  componentDidMount () {
    console.log('button did mount')
  }
  componentWillUnmount () {
    console.log('button will unmount')
  }
  render () {
    return <button>test button</button>
  }
}

class Input extends React.Component {
  constructor () {
    super()
    console.log('input constructor')
  }
  componentWillMount () {
    console.log('input will mount')
  }
  componentDidMount () {
    console.log('input did mount')
  }
  componentWillUnmount () {
    console.log('input will unmount')
  }
  render () {
    return <button>test input</button>
  }
}

ReactDOM.render(<App name="world"/>, document.getElementById('container'));