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)}>
        <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 {
  render() {
    return (
      <div>
        <LoginForm />
        <LoginForm />
      </div>
    )
  }
}

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