React Base Fiddle (JSX)

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

HTML

<script src="http://www.jimsproch.com/react/babel-browser.js"></script>
<script src="http://www.jimsproch.com/react/future/react.js"></script>
<script src="http://www.jimsproch.com/react/future/react-dom.js"></script>
<script src="http://www.jimsproch.com/react/future/react-dom-server.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<h3>Test pre-computed component sizes.</h3>

<div id="container"></div>

<hr />
<div class="report">
  <p>Estimate: <span id="estimate"></span> </p>
  <p>Actual: <span id="actual"></span> </p>
<div id="ruler"></div>

CSS

#ruler {
        visibility:hidden;
        position:absolute;
        top:-8000px;
        left:-8000px;
        width:auto;
        display:inline;
}

#container {
  width: auto;
  display:inline;
  border: 1px solid black;
}

JavaScript 1.7

export function getSize(cpt) {
    var elem = getSize.elem
      || (getSize.elem = document.getElementById("ruler"));

    const html = ReactDOMServer.renderToStaticMarkup(cpt);
    elem.innerHTML = html;
    return [elem.scrollWidth, elem.scrollHeight];
}

var Foo = React.createClass({
  componentDidMount() {
    const sz = this.elem.getBoundingClientRect();
    console.log(sz);
    ReactDOM.render(<span>{ [sz.width,sz.height].join("x") }</span>, document.getElementById('actual'));
  },
  render() {
    return <div ref={e => { this.elem = e; }} className="content"> <p> Bar!! BAZ </p> <p> another line </p> </div>;
  }
})

const cpt = <Foo />;

// Measure once
ReactDOM.render(<span>{ getSize(cpt).join("x") }</span>, document.getElementById('estimate'));

// Cut twice.
ReactDOM.render(cpt, document.getElementById('container'));