Skip to content

Instantly share code, notes, and snippets.

@atommarvel
Last active August 29, 2015 14:22
Show Gist options
  • Save atommarvel/a7e662bf47489d10ad31 to your computer and use it in GitHub Desktop.
Save atommarvel/a7e662bf47489d10ad31 to your computer and use it in GitHub Desktop.
React Example
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment