-
-
Save DimitarChristoff/d0988b95d11efb1a29b8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** @jsx React.DOM */ | |
var Dashboard = React.createClass({ | |
render: function() { | |
return ( | |
<div> | |
<h1>Dashboard!</h1> | |
<ul> | |
<li><Link to="inbox">Inbox</Link></li> | |
</ul> | |
{this.props.activeRoute} | |
</div> | |
); | |
} | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** @jsx React.DOM */ | |
var Inbox = React.createClass({ | |
render: function() { | |
return ( | |
<div> | |
<h1>Inbox!</h1> | |
</div> | |
); | |
} | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** @jsx React.DOM */ | |
var Routes = rf.router.Routes; | |
var Route = rf.router.Route; | |
var Link = rf.router.Link; | |
var Main = React.createClass({ | |
render: function() { | |
return ( | |
<Routes handler={App}> | |
<Route name="dashboard" path="dashboard" handler={PreDashboard}> | |
<Route name="inbox" path="dashboard/inbox" handler={PreInbox}/> | |
</Route> | |
</Routes> | |
); | |
} | |
}); | |
var AsyncJSXRoute = { | |
load: function() { | |
if (window[this.globalName]) return; | |
JSXTransformer.load(this.filePath, this.forceUpdate.bind(this)); | |
}, | |
componentDidMount: function() { | |
setTimeout(this.load, 1000); // feel it good | |
}, | |
render: function() { | |
var fullRoute = window[this.globalName]; | |
return fullRoute ? fullRoute(this.props) : this.preRender(); | |
} | |
}; | |
var PreDashboard = React.createClass({ | |
mixins: [AsyncJSXRoute], | |
filePath: 'examples/partial-app-dashboard.js', | |
globalName: 'Dashboard', | |
preRender: function() { | |
return <div>Loading dashboard...</div> | |
} | |
}); | |
var PreInbox = React.createClass({ | |
mixins: [AsyncJSXRoute], | |
filePath: 'examples/partial-app-inbox.js', | |
globalName: 'Inbox', | |
preRender: function() { | |
return <div>Loading inbox...</div> | |
} | |
}); | |
var App = React.createClass({ | |
render: function() { | |
return ( | |
<div> | |
<h1>Partial App</h1> | |
<ul> | |
<li><Link to="dashboard">Dashboard</Link></li> | |
</ul> | |
{this.props.activeRoute} | |
</div> | |
); | |
} | |
}); | |
React.renderComponent(<Main/>, document.body); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
partial app loading, nested routes, nested views, in react with the router I'm working on: http://recordit.co/UBWfBc24Ud