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">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Hello extends React.Component{
   constructor(props){
     super(props);
     this.state = {
        scriptString: ''
     };
   }
   handleKeyDown(event) {
      if (event.keyCode === 9) { // tab was pressed
          event.preventDefault();
          var val = this.state.scriptString,
              start = event.target.selectionStart,
              end = event.target.selectionEnd;

          this.setState({"scriptString": val.substring(0, start) + '\t' + val.substring(end)}, () => this.refs.input.selectionStart = this.refs.input.selectionEnd = start + 1);
      }
  }
  onScriptChange(event) {
     this.setState({scriptString: event.target.value});
  }
  render() {
      return (
          <textarea rows="30" cols="100" 
                    ref="input"
                    onKeyDown={this.handleKeyDown.bind(this)}
                    onChange={this.onScriptChange.bind(this)} 
                    value={this.state.scriptString}/>
      )
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);