Skip to content

Instantly share code, notes, and snippets.

@CptLemming

CptLemming/app.jsx

Created April 14, 2015 13:12
Show Gist options
  • Save CptLemming/a9292f95db799f11541d to your computer and use it in GitHub Desktop.
Save CptLemming/a9292f95db799f11541d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. CptLemming created this gist Apr 14, 2015.
    125 changes: 125 additions & 0 deletions app.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,125 @@
    /**
    * This example shows using Morearty and React Router together in a single app.
    *
    * Both libraries expect to be the 'top-level-item' by default, which causes conflict.
    * The `currentRoute` here is especially important, as this allows the components to re-render
    * when the Route changes. Without this the `shouldComponentUpdate` of Morearty will
    * return `false`, preventing routing.
    *
    * Morearty - https://github.com/moreartyjs/moreartyjs
    * React Router - https://github.com/rackt/react-router
    */

    var React = require('react');
    var Router = require('react-router');
    var Route = Router.Route;
    var Link = Router.Link;
    var DefaultRoute = Router.DefaultRoute;
    var RouteHandler = Router.RouteHandler;
    var Morearty = require('morearty');

    var state = {
    initialState: {
    'name': 'FooBar',
    'foo': 'Foo',
    'bar': 'Bar',
    'baz': 'Baz'
    }
    };

    var Ctx = Morearty.createContext(state);

    var Home = React.createClass({
    mixins: [Morearty.Mixin],

    render: function() {
    var binding = this.getDefaultBinding();
    return (
    <div>
    <h1>- {binding.get('name')} -</h1>
    <Link to="home">Foo</Link>
    <Link to="bar">Bar</Link>
    <Link to="baz">Baz</Link>
    <RouteHandler binding={binding}/>
    </div>
    );
    }
    });

    var NestedRouteComponent = React.createClass({
    mixins: [Morearty.Mixin],

    render: function() {
    var binding = this.getDefaultBinding();
    var metaBinding = binding.meta();
    return (
    <div>
    <h2>Path: {metaBinding.get('currentPath')}</h2>
    <RouteHandler binding={binding}/>
    </div>
    );
    }
    });

    var Foo = React.createClass({
    mixins: [Morearty.Mixin],

    render: function() {
    var binding = this.getDefaultBinding();
    return <div>Foo {binding.get('foo')}!</div>;
    }
    });

    var Bar = React.createClass({
    mixins: [Morearty.Mixin],

    render: function() {
    var binding = this.getDefaultBinding();
    return <div>Bar {binding.get('bar')}!</div>;
    }
    });

    var Baz = React.createClass({
    mixins: [Morearty.Mixin],

    render: function() {
    var binding = this.getDefaultBinding();
    return <div>Baz {binding.get('baz')}!</div>;
    }
    });

    var routes = (
    <Route path="/" name="home" handler={Home}>
    <DefaultRoute handler={Foo}/>
    <Route name="middle" path="middle" handler={NestedRouteComponent}>
    <Route name="bar" path="bar" handler={Bar}/>
    <Route name="baz" path="baz" handler={Baz}/>
    </Route>
    </Route>
    );

    var App = React.createClass({
    mixins: [Morearty.Mixin],

    componentWillMount: function() {
    var binding = this.getDefaultBinding();
    var metaBinding = binding.meta();

    Router.run(routes, function(Handler, state) {
    metaBinding.set('Handler', Handler);
    metaBinding.set('currentPath', state.path);
    });
    },

    render: function() {
    var binding = this.getDefaultBinding();
    var metaBinding = binding.meta();
    var Handler = metaBinding.get('Handler');

    return Handler ? <Handler binding={binding}/> : null;
    }
    });

    var Bootstrap = Ctx.bootstrap(App);

    React.render(<Bootstrap/>, document.getElementById('root'));