JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

HTML

<script src="https://npmcdn.com/universal-router/universal-router.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<div id="root"></div>

Babel + JSX

const routes = [
  { path: '/welcome', action() { return <div>Welcome</div> } },
  { path: '/invalid', action() { return 'Invalid component element' } },
  { path: '/*', action() { return <div>Not Found</div> } },
];

const container = document.getElementById('root');

async function navigateTo(path) {
  const page = await UniversalRouter.resolve(routes, { path })
  await new Promise((resolve, reject) => {
    try {
      ReactDOM.render(page, container, resolve)
    } catch (error) {
      ReactDOM.render(<div>{error.message}</div>, container, resolve)
    }
  })
}

navigateTo('/welcome').then(() => 'Done!')