Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 7, 2015 14:20
Show Gist options
  • Save anonymous/0c1d742f3b0e245186c4 to your computer and use it in GitHub Desktop.
Save anonymous/0c1d742f3b0e245186c4 to your computer and use it in GitHub Desktop.
Download ZIP
React Router Boilerplate // source http://jsbin.com/jidolotaqu
Raw
index.html
<!doctype html>
<meta charset="utf-8" />
<title>React Router Boilerplate<style id="jsbin-css">
.crumbs li {
display: inline-block;
margin-left: 10px;
}
</style>
</title>
<body>
<script src="http://fb.me/react-with-addons-0.11.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.2.js"></script>
<script src="http://raw.githack.com/rackt/react-router/latest/dist/react-router.js"></script>
<script id="jsbin-javascript">
/** @jsx React.DOM */
var Router = ReactRouter;
var Route = ReactRouter.Route;
var Routes = ReactRouter.Routes;
var Link = ReactRouter.Link;
var DefaultRoute = ReactRouter.DefaultRoute;
var BreadCrumb = React.createClass({displayName: 'BreadCrumb',
mixins: [Router.ActiveState],
render: function() {
var crumbs = [];
var routes = this.getActiveRoutes().filter(function (r) { return !r.props.isDefault; });
routes.forEach(function (route, i, arr) {
var name = route.props.alt?route.props.alt:route.props.handler.displayName;
var link = name;
if (i != arr.length-1) {
link = React.createElement(Link, {to: route.props.path}, name);
}
crumbs.push(
React.createElement("li", {key: route.props.path+''+crumbs.length},
link
)
);
});
return React.createElement("ul", {className: "crumbs"}, crumbs);
}
});
var App = React.createClass({displayName: 'App',
render: function() {
return (React.createElement("div", null,
React.createElement(BreadCrumb, null),
React.createElement(this.props.activeRouteHandler, null)
));
}
});
var Main = React.createClass({displayName: 'Main',
render: function() {
return (
React.createElement("div", null,
React.createElement("div", null, React.createElement(Link, {to: "/dashboard"}, "-> Dash"))
));
}
});
var DashBoard = React.createClass({displayName: 'DashBoard',
render: function() {
return (
React.createElement("div", null,
React.createElement("div", null, React.createElement(Link, {to: "/dashboard/overview"}, "-> Overview"), " "),
React.createElement("div", null, React.createElement(Link, {to: "/dashboard/metrics"}, "-> Metrics"), " "),
React.createElement("div", null, React.createElement(this.props.activeRouteHandler, null))
));
}
});
var Overview = React.createClass({displayName: 'Overview',
render: function() {
return (React.createElement("div", null, "Overview1 ", this.props.alt));
}
});
var routes = (
React.createElement(Routes, null,
React.createElement(Route, {handler: App, alt: "Home"},
React.createElement(DefaultRoute, {handler: Main}),
React.createElement(Route, {path: "/dashboard", handler: DashBoard, alt: "DashBoard"},
React.createElement(Route, {path: "/dashboard/overview", handler: Overview, alt: "Overview"}),
React.createElement(Route, {path: "/dashboard/metrics", handler: Overview, alt: "Metrics"})
)
)
)
);
React.renderComponent(routes, document.body);
</script>
<script id="jsbin-source-html" type="text/html"><!doctype html>
<meta charset="utf-8" />
<title>React Router Boilerplate</title>
<body>
<script src="//fb.me/react-with-addons-0.11.2.js"><\/script>
<script src="//fb.me/JSXTransformer-0.11.2.js"><\/script>
<script src="//raw.githack.com/rackt/react-router/latest/dist/react-router.js"><\/script>
</script>
<script id="jsbin-source-css" type="text/css">.crumbs li {
display: inline-block;
margin-left: 10px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">/** @jsx React.DOM */
var Router = ReactRouter;
var Route = ReactRouter.Route;
var Routes = ReactRouter.Routes;
var Link = ReactRouter.Link;
var DefaultRoute = ReactRouter.DefaultRoute;
var BreadCrumb = React.createClass({
mixins: [Router.ActiveState],
render: function() {
var crumbs = [];
var routes = this.getActiveRoutes().filter(function (r) { return !r.props.isDefault; });
routes.forEach(function (route, i, arr) {
var name = route.props.alt?route.props.alt:route.props.handler.displayName;
var link = name;
if (i != arr.length-1) {
link = <Link to={route.props.path}>{name}</Link>;
}
crumbs.push(
<li key={route.props.path+''+crumbs.length}>
{link}
</li>
);
});
return <ul className="crumbs">{crumbs}</ul>;
}
});
var App = React.createClass({
render: function() {
return (<div>
<BreadCrumb />
<this.props.activeRouteHandler />
</div>);
}
});
var Main = React.createClass({
render: function() {
return (
<div>
<div><Link to='/dashboard'>-> Dash</Link></div>
</div>);
}
});
var DashBoard = React.createClass({
render: function() {
return (
<div>
<div><Link to='/dashboard/overview'>-> Overview</Link> </div>
<div><Link to='/dashboard/metrics'>-> Metrics</Link> </div>
<div><this.props.activeRouteHandler /></div>
</div>);
}
});
var Overview = React.createClass({
render: function() {
return (<div>Overview1 {this.props.alt}</div>);
}
});
var routes = (
<Routes>
<Route handler={App} alt='Home'>
<DefaultRoute handler={Main} />
<Route path='/dashboard' handler={DashBoard} alt='DashBoard'>
<Route path='/dashboard/overview' handler={Overview} alt='Overview'/>
<Route path='/dashboard/metrics' handler={Overview} alt='Metrics'/>
</Route>
</Route>
</Routes>
);
React.renderComponent(routes, document.body);</script>
Raw
jsbin.jidolotaqu.css
.crumbs li {
display: inline-block;
margin-left: 10px;
}
Raw
jsbin.jidolotaqu.js
/** @jsx React.DOM */
var Router = ReactRouter;
var Route = ReactRouter.Route;
var Routes = ReactRouter.Routes;
var Link = ReactRouter.Link;
var DefaultRoute = ReactRouter.DefaultRoute;
var BreadCrumb = React.createClass({displayName: 'BreadCrumb',
mixins: [Router.ActiveState],
render: function() {
var crumbs = [];
var routes = this.getActiveRoutes().filter(function (r) { return !r.props.isDefault; });
routes.forEach(function (route, i, arr) {
var name = route.props.alt?route.props.alt:route.props.handler.displayName;
var link = name;
if (i != arr.length-1) {
link = React.createElement(Link, {to: route.props.path}, name);
}
crumbs.push(
React.createElement("li", {key: route.props.path+''+crumbs.length},
link
)
);
});
return React.createElement("ul", {className: "crumbs"}, crumbs);
}
});
var App = React.createClass({displayName: 'App',
render: function() {
return (React.createElement("div", null,
React.createElement(BreadCrumb, null),
React.createElement(this.props.activeRouteHandler, null)
));
}
});
var Main = React.createClass({displayName: 'Main',
render: function() {
return (
React.createElement("div", null,
React.createElement("div", null, React.createElement(Link, {to: "/dashboard"}, "-> Dash"))
));
}
});
var DashBoard = React.createClass({displayName: 'DashBoard',
render: function() {
return (
React.createElement("div", null,
React.createElement("div", null, React.createElement(Link, {to: "/dashboard/overview"}, "-> Overview"), " "),
React.createElement("div", null, React.createElement(Link, {to: "/dashboard/metrics"}, "-> Metrics"), " "),
React.createElement("div", null, React.createElement(this.props.activeRouteHandler, null))
));
}
});
var Overview = React.createClass({displayName: 'Overview',
render: function() {
return (React.createElement("div", null, "Overview1 ", this.props.alt));
}
});
var routes = (
React.createElement(Routes, null,
React.createElement(Route, {handler: App, alt: "Home"},
React.createElement(DefaultRoute, {handler: Main}),
React.createElement(Route, {path: "/dashboard", handler: DashBoard, alt: "DashBoard"},
React.createElement(Route, {path: "/dashboard/overview", handler: Overview, alt: "Overview"}),
React.createElement(Route, {path: "/dashboard/metrics", handler: Overview, alt: "Metrics"})
)
)
)
);
React.renderComponent(routes, document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment