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

.active {
  background: green;
}

JavaScript 1.7

class Menu extends React.Component {
	constructor(){
  	super()
    this.state = {
    	items: ['Hello', 'world', 'it', 'is', 'me'],
      active: 0
    }
  }
  click(index){
  	this.setState({active: index})
  }
  render(){
  	const list = this.state.items.map((item,index) => {
    	return <Item key={index} 
      	className={this.state.active === index ? 'active' : ''} 
        text={item}
        click={this.click.bind(this, index)}
      />
    })
    return <ul>
    	{list}
    </ul>
  }
}

class Item extends React.Component {
	constructor(){
  	super();
  }
  render(){
  	return <li onClick={this.props.click} className={this.props.className}>{this.props.text}</li>		
  }
}


React.render(<Menu />, document.getElementById('container'));