React Base Fiddle (JSX)

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

by aspirisen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.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>

CSS

.selected {
  color: red;
}

li {
  cursor: pointer;
}

JavaScript 1.7

var App =

    React.createClass({

        getInitialState: function () {
            return {
                selected: -1,
                data: [
                    {value: 1},
                    {value: 3},
                    {value: 9},
                    {value: 2},
                    {value: 7}
                ]
            }
        },

        handleClick(item){
            this.setState({selected: item.value});
        },

        isSelected(item){
            return item.value === this.state.selected;
        },

        render: function () {
            var items = this.state.data.map(item => <li className={this.isSelected(item) && 'selected'} onClick={() => this.handleClick(item)}>{item.value}</li>);

            return (
                <ul>
                    { items }
                </ul>
            )
        }

    });

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