React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Daniel Lizik

HTML

<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<div id="container"></div>

Babel + JSX

const { Component } = React
const { render } = ReactDOM

class Form extends Component {
  constructor() {
    super()
    this.state = { foo: null, bar: null }
  }
  onSubmit(e) {
    e.preventDefault()
    this.props.onSubmit(this.state)
  }
  render() {
    return (
      <form onSubmit={(e) => this.onSubmit(e)}>
        <input 
          value={this.props.foo}
          onChange={(e) => this.setState({ foo: e.target.value })} />
        <input 
          value={this.props.bar} 
          onChange={(e) => this.setState({ bar: e.target.value })} />
        <input type="submit" />
      </form>
    )
  }
}

const Container = (props) => (
  <div>
  	<Form
      foo="fooval"
      bar="flksdjf"
      onSubmit={(state) => alert(JSON.stringify(state, null, 2))} />
  </div>
)

render(<Container />, document.getElementById('container'))