Gluing together the frontend and backend

frontend/src/App.tsx

@@ -1,11 +1,9 @@
-import { useState } from "react";
 import reactLogo from "./assets/react.svg";
 import viteLogo from "/vite.svg";
 import "./App.css";
+import { CountButton } from "./Components/CountButton";
 
 function App(): JSX.Element {
-  const [count, setCount] = useState(0);
-
   return (
     <>
       <div>
@@ -18,13 +16,7 @@ function App(): JSX.Element {
       </div>
       <h1>Vite + React</h1>
       <div className="card">
-        <button
-          onClick={() => {
-            setCount((count): number => count + 1);
-          }}
-        >
-          count is {count}
-        </button>
+        <CountButton />
         <p>
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>

frontend/src/Components/CountButton.tsx

@@ -0,0 +1,39 @@
+import { useState, useEffect } from "react";
+
+// Interface for the response from the server
+// This should eventually reside in a dedicated file
+interface CountResponse {
+  pressCount: number;
+}
+
+// Some constants for the button
+const BUTTON_ENDPOINT = "/api/button";
+
+// A simple button that counts how many times it's been pressed
+export function CountButton(): JSX.Element {
+  const [count, setCount] = useState<number>(NaN);
+
+  // useEffect with a [] dependency array runs only once
+  useEffect(() => {
+    async function getCount(): Promise<void> {
+      const response = await fetch(BUTTON_ENDPOINT);
+      const data = (await response.json()) as CountResponse;
+      setCount(data.pressCount);
+    }
+    void getCount();
+  }, []);
+
+  // This is what runs on every button click
+  function press(): void {
+    async function pressPost(): Promise<void> {
+      await fetch(BUTTON_ENDPOINT, { method: "POST" });
+      const response = await fetch(BUTTON_ENDPOINT);
+      const data = (await response.json()) as CountResponse;
+      setCount(data.pressCount);
+    }
+    void pressPost();
+  }
+
+  // Return some JSX with the button and associated handler
+  return <button onClick={press}>count is {count}</button>;
+}