JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://grahammendick.github.io/navigation/download/navigation-2.0.0.min.js"></script>
<script src="https://grahammendick.github.io/navigation/download/navigation.react-2.0.0.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<p>
<div id="container"></div>
CSS
body {
padding: 20px
}
JavaScript 1.7
var {StateNavigator} = Navigation;
var {NavigationLink} = NavigationReact;
var AuthLayout = ({title, stateNavigator}) => (
<div>
<h1>{title}</h1>
<div id="content"></div>
<div id="footer"></div>
</div>
)
var Login = ({stateNavigator}) => (
<NavigationLink
stateKey="register"
stateNavigator={stateNavigator}>
Register
</NavigationLink>
)
var Register = ({stateNavigator}) => (
<NavigationLink
stateKey="login"
stateNavigator={stateNavigator}>
Login
</NavigationLink>
)
var LoginFooter = () => <div>Login Footer</div>
var RegisterFooter = () => <div>Register Footer</div>
var stateNavigator = new StateNavigator([
{key: 'login', route: ''},
{key: 'register', route: 'register'}
]);
stateNavigator.states.login.navigated = () => {
ReactDOM.render(<AuthLayout title="Login" />,
document.getElementById('container'));
ReactDOM.render(<Login stateNavigator={stateNavigator} />,
document.getElementById('content'));
ReactDOM.render(<LoginFooter />,
document.getElementById('footer'));
}
stateNavigator.states.register.navigated = () => {
ReactDOM.render(<AuthLayout title="Register" />,
document.getElementById('container'));
ReactDOM.render(<Register stateNavigator={stateNavigator} />,
document.getElementById('content'));
ReactDOM.render(<RegisterFooter />,
document.getElementById('footer'));
}
stateNavigator.start();