Small preact-based (like React.js) project
https://inga-lovinde.github.io/static/komoot-demo/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
2.0 KiB
60 lines
2.0 KiB
import { render } from 'preact';
|
|
import { useState } from 'preact/hooks';
|
|
import preactLogo from './assets/preact.svg';
|
|
import './style.css';
|
|
|
|
export function App() {
|
|
const [value, setValue] = useState(0);
|
|
|
|
return (
|
|
<div>
|
|
<a href="https://preactjs.com">
|
|
<img
|
|
src={preactLogo}
|
|
alt="Preact logo"
|
|
height="160"
|
|
width="160"
|
|
/>
|
|
</a>
|
|
<h1>Get Started building Vite-powered Preact Apps </h1>
|
|
<section>
|
|
<div>Counter: {value}</div>
|
|
<button onClick={() => setValue(value + 1)}>Increment</button>
|
|
<button onClick={() => setValue(value - 1)}>Decrement</button>
|
|
</section>
|
|
<section>
|
|
<Resource
|
|
title="Learn Preact"
|
|
description="If you're new to Preact, try the interactive tutorial to learn important concepts"
|
|
href="https://preactjs.com/tutorial"
|
|
/>
|
|
<Resource
|
|
title="Differences to React"
|
|
description="If you're coming from React, you may want to check out our docs to see where Preact differs"
|
|
href="https://preactjs.com/guide/v10/differences-to-react"
|
|
/>
|
|
<Resource
|
|
title="Learn Vite"
|
|
description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
|
|
href="https://vitejs.dev"
|
|
/>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Resource(props: Record<'href' | 'title' | 'description', string>) {
|
|
return (
|
|
<a href={props.href} class="resource">
|
|
<h2>{props.title}</h2>
|
|
<p>{props.description}</p>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
const app = document.getElementById('app');
|
|
if (app) {
|
|
render(<App />, app);
|
|
} else {
|
|
console.error('Cannot find app container');
|
|
}
|
|
|