React Example

React list

var AppLink = React.createClass({
    render: function() {
        return  <li onClick={this.props.select.bind(null,this.props.app)}>
                    {this.props.app}
                </li>;
    },
});

var AppList = React.createClass({
    render: function() {
        var select = this.props.select;
        var createItem = function(app, index) {
            return <AppLink app={app} key={index} select={select}/>
        };
        return <ul>{this.props.apps.map(createItem)}</ul>;
    }
});

var AppView = React.createClass({
    render: function() {
        return (
            <iframe src={this.props.src}></iframe>
        );
    }
});

var UI = React.createClass({
    getInitialState: function() {
      return {src: constructUrl(IDs[0])};
    },
    render: function() {
        return (
            <div className={"uiContainer"}>
                <div className={"appList"}>
                    <AppList apps={this.props.apps} select={this.showApp}/>
                </div>
                <div className={"appView"}> 
                    <AppView src={this.state.src}/>
                </div>
            </div>
        );
    },
    showApp: function(id) {
        this.setState({src: constructUrl(id)});
    }
});

React.render(
  <UI apps={IDs} />,
  document.getElementById('sidePanel')
);

function constructUrl(id){
    return baseUrl+"?id="+id;
}