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

const headers = [
        {
            id: 'section-1',
            header: 'section 1',
        },
        {
            id: 'section-2',
            header: 'section 2',
        },
        {
            id: 'section-3',
            header: 'section 3',
            children: [
                {
                    id: 'section-31',
                    header: 'section 31',
                    children: [
                        {
                            id: 'section-311',
                            header: 'section 311',
                        },
                        {
                            id: 'section-312',
                            header: 'section 312',
                        },
                    ],
                },
                {
                    id: 'section-32',
                    header: 'section 32',
                },
            ],
        },
        {
            id: 'section-4',
            header: 'section 4',
        },
    ];

    const Nav = ({ headers, className }) =>
        <ul className={className}>
            {headers.map((header) => [
                <li className="list-group-item">
                    {header.header}
                </li>,
                (header.children && header.children.length) ? (
                    <Nav className="list-group" headers={header.children} />
                ) : null,
            ])}
        </ul>

    const Toc = () =>
        <div id="my-super-interesting-nav">
            <Nav className="list-group nav-root" headers={headers} />
        </div>
        ReactDOM.render(<Toc />, document.getElementById('container'));