The simplest Typescript + React app I could come up with. Uses Deno because the runtime has out-of-the-box support for Typescript and TSX.
You need to install Deno to run this app: https://deno.land#installation
All the build scripts are listed in deno.json. These are the important ones:
deno task start # Run dev server
deno task build # Build a bundle for use with static server| { | |
| "compilerOptions": { | |
| "lib": [ | |
| "dom", | |
| "dom.iterable", | |
| "dom.asynciterable", | |
| "esnext" | |
| ] | |
| }, | |
| "importMap": "./import_map.json", | |
| "tasks": { | |
| "start": "sh start.sh", | |
| "bundle": "mkdir -p dist && deno bundle index.tsx dist/index.js", | |
| "watch": "mkdir -p dist && deno bundle index.tsx dist/index.js --watch", | |
| "serve": "open http://localhost:4507/ && deno run --allow-net --allow-read https://deno.land/[email protected]/http/file_server.ts" | |
| } | |
| } |
| { | |
| "imports": { | |
| "react": "https://esm.sh/[email protected]?dev", | |
| "react-dom/client": "https://esm.sh/[email protected]/client?dev" | |
| } | |
| } |
| body { | |
| background-color: #999999; | |
| } |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Deno React App</title> | |
| <meta charset="utf-8" /> | |
| <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> | |
| <link rel="stylesheet" href="index.css" /> | |
| </head> | |
| <body> | |
| <div id="mount"></div> | |
| <script src="dist/index.js"></script> | |
| </body> | |
| </html> |
| import React, { useCallback, useState } from "react"; | |
| import { createRoot } from "react-dom/client"; | |
| function App() { | |
| const [count, setCount] = useState<number>(0); | |
| const onClick = useCallback(() => { | |
| setCount(count + 1); | |
| }, [count, setCount]); | |
| return ( | |
| <div> | |
| <span>times: {count}</span> | |
| <button onClick={onClick}>count up</button> | |
| </div> | |
| ); | |
| } | |
| const container = document.getElementById("mount")!; | |
| createRoot(container).render(<App />); |
| trap 'echo terminating...; kill 0' EXIT | |
| deno task serve & deno task watch | |
| echo -e terminating... done |