Last active
September 1, 2021 17:45
-
-
Save fvilante/1e979350891762841842f0107e279715 to your computer and use it in GitHub Desktop.
deno deploy - using jsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // You need to import `h` factory function as Deno Deploy | |
| // uses it instead of `React.createElement` | |
| import { h } from "https://x.lcas.dev/[email protected]/mod.js"; | |
| import { renderToString } from "https://x.lcas.dev/[email protected]/ssr.js"; | |
| let elapsedTime = 0 | |
| setInterval( () => { elapsedTime = elapsedTime + 1; }, 1000) | |
| function App() { | |
| return ( | |
| <html> | |
| <head> | |
| <title>Hello from JSX</title> | |
| </head> | |
| <body> | |
| <h1>Hello world</h1> | |
| <br></br> | |
| <h2> this is a f test </h2> | |
| <p> this is not a f test juca </p> | |
| <h3> many seconds has passed through {elapsedTime} </h3> | |
| <svg width="100" height="100"> | |
| <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> | |
| <circle cx="50" cy="50" r={elapsedTime} stroke="green" stroke-width="4" fill="yellow" /> | |
| </svg> | |
| <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> | |
| <rect x="0" y="0" width="100%" height="100%"/> | |
| <circle cx="50%" cy="50%" r="4" fill="white"/> | |
| </svg> | |
| </body> | |
| </html> | |
| ); | |
| } | |
| addEventListener("fetch", (event) => { | |
| // renderToString generates html string from JSX components. | |
| const response = new Response(renderToString(<App />), { | |
| headers: { "content-type": "text/html; charset=utf-8" }, | |
| }); | |
| event.respondWith(response); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
deployed here ---> https://teste-jsx.deno.dev/