1import { useState } from "react";
2
3export function App() {
4 const [count, setCount] = useState(0);
5 const [greeting, setGreeting] = useState("");
6
7 async function loadGreeting() {
8 try {
9 const response = await fetch("/example.json");
10 if (!response.ok) throw new Error(`HTTP ${response.status}`);
11 const body = (await response.json()) as { greeting: string };
12 setGreeting(body.greeting);
13 } catch {
14 setGreeting("Could not load the greeting. Try again.");
15 }
16 }
17
18 return (
19 <main className="mx-auto flex max-w-xl flex-col gap-4 p-8">
20 <h1 className="text-3xl font-bold">Vite on Neon</h1>
21 <p>Revision: {import.meta.env.VITE_REVISION ?? "development"}</p>
22 <p>
23 A React app built with Vite, without a database or a separate API
24 service.
25 </p>
26 <button type="button" onClick={() => setCount((value) => value + 1)}>
27 count: {count}
28 </button>
29 <button type="button" onClick={loadGreeting}>
30 Load greeting
31 </button>
32 <p role="status">{greeting}</p>
33 </main>
34 );
35}