JSFiddle - React, Tailwind, and code Playground

by Mateusz Zatorski

HTML

<script src="https://npmcdn.com/react/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
<script src="https://npmcdn.com/history@3.0.0-0/umd/History.min.js"></script>
<div id="root"></div>

Babel + JSX

const { render } = ReactDOM;
const { Component, PropTypes } = React;
const { createHashHistory } = History;
const { Router, Route, IndexRoute, Link, useRouterHistory } = ReactRouter;

const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })
  
/* 
 * Playground area: feel free to change the code below 
 * like you would 	normally do, for your app.
 * If you change the components, make sure to refactor
 * the routes appropriately
 */  

const App = ({ children }) =>
	<div>
		<NavBar />
    { children }
  </div>
  
const NavBar = () =>
	<ul>
		<li><Link to="/">Home</Link></li>
		<li><Link to="/about">About</Link></li>
		<li><Link to="/contact">Contact</Link></li>
  </ul>
  
class Home extends Component {
	constructor() {
		super();
    this.handleClick = this.handleClick.bind(this);
	}
  
  handleClick(e) {
		e.preventDefault();
    this.context.router.push('/about');
  }

	render() {
    return (
      <div>
        <h3>Home</h3>
        <button onClick={this.handleClick}>
        	Navigate outside component to About page, using context
        </button>
        <p>
          This is React Router demo. 
          Play around here, see how the UI changes based on the URL. 
          You can use the URL bar to enter the address. 
          Hit 'enter' to navigate to the given address.
        </p>
        <p>
          Feel free to collaborate on this JSFiddle to make it better. It is not perfect now.
        </p>
      </div>
    );
  }
}

Home.contextTypes = {
	router: PropTypes.object.isRequired
};
  
const About = () =>
	<div>
  	<h3>About</h3>
  </div>
  
const Contact = () =>
	<div>
  	<h3>Contact</h3>
		<ul>
    	<li>Mateusz Zatorski</li>
    	<li>Github: <a href="https://github.com/knowbody">knowbody</a></li>
    </ul>
  </div>
  
const NotFound = () =>
	<div>
  	<img src="http://fab404.com/wp-content/uploads/2015/03/appnovation404-472x295.jpg" alt="not found" />
  </div>

/* End of playground area */
  

const Root = () =>
	<Router...