1import { Button, Tailwind } from "npm:@react-email/components";
2import { Html } from "npm:@react-email/html";
3import { render } from "npm:@react-email/render";
4import * as React from "npm:react";
5
6import { sendMail } from "https://esm.town/v/tomas_padrieza/sendEmail";
1Simple demo of a React Email rendering
633. The GET URL should be called and result printed in the console.
64
65I'm using React, so make it a react component.
66```
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>React Example</title>
15 <meta name="viewport" content="width=device-width, initial-scale=1" />
16 </head>
17 <body>
18 <main id="root"></main>
19 <script type="module" src="https://esm.town/v/pomdtr/react_example_client"></script/>
20 </body>
21 </html>`,
1# reactiveStateBlob: wrap blob state in a proxy to autosave it on changes
2
3## Examples (full example at [@postpostscript/reactiveStateBlobExample](reactiveStateBlobExample))
4
5```typescript
6import { reactiveStateBlob } from "https://esm.town/v/postpostscript/reactiveStateBlob"
7
8using state = await reactiveStateBlob({
9 viewCount: 0,
10 rows: [] as {
24
25```ts
26using state = await reactiveStateBlob({
27 viewCount: 0,
28 rows: [] as {
31 }[],
32}, {
33 key: 'reactiveStateBlobExample.state',
34});
35```
40
41```typescript
42using state = await reactiveStateBlob((existingState) => {
43 return {
44 viewCount: (existingState.viewCount ?? 0) as number,
55
56```typescript
57using state = await reactiveStateBlob<{
58 value: number;
59}>({
71[@postpostscript/counter](counter) (example at [@postpostscript/counterExample](counterExample))
72
73Migrated from folder: State/reactiveStateBlob
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 />);
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
