React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

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="container" />

Babel + JSX

class LoginForm extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      password: ''
    }
  }
  
  onSubmit(e) {
    if (this.state.password.length < 5) {
      e.preventDefault()
      alert('oooops')
    }
  }
  
  render() {    
    return (
      <form onSubmit={e => this.onSubmit(e)}>
        <div>
          This is the form for the {this.props.role} user
        </div>
        <input type="text" />
        <input type="text" value={this.state.password} onChange={e => this.setState({password: e.target.value})} />
        <input type="submit" />
      </form>
    )
  }
}

class MyView extends React.Component {
	constructor(props) {
    super(props)
    
    this.state = {
      adminName: "admin"
    }
    
    setTimeout(_ => {
    	this.setState({adminName: 'chtulu'})
    }, 1000)
    
    setTimeout(_ => {
    	this.setState({adminName: 'chtulu'})
    }, 2000)
  }
  
  componentWillMount() {
    alert('mounting...')
  }
  
  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.adminName === nextState.adminName) {
      alert('avoided a re-render')
      return false
    }

    return true
  }

  render() {
    return (
      <div>
        <LoginForm role="regular" />
        <LoginForm role={this.state.adminName} />
      </div>
    )
  }
}

ReactDOM.render(
  <MyView />,
  document.getElementById('container')
);