React Base Fiddle (JSX)

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

by medmunds

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>
<div id="container"></div>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

SCSS

html, body, #container {
    height: 100%;
}
main {
    display: flex;
    flex-direction: row;
    height: 100vh;
}
nav, section {
    max-height: 100vh;
    overflow: auto; /* <-- this provokes the bug */
}
nav {
    flex: 0 0 auto;
}
section {
    flex: 2 2 auto;
}

/* The rest of this is just to make it look a little cleaner */
body {
    font-size: 16px;
}
nav, section {
    padding: 1em;
}
nav {
    background: #a0d3e8;

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        
        li {
            padding: 0.5em 0;
            cursor: pointer;
            
            &.active {
                font-weight: bold;
            }
        }
    }
}

JavaScript 1.7

window.React = React;

var NavItem = React.createClass({
    render: function() {
        var className = this.props.active ? "active" : "";
        return (
            <li className={className} onclick={this.handleClick}>
              {this.props.section.name}
            </li>
        );
    },
    
    handleClick: function() {
        console.log("Click", this.props.section.id);
        this.props.onpick(this.props.section.id);
    }
    
});


var App = React.createClass({
    getInitialState: function() {
        return {
            activeSection: 0
        };
    },

    render: function() {
        var sections = this.props.sections,
            activeSection = this.state.activeSection,
            changeSection = this.changeSection,
            navMenu = sections.map(function(section) {
                var active = activeSection==section.id;
                return <NavItem key={section.id}
                    section={section} active={active}
                    onpick={changeSection} />;
            });
        return (
        <main>
            <nav><ul>{navMenu}</ul></nav>
            <section>
                Content goes here.
                {this.state.activeSection}
            </section>
        </main>
        );
    },
    
    changeSection: function(id) {
        this.setState({activeSection: id});
    }
});


var sections = [];
for (var i=0; i<30; i++) {
    sections.push({
        id: i,
        name: 'Section ' + i
    });
}

React.render(
    <App sections={sections} />, 
    document.getElementById('container'));