JSFiddle - React, Tailwind, and code Playground

by Jason Miller

HTML

<script src="//npmcdn.com/preact@beta"></script>
<script src="//npmcdn.com/proptypes"></script>
<script src="//npmcdn.com/preact-svg"></script>
<script src="//npmcdn.com/preact-compat"></script>
<script>window.React=window.ReactDOM=preactCompat;</script>
<script src="//npmcdn.com/react-router/umd/ReactRouter.js"></script>

CSS

nav a {
	display: inline-block;
	padding: 10px;
}

pre {
	display: inline-block;
}

Babel + JSX

let { Router, IndexRoute, Route, Link, browserHistory } = ReactRouter;

history.replaceState(0,0,'/');

const Main = () =>
  <Router history={browserHistory}>

    <Route path='/' component={App}>
      <IndexRoute component={Home}/>
      <Route path='map' component={Map}/>
      <Route path='settings' component={Settings}/>
      <Route path='*' component={NotFound}/>
    </Route>

  </Router>

const App = props =>
  <div>

    <Navigation>
      <Link to='/'>Home</Link>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />

const Home = () => <h1>Home</h1>

const Map = () => <h1>Map</h1>

const Settings = () => <h1>Settings</h1>

const NotFound = props =>
	<div>
		<h1>404 - Not Found</h1>
		<p>URL: <pre>{props.location.pathname}</pre></p>
	</div>


ReactDOM.render(<Main />, document.body);