React Base Fiddle (JSX)

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.grid-form *, .grid-form *:before, .grid-form *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.grid-form input[type="text"], .grid-form input[type="email"], .grid-form input[type="number"], .grid-form input[type="password"], .grid-form input[type="search"], .grid-form input[type="tel"], .grid-form input[type="url"], .grid-form input[type="color"], .grid-form input[type="date"], .grid-form input[type="datetime"], .grid-form input[type="datetime-local"], .grid-form input[type="month"], .grid-form input[type="time"], .grid-form input[type="week"], .grid-form textarea, .grid-form select { font-size: 18px; padding: 0; margin: 0; width: 100%; }
.grid-form input[type="text"], .grid-form input[type="email"], .grid-form input[type="number"], .grid-form input[type="password"], .grid-form input[type="search"], .grid-form input[type="tel"], .grid-form input[type="url"], .grid-form input[type="color"], .grid-form input[type="date"], .grid-form input[type="datetime"], .grid-form input[type="datetime-local"], .grid-form input[type="month"], .grid-form input[type="time"], .grid-form input[type="week"], .grid-form textarea { border: 0; background: transparent; }
.grid-form input[type="text"]::-webkit-input-placeholder, .grid-form input[type="email"]::-webkit-input-placeholder, .grid-form input[type="number"]::-webkit-input-placeholder, .grid-form input[type="password"]::-webkit-input-placeholder, .grid-form input[type="search"]::-webkit-input-placeholder, .grid-form input[type="tel"]::-webkit-input-placeholder, .grid-form input[type="url"]::-webkit-input-placeholder, .grid-form input[type="color"]::-webkit-input-placeholder, .grid-form input[type="date"]::-webkit-input-placeholder, .grid-form input[type="datetime"]::-webkit-input-placeholder, .grid-form input[type="datetime-local"]::-webkit-input-placeholder, .grid-form input[type="month"]::-webkit-input-placeholder, .grid-form input[type="time"]::-webkit-input-placeholder,...

JavaScript 1.7

function doStuff(){
  console.log('this is a no op')
}
GridRow = React.createClass({
  componentDidMount: function(){
		const rowHeight = $(React.findDOMNode(this)).css('height')
		this.props.children = this.props.children.map(child => {
			child.props.height = rowHeight
			return child
		})
	},
  render: function(){
    return (<div data-row-span={this.props.span} {...this.props}>
      {this.props.children}
    </div>)
  }
})

GridCol = React.createClass({
  render: function(){
		console.log(this)
    return (<div data-field-span={this.props.span} {...this.props} style={{height: this.props.height}}>
      {this.props.children}
    </div>)
  }
})


GridForm = React.createClass({
  render: function(){
    return (<form className="grid-form" {...this.props}>
      <fieldset>
          {this.props.legend ? <legend>{this.props.legend}</legend> : null}
          {this.props.children}
      </fieldset>
  </form>)
  }
})
TestForm = React.createClass({
  render: function(){
    return (<GridForm>
      <GridRow span='6'>
        <GridCol span='5'>
          <input type="text" />
        </GridCol>
        <GridCol span='1'>
          <button onClick={doStuff}>
            Do Stuff
          </button>
        </GridCol>
      </GridRow>
      <GridRow span='4'>
        <GridCol span='1'>
          <input type="text" />
          <input type="text" value='demo of taller component' onChange={doStuff} />
        </GridCol>
        <GridCol span='1'>
          <input type="text" />
        </GridCol>
        <GridCol span='1'>
          <input type="text" />
        </GridCol>
        <GridCol span='1'>
          <input type="text" />
        </GridCol>
      </GridRow>
    </GridForm>)
  }
})
 
React.render(<TestForm />, document.getElementById('container'));