Created
November 25, 2014 19:37
-
-
Save seanhess/2925452e7f0bf29865d2 to your computer and use it in GitHub Desktop.
omniscient with react-router and immstruct
This file contains hidden or 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 | |
*/ | |
window.React = require('react/addons'); | |
var Immutable = require('immutable') | |
var component = require('omniscient') | |
var immstruct = require('immstruct') | |
var Router = require('react-router') | |
var {Routes, Route, Redirect, NotFoundRoute, DefaultRoute, RouteHandler, Link} = Router | |
//var Details = require('./Details') | |
//var List = require('./List') | |
var state = immstruct({ | |
greeting: "Hello World" | |
}) | |
// ROUTER EXAMPLES | |
//<DefaultRoute handler={Home} /> | |
//<Route name="about" handler={About} /> | |
//<Route name="users" handler={Users}> | |
//<Route name="recent-users" path="recent" handler={RecentUsers} /> | |
//<Route name="user" path="/user/:userId" handler={User} /> | |
//<NotFoundRoute handler={UserRouteNotFound}/> | |
//</Route> | |
//<NotFoundRoute handler={NotFound}/> | |
//<Redirect from="company" to="about" /> | |
var App = React.createClass({ | |
render: function() { | |
return <div> | |
<header> | |
<ul> | |
<li><Link to="main">Main</Link></li> | |
<li><Link to="woot">woot</Link></li> | |
<li><Link to="boot">boot</Link></li> | |
</ul> | |
Logged in as Jane | |
</header> | |
<RouteHandler {...this.props}/> | |
</div> | |
}, | |
}) | |
var Blah = React.createClass({ | |
render: function() { | |
return <div>Main</div> | |
} | |
}) | |
var Woot = component(function({state}) { | |
function gogogo() { | |
state.set('greeting', 'laksjdflkasjdfklj') | |
} | |
return <div> | |
<p>Woot {state.get('greeting')}</p> | |
<p><button onClick={gogogo}>Click Me</button></p> | |
</div> | |
}).jsx | |
var Boot = component(function({state}) { | |
return <div>Boot</div> | |
}).jsx | |
var routes = <Route path="/" handler={App}> | |
<DefaultRoute name="main" handler={Blah}/> | |
<Route name="woot" handler={Woot}/> | |
<Route name="boot" handler={Boot}/> | |
</Route> | |
var Handler; | |
Router.run(routes, function (h) { | |
Handler = h | |
render() | |
}); | |
function render() { | |
React.render( | |
<Handler state={state.cursor()}/>, | |
document.getElementById('content') | |
); | |
} | |
state.on('swap', function() { | |
render() | |
}) | |
//React.render( | |
//<CommentBox />, | |
//document.getElementById('content') | |
//); | |
//React.renderComponent(Hello, document.getElementById("main")); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment