React Hello World Example with ES6+JSX

A basic Hello World widget with in browser JSX transformed + ES6 support

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.buttons{
  display: inline-block;
  margin-right: 10px;
}
button{
  cursor: pointer;
}

.active{
  color: red;
}

JavaScript 1.7

let buttons = ['Button 1', 'Button 2', "Button 3"]


class Test extends React.Component {
		constructor(){
    this.state = {
        active: null
    }
  }
    
  handleClick(i,event){
    this.setState({
        active: i
    })
  }
    
   render(){
   	return (
      	<div>
        	{this.props.buttons.map((button, i) => {
        	return (
          	<div key={i} className="buttons"><button className={this.state.active === i ? 'active' : ''} onClick={this.handleClick.bind(this, i)}>{button}</button></div>
          );
        })}
        </div>
    )
  }
}

React.render(<Test buttons={buttons}/>, document.getElementById('container'));