React Base Fiddle (JSX)

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var Table = React.createClass({

    getInitialState: function(){
        return { focused: 0 };
    },

    clicked: function(index){

        // The click handler will update the state with
        // the index of the focused menu entry

        this.setState({focused: index});
    },

    render: function() {

        // Here we will read the items property, which was passed
        // as an attribute when the component was created

        var self = this;

        // The map method will loop over the array of menu entries,
        // and will return a new array with <li> elements.

        return (
            <table>
                <tbody>{ this.props.items.map(function(m, index) {
        
                    var style = '';
        
                    if(self.state.focused == index){
                        style = 'focused';
                    }
        
                    // Notice the use of the bind() method. It makes the
                    // index available to the clicked function:
        
                    return (
                    	<tr>
                      	<td>{m.name}</td>
                        <td>{m.price}</td>
                      </tr>
                    );
        
                }) }
                        
                </tbody>
            </table>
        );

    }
});


var randomFruits = ['Apple', 'Orange', 'Banana', 'Mango', 'Kiwi', 'Apricot', 'Avocado',
'Cherry', 'Coconut', 'Fig', 'Grape', 'Pear', 'Peach', 'Lime'],
	fruitArr = [],
  index = 0,
  len = randomFruits.length,
  price;

for (var i = 0; i < 100000; i++) {
	index = Math.floor(Math.random() * len);
  price = Math.floor(Math.random() * 5) + 5; // from $5 - $10
	fruitArr.push({id: i, name: randomFruits[index], price: price});
}

var start = new Date();
ReactDOM.render(
    <Table items={fruitArr} />,
    document.getElementById('container')
);
var stop = new Date();
alert(stop - start);