React Base Fiddle (JSX)

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

by herodrigues

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<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>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div class="container"></div>

CSS

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #eee;
  margin: 0;
  padding: 0;
}
.tabs {
  margin: 25px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
}
.tabs__labels {
  margin: 0;
  padding: 0;
}
.tabs__labels li {
  display: inline-block;
}
.tabs__labels li a {
  padding: 8px 12px;
  display: block;
  color: #444;
  text-decoration: none;
  border-bottom: 2px solid #f5f5f5;
}
.tabs__labels li a.active {
  border-bottom-color: #337ab7;
}
.tabs__content {
  padding: 25px;
}

JavaScript 1.7

var Tabs = React.createClass({
	displayName: 'Tabs',
	propTypes: {
    selected: React.PropTypes.number,
    children: React.PropTypes.oneOfType([
      React.PropTypes.array,
      React.PropTypes.element
    ]).isRequired
  },
  getDefaultProps: function () {
  	return {
    	selected: 0
    };
  },
  getInitialState: function () {
    return {
    	selected: this.props.selected
    };
  },
  shouldComponentUpdate(nextProps, nextState) {
  	return this.props !== nextProps || this.state !== nextState;
  },
  handleClick: function (index, event) {
  	event.preventDefault();
    this.setState({
    	selected: index
    });
  },
  _renderTitles: function () {
  	function labels(child, index) {
    	var activeClass = (this.state.selected === index ? 'active' : '');
    	return (
      	<li key={index}>
        	<a href="#" 
          	className={activeClass}
          	onClick={this.handleClick.bind(this, index)}>
          	{child.props.label}
          </a>
        </li>
      );
    }
  	return (
    	<ul className="tabs__labels">
      	{this.props.children.map(labels.bind(this))}
      </ul>
    );
  },
  _renderContent: function () {
  	return (
    	<div className="tabs__content">
	    	{this.props.children[this.state.selected]}
      </div>
    );
  },
	render: function () {
  	return (
    	<div className="tabs">
      	{this._renderContent()}      
        {this._renderTitles()}
      </div>
    );
  }
});

var Pane = React.createClass({
	displayName: 'Pane',
  propTypes: {
    label: React.PropTypes.string.isRequired,
    children: React.PropTypes.element.isRequired
  },
	render: function () {
  	return (
    	<div>
      	{this.props.children}
      </div>
    );
  }
});

var App = React.createClass({
	render: function () {
  	return (
    	<div>
        <Tabs selected={0}>
          <Pane label="Tab 1">
            <div>This is my tab 1 contents!</div>
          </Pane>
          <Pane label="Tab 2">
            <div>This is my tab 2 contents!</div>
   ...