Just noticed that since we switched to Babel, compile error is ugly if you make a mistake on https://facebook.github.io/react/ interactive examples:

<img width="339" alt="screen shot 2017-04-21 at 4 53 33 pm" src="https://cloud.githubusercontent.com/assets/810438/25285719/23c3a592-26b3-11e7-976f-1f0b8ead7ed3.png">

We should fix it to preserve the newlines. It should be an easy fix.

You’d need to follow the instructions in the `docs` folder to get them running, then figure out a fix and send a PR. Please comment here if you plan to work on this so that two people don’t work on the same thing.

---

## Update: @tsriram is looking at this.
var JSXTab =
      <div
        className={JSXTabClassName}
        onClick={this.handleCodeModeSwitch.bind(this, this.MODES.JSX)}>
          {this.props.editorTabTitle}
      </div>
    return (
      <div className="playground">
        <div>
          {JSXTab}
          {this.props.showCompiledJSTab && JSTab}
        </div>
        <div className="playgroundCode">
          {isJS ? JSContent : JSXContent}
        </div>
        <div className="playgroundPreview">
          <div ref="mount" />
        </div>
      </div>
    );
  },
  componentDidMount: function() {
    this.executeCode();
  },
  componentDidUpdate: function(prevProps, prevState) {
    
    
    if (this.props.transformer !== prevProps.transformer ||
        this.state.code !== prevState.code) {
      this.executeCode();