React Base Fiddle (JSX)

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

by muztv

HTML

<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>
<div id="app"></div>

CSS

.tab {
  width: 45%;
  display: inline-block;
  border: 1px solid black;
}

Babel + JSX

class HelloMessage extends React.Component {
		constructor() {
    		super();
    		this.state = {
        	items: [
          	{
            	text: 'Item 1',
              data: 'dvsdvdsvdv'
            },
            {
            	text: 'Item 2',
              data: '2222222222'
            },
            {
            	text: 'Item 3',
              data: '333333333'
            },
            {
            	text: 'Item 4',
              data: '44444444'
            }
          ],
          selectedItem: 0
        };
 
    }
    
    selectItem(index){
    	this.setState({
      		selectedItem: index
      })
    }
    
    render(){
        return <div>
            <div className="tab">
              {this.state.items.map((item, index) => {
              		return (<div onClick={this.selectItem.bind(this, index)}>{item.text}</div>)
              })}
            </div>
            <div className="tab">
              Data: 
              {this.state.items[this.state.selectedItem].data}
              <button>Button</button>
            </div>
        </div>;
    }
};

ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app'));