diff --git a/index.html b/index.html index f296744e..8ebf6066 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@
+
diff --git a/package-lock.json b/package-lock.json index 61d7b872..17f80f57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ "jest": "^29.6.2", "jest-environment-jsdom": "^29.6.2", "parcel": "^2.9.3", + "process": "^0.11.10", "typescript": "^5.1.6" } }, @@ -9212,6 +9213,15 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, + "node_modules/process": { + "version": "0.11.10", + "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", + "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==", + "dev": true, + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/prompts": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz", diff --git a/package.json b/package.json index 2d2b7e59..bb03aa0f 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "jest": "^29.6.2", "jest-environment-jsdom": "^29.6.2", "parcel": "^2.9.3", + "process": "^0.11.10", "typescript": "^5.1.6" }, "dependencies": { diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 00000000..6ba951d2 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,19 @@ +import {useState} from 'react'; + +export default function App() { + const [count, setCount] = useState(0); + + const handleClick = () => { + setCount(count + 1); + }; + + return ( +
+

Hello, world!

+

Count: {count}

+ +
+ ); +} diff --git a/src/main.tsx b/src/main.tsx index c206fafa..79301349 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,8 +2,35 @@ import ReactDOM from 'react-dom/client'; import App from './App'; -const container = document.getElementById('app'); +function Demo({count}: { + count: number; +}) { + return ( +

DEMO: {count}

+ ); +} -const root = ReactDOM.createRoot(container); +function main() { + const element = document.getElementById('root'); + const element2 = document.getElementById('demo'); -root.render(); + if (!element || !element2) { + return; + } + + const root = ReactDOM.createRoot(element); + const root2 = ReactDOM.createRoot(element2); + + root.render(); + + let count = 0; + + root2.render(); + + setInterval(() => { + count += 1; + root2.render(); + }, 1_000); +} + +main();