preact-views demo

by Jason Miller

HTML

<script src="https://unpkg.com/preact"></script>
<script src="https://unpkg.com/preact-views"></script>

CSS

a {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
	user-select: none;
}

Babel + JSX

/** @jsx preact.h */
const { Views, Link } = preactViews;


const Home = () => (
	<div>
		<h1>Home!</h1>
		<Link to="other" params={{ value:1 }}>Go Other</Link>
	</div>
);

const Other = ({ value=0 }) => (
	<div>
		<h1>Other.</h1>
		<Link to="home">Go Home</Link>
		<p>value is {value}.</p>
		<Link to="other" params={{ value: value+1 }}>Increment</Link>
	</div>
);

preact.render((
	<Views view="home">
		<Home name="home" />
		<Other name="other" />
	</Views>
), document.body);