1/** @jsxImportSource https://esm.sh/react */
2import { Canvas } from "https://esm.sh/react-three-fiber";
3import { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import { html } from "https://esm.town/v/stevekrouse/html?v=5";
5
29
30 return html(`<html><head></head><body><script type="module">
31 import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client";
32 import { jsx as _jsx } from "https://esm.sh/react/jsx-runtime";
33 import { WeatherSuggest } from "https://esm.town/v/seflless/weatherGPT";
34
1/** @jsxImportSource https://esm.sh/preact */
2import { blob } from "https://esm.town/v/std/blob";
3// import * as opaque from "npm:@cloudflare/opaque-ts";
4import { Hono } from "npm:hono@3";
5import { render } from "npm:preact-render-to-string";
6
7const resp = (content, status) =>
1/** @jsxImportSource https://esm.sh/react */
2import ReactDom from "https://esm.sh/react-dom";
3import { createStore } from "https://esm.sh/tinybase";
4import { createRemotePersister } from "https://esm.sh/tinybase/persisters/persister-remote";
5import { useValue } from "https://esm.sh/tinybase/ui-react";
6
7// The store is automatically persisted on the remote server
42}
43
44const root = ReactDom.createRoot(document.body);
45root.render(<App />);
1/** @jsxImportSource https://esm.sh/preact **/
2
3import { clsx } from "https://esm.sh/clsx";
4import { parse } from "https://esm.sh/content-type";
5import { Base64 } from "https://esm.sh/js-base64";
6import { render } from "https://esm.sh/preact";
7import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
8
9declare module "https://esm.sh/preact" {
10 namespace JSX {
11 interface IntrinsicElements {
1// JSX can be used in the client val thanks to this magic comment
2/** @jsxImportSource https://esm.sh/react **/
3// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
4import React from "https://esm.sh/react";
5import ReactDOM from "https://esm.sh/react-dom";
6
7function Counter() {
8 const [counter, setCounter] = React.useState(0);
9
10 return (
22 return (
23 <>
24 <h1>React Example</h1>
25 <Counter />
26 </>
29
30// The app will be rendered inside the root div
31const root = ReactDOM.createRoot(document.getElementById("root"));
32root.render(<App />);
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export const reactExample = () =>
5 new Response(renderToString(<div>Test {1 + 1}</div>), {
6 headers: {
1null
2
3Migrated from folder: examples/reactExample
1/** @jsxImportSource https://esm.sh/preact */
2import { render } from "npm:preact-render-to-string";
3
4export const preactExample = () =>
5 new Response(render(<div>Test {1 + 1}</div>), {
6 headers: {
1null
2
3Migrated from folder: examples/preactExample
38```
39
40See @pomdtr/react_example
41
42### Adding external resources to your example
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
