1/** @jsx jsx **/
2import { renderToString } from "npm:react-dom/server";
3import { jsx } from "https://deno.land/x/hono@v3.11.7/middleware.ts";
4import { Hono } from "https://deno.land/x/hono@v3.11.7/mod.ts";
1/** @jsxImportSource https://esm.sh/react@18.2.0 **/
2// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
3import ReactDOM from "https://esm.sh/react-dom@18.2.0";
4import React from "https://esm.sh/react@18.2.0";
5import { useState } from "https://esm.sh/react@18.2.0";
6import { Tldraw } from "https://esm.sh/tldraw@2.1.0";
7// import "https://esm.sh/tldraw/tldraw.css";
18
19// The app will be rendered inside the root div
20const root = ReactDOM.createRoot(document.getElementById("root"));
21root.render(<App />);
1/** @jsxImportSource https://esm.sh/react */
2import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
3import { blob } from "https://esm.town/v/std/blob?v=12";
5import { createHash } from "node:crypto";
6import base32Encode from "npm:base32-encode";
7import { renderToString } from "npm:react-dom/server";
8
9// Uncomment to run migrations
1/** @jsxImportSource https://esm.sh/react **/
2// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
3import ReactDOM from "https://esm.sh/react-dom";
4import React, { useState, useEffect } from "https://esm.sh/react@18.0.0";
5
6function TestComponent() {
29
30// The app will be rendered inside the root div
31const root = ReactDOM.createRoot(document.getElementById("root"));
32root.render(<App />);
1/**
2 * @title Running React on the Client
3 * @description Vals can also be used to host client-side code!
4 * @preview https://pomdtr-react_example_server.web.val.run
5 * @include pomdtr/react_example_client
6 * @resource [React - Quick Start](https://react.dev/learn)
7 */
8
12 `<html>
13 <head>
14 <title>TLDraw React Example</title>
15 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
16 <style>
25 <body>
26 <main id="root"></main>
27 <script type="module" src="https://esm.town/v/iamseeley/reacttldrawclient"></script>
28 </body>
29 </html>`,
1/**
2 * @title Running React on the Client
3 * @description Vals can also be used to host client-side code!
4 * @preview https://pomdtr-react_example_server.web.val.run
5 * @include pomdtr/react_example_client
6 * @resource [React - Quick Start](https://react.dev/learn)
7 */
8
12 `<html>
13 <head>
14 <title>TLDraw React Example</title>
15 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
16 <style>
25 <body>
26 <main id="root"></main>
27 <script type="module" src="https://esm.town/v/tfayyaz/reacttldrawclient"></script/>
28 </body>
29 </html>`,
1/** @jsxImportSource https://esm.sh/react */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4function MyButton() {
40 <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"></path>
41 </svg>
42 <div class="font-semibold group-hover:text-black">ReactJS</div>
43 </button>
44 <button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
52 <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"></path>
53 </svg>
54 <div class="font-semibold group-hover:text-black">Preact</div>
55 </button>
56 <button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-left transition-colors hover:border-blue-500 hover:shadow-md">
1/** @jsxImportSource https://esm.sh/react */
2import React from "https://esm.sh/react";
3
4// fresh_charts expects React to be available on globalThis/window, not sure why!
5globalThis.React = React;
6import { Chart, renderChart } from "https://deno.land/x/fresh_charts/mod.ts";
7import { ChartColors, transparentize } from "https://deno.land/x/fresh_charts/utils.ts";
8import { renderToString } from "npm:react-dom/server";
9
10const chart = () => ({
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
Starter template with client-side React & Hono server
A web-based dice roller using React on Val Town
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh
