/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import type { User } from "./zod_demo_shared"; export function App() { const [user, setUser] = useState({ username: "", email: "", age: 0 }); const [errors, setErrors] = useState>({}); const [serverResponse, setServerResponse] = useState(""); const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setUser(prev => ({ ...prev, [name]: name === "age" ? parseInt(value) || 0 : value })); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setErrors({}); // Send data to server const response = await fetch("/register", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(user), }); const result = await response.text(); setServerResponse(result); }; return (

User Registration

{serverResponse &&

{serverResponse}

}

View Source

); } createRoot(document.getElementById("root")!).render();

zod_demo_frontend