React Base Fiddle (JSX)

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

by blineberry

HTML

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div class="index">    
        <div class="listnav">
        <h2 class="listnav-title">Absinthe Drinks</h2>
        <ul class="listnav-list">
                            <li><a href="/recipes/view/23/monkey-gland" class="listnav-item">Monkey Gland  [IBA]</a></li>
        </ul>
    </div>
        <div class="listnav">
        <h2 class="listnav-title">Brandy Drinks</h2>
        <ul class="listnav-list">
                            <li><a href="/recipes/view/8/alexander" class="listnav-item">Alexander  [IBA]</a></li>
                            <li><a href="/recipes/view/10/angel-face" class="listnav-item">Angel Face  [IBA]</a></li>                    
        </ul>
    </div>
        <div class="listnav">
        <h2 class="listnav-title">Gin Drinks</h2>
        <ul class="listnav-list">
                            <li><a href="/recipes/view/10/angel-face" class="listnav-item">Angel Face  [IBA]</a></li>
                            <li><a href="/recipes/view/23/monkey-gland" class="listnav-item">Monkey Gland  [IBA]</a></li>
        </ul>
    </div>
        <div class="listnav">
        <h2 class="listnav-title">Rum Drinks</h2>
        <ul class="listnav-list">
                            <li><a href="/recipes/view/12/bacardi" class="listnav-item">Bacardi  [IBA]</a></li>                  
        </ul>
    </div>
        <div class="listnav">
        <h2 class="listnav-title">Tequila Drinks</h2>
        <ul class="listnav-list">
                            <li><a href="/recipes/view/141/la-paloma" class="listnav-item">La Paloma <span class="subheading">brent</span></a></li>                    
        </ul>
    </div>     
            
    </div>

<div id="react-index"></div>

JavaScript 1.7

var data = [
{
    name: 'Monkey Gland',
    liquorFamilies: ['Absinthe', 'Gin'],
    href: '/recipes/view/23/monkey-gland',
    iba: true,
    user: 'admin'
},
{
    name: 'Alexander',
    liquorFamilies: ['Brandy'],
    href: '/recipes/view/8/alexander',
    iba: true,
    user: 'admin'
},
{
    name: 'Angel Face',
    liquorFamilies: ['Brandy', 'Gin'],
    href: '/recipes/view/10/angel-face',
    iba: true,
    user: 'admin'
},
{
    name: 'Bacardi',
    liquorFamilies: ['Rum'],
    href: '/recipes/view/12/bacardi',
    iba: true,
    user: 'admin'
},
{
    name: 'La Paloma',
    liquors: ['Tequila'],
    href: '/recipes/view/141/la-paloma',
    iba: false,
    user: 'brent'
}
];
/*
var ToDoItem = React.createClass({
    getInitialState: function() {
        return {value: ''};
    },
    handleChange: function() {
        this.setState({value: event.target.value});
    },
    handleSubmit: function() {
        alert('submit!');
    },
    handleKeyDown: function(e) {
        if (e.which === 13) {
            this.handleSubmit();
        }
    },
    render: function() {
        var value = this.state.value;
        return <li><input 
            type="text" 
            placeholder="What needs to be done?" 
            value={value} 
            onChange={this.handleChange} 
            onKeyDown={this.handleKeyDown}
        /></li>
    }
});

var ListNavItem = React.createClass({
    render: function() {
        var subheading = '<span class="subheading">' + this.props.user + '</span>';
        if (this.props.iba) {
            subheading = '[IBA]';
        }
        return <li><a href={this.props.href} class="listnav-item">{this.props.name} {subheading}</a></li>
    }
});

var ListNavList = React.createClass({
    render: function() {
        var listNavItems = this.props.data.map(function(listNavItem) {
            return (
                <ListNavItem href={listNavItem.href} name={listNavItem.name} />
            );
        });
        return <ul...