/index.html

## index.html
<html>
  <head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://fb.me/react-0.12.2.min.js"></script>
    <script src="https://fb.me/JSXTransformer-0.12.2.js"></script>
  </head>
  <body>
    <div id="soln1"></div>
    <div id="soln2"></div>
    <div id="soln3"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */

      var TestApp = React.createClass({
        getComponent: function(index){
          $(this.getDOMNode()).find('li:nth-child('+index+')').css({'background-color': '#ccc'});
        },
        render: function(){
          return(
               <div>
                 <ul>
                  <li onClick={this.getComponent.bind(this, 1)}>Component 1</li>
                  <li onClick={this.getComponent.bind(this, 2)}>Component 2</li>
                  <li onClick={this.getComponent.bind(this, 3)}>Component 3</li>
                 </ul>
               </div>
          );
        }
      });
      React.renderComponent(<TestApp />, document.getElementById('soln1'));

      var ListItem = React.createClass({
        getInitialState: function(){
          return {isSelected: false};
        },
        handleClick: function(){
          this.setState({
            isSelected: !this.state.isSelected
          })
        },
        render: function(){
          var isSelected = this.state.isSelected;
          var style= {'background-color' : ''};
          if(isSelected){

              style= {'background-color' : '#ccc'};
          }
          return(
            <li onClick={this.handleClick} style={style}>{this.props.content}</li>
          );
        }
      });

      var TestApp2 = React.createClass({
        getComponent: function(index){
          $(this.getDOMNode()).find('li:nth-child('+index+')').css({'background-color': '#ccc'});
        },
        render: function(){
          return(
               <div>
                 <ul>
                  <ListItem content="Component 1" />
                  <ListItem content="Component 2" />
                  <ListItem content="Component 3" />
                 </ul>
               </div>
          );
        }
      });
      React.renderComponent(<TestApp2 />, document.getElementById('soln2'));
    </script>


</body>
</html>
	<html>
	<head>
	<title>Test</title>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="https://fb.me/react-0.12.2.min.js"></script>
	<script src="https://fb.me/JSXTransformer-0.12.2.js"></script>
	</head>
	<body>
	<div id="soln1"></div>
	<div id="soln2"></div>
	<div id="soln3"></div>
	<script type="text/jsx">
	/** @jsx React.DOM */

	var TestApp = React.createClass({
	getComponent: function(index){
	$(this.getDOMNode()).find('li:nth-child('+index+')').css({'background-color': '#ccc'});
	},
	render: function(){
	return(
	<div>
	<ul>
	<li onClick={this.getComponent.bind(this, 1)}>Component 1</li>
	<li onClick={this.getComponent.bind(this, 2)}>Component 2</li>
	<li onClick={this.getComponent.bind(this, 3)}>Component 3</li>
	</ul>
	</div>
	);
	}
	});
	React.renderComponent(<TestApp />, document.getElementById('soln1'));

	var ListItem = React.createClass({
	getInitialState: function(){
	return {isSelected: false};
	},
	handleClick: function(){
	this.setState({
	isSelected: !this.state.isSelected
	})
	},
	render: function(){
	var isSelected = this.state.isSelected;
	var style= {'background-color' : ''};
	if(isSelected){

	style= {'background-color' : '#ccc'};
	}
	return(
	<li onClick={this.handleClick} style={style}>{this.props.content}</li>
	);
	}
	});

	var TestApp2 = React.createClass({
	getComponent: function(index){
	$(this.getDOMNode()).find('li:nth-child('+index+')').css({'background-color': '#ccc'});
	},
	render: function(){
	return(
	<div>
	<ul>
	<ListItem content="Component 1" />
	<ListItem content="Component 2" />
	<ListItem content="Component 3" />
	</ul>
	</div>
	);
	}
	});
	React.renderComponent(<TestApp2 />, document.getElementById('soln2'));
	</script>


	</body>
	</html>