Search

reactClientDemo

@wilhelm

Idiomatic SSR and hydration of a React app

HTTP (deprecated)

Idiomatic SSR and hydration of a React app

/** @jsxImportSource https://esm.sh/react */

import React from "https://esm.sh/react";

const Counter = () => {

const [count, setCount] = React.useState(0);

return (

<body>

<h1>Val Town React Client Demo</h1>

if (typeof document !== "undefined") {

const { hydrateRoot } = await import("https://esm.sh/react-dom/client");

hydrateRoot(document, <App />);

export default async function(req: Request): Promise<Response> {

const { renderToReadableStream } = await import("https://esm.sh/react-dom/server");

const stream = await renderToReadableStream(<App />, { bootstrapModules: [import.meta.url] });

extremePlumCaribou

@ejfox

@jsxImportSource https://esm.sh/react

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import DOMPurify from "https://esm.sh/dompurify";

return '❓'; // Placeholder

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {

throw new Error('valtown token is not set');

const client = new ValTown({ apiKey: token });

const user = await client.alias.username.retrieve(username);

if (!user || !user.id) {

let vals = [];

for await (const val of client.users.vals.list(user.id, { limit: 100 })) {

vals.push(val);

addToLog

@ejfox

* This chat application allows users to post messages and view a log of all messages. * It uses SQLite for persistence and React for the frontend. * The server handles message posting and retrieval, while the client renders the UI.

HTTP

* This chat application allows users to post messages and view a log of all messages.

* It uses SQLite for persistence and React for the frontend.

* The server handles message posting and retrieval, while the client renders the UI.

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

interface Message {

setMessages(data);

const handleSubmit = async (e: React.FormEvent) => {

e.preventDefault();

</div>

function client() {

createRoot(document.getElementById("root")!).render(<App />);

if (typeof document !== "undefined") {

client();

async function server(request: Request): Promise<Response> {

hono_react_ssr

@stevekrouse

Hono React SSR Development in progress

Script

# Hono React SSR

/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";

import { useEffect, useState } from "https://esm.sh/react@18.2.0";

// button that's disabled until client react hydrates

const [clientHydrated, setClientHydrated] = useState(false);

useEffect(() => setClientHydrated(true), []);

return <button disabled={!clientHydrated} {...props}></button>;

const [clientHydrated, setClientHydrated] = useState(false);

useEffect(() => setClientHydrated(true), []);

disabled={!clientHydrated}

QRCodeScanner

@curtcox

* This val creates a QR code scanner using the device's camera. * It uses the jsQR library to decode QR codes from video frames. * The app displays the scanned QR code content and additional information. * * We'll use the following approach: * 1. Set up a video element to capture camera feed * 2. Use canvas to process video frames * 3. Use jsQR to decode QR codes from the frames * 4. Display the QR code content and additional information * 5. Add extensive debugging to identify issues

HTTP

* 5. Add extensive debugging to identify issues

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect, useRef } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import jsQR from "https://esm.sh/jsqr";

</div>

function client() {

createRoot(document.getElementById("root")!).render(<App />);

if (typeof document !== "undefined") {

client();

async function server(request: Request): Promise<Response> {

postmanClone

@maxm

* This val creates a Postman-like interface for testing HTTP requests directly in the browser. * It uses React for the UI and the Fetch API to make requests. * The server function serves the HTML and handles the API requests.

HTTP

* This val creates a Postman-like interface for testing HTTP requests directly in the browser.

* It uses React for the UI and the Fetch API to make requests.

* The server function serves the HTML and handles the API requests.

/** @jsxImportSource https://esm.sh/react */

import React, { useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function App() {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

async function server(request: Request): Promise<Response> {

honoJsxAlpineReactive

@yawnxyz

Basic demo of getting reactive Alpine.js working on a hono/jsx "backend" For server <> frontend interaction, do form POST submissions (or potentially POST json to the public val address?) https://alpinejs.dev/start-here#building-a-counter

HTTP (deprecated)

Basic demo of getting reactive Alpine.js working on a hono/jsx "backend"

- For server <> frontend interaction, do form POST submissions (or potentially POST json to the public val address?)

import { jsx } from "npm:hono@3/jsx";

const app = new Hono();

// Server-side rendering

app.get("/", async (c) => {

const html = (

tryingciceroagain

@arthrod

@jsxImportSource https://esm.sh/react

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useRef, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import styled, { createGlobalStyle, keyframes } from "https://esm.sh/styled-components";

function App() {

const [isNavOpen, setIsNavOpen] = React.useState(false);

const toggleNav = () => {

</Footer>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

smsjournalerregistration

@cephalization

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import React, { useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

const relayURL = "https://cephalization-smsjournalertextrelay.web.val.run";

const [message, setMessage] = useState("");

const handleSubmit = async (e: React.FormEvent) => {

e.preventDefault();

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {

clickTrackerWebsite

@ankitkr0

// This approach creates a minimalist, full-screen website that tracks the total number of clicks made anywhere on the page.

HTTP

// We'll use SQLite for persistence to store the click count and add a confetti effect for each click.

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import confetti from 'https://esm.sh/canvas-confetti';

const handleClick = async (event) => {

const { clientX, clientY } = event;

confetti({

spread: 70,

origin: { x: clientX / window.innerWidth, y: clientY / window.innerHeight }

await fetch('/increment', { method: 'POST' });

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {

concentricCirclesApp

@kaz

* This app displays a thick horizontal line with a color gradient from dark red to yellow to light green. * Below each section, there's a text input field. Each color section can have up to 8 values. * It uses React for the UI and CSS for styling the gradient line and inputs. * It includes a reorder functionality for the items in each section and an expandable "Learn more" section.

HTTP

* Below each section, there's a text input field. Each color section can have up to 8 values.

* It uses React for the UI and CSS for styling the gradient line and inputs.

* It includes a reorder functionality for the items in each section and an expandable "Learn more" section.

/** @jsxImportSource https://esm.sh/react */

import React, { useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function App() {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {

reactClientDemo

@keenanzucker

Idiomatic SSR and hydration of a React app

HTTP (deprecated)

Idiomatic SSR and hydration of a React app

/** @jsxImportSource https://esm.sh/react */

import React from "https://esm.sh/react";

const Counter = () => {

const [count, setCount] = React.useState(0);

return (

<body>

<h1>Val Town React Client Demo</h1>

// if (typeof document !== "undefined") {

// const { hydrateRoot } = await import("https://esm.sh/react-dom/client");

// hydrateRoot(document, <App />);

export default async function(req: Request): Promise<Response> {

const { renderToReadableStream } = await import("https://esm.sh/react-dom/server");

const stream = await renderToReadableStream(<App />, { bootstrapModules: [import.meta.url] });

czarkowyEdytorDat

@hasparus

* This app allows users to drop an image onto the canvas, add text to it, move the text around, * edit the text directly on the canvas, and save the result to their local disk. * We'll use the HTML5 Canvas API for image manipulation and the File System Access API for saving files.

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useRef, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

const rect = canvas.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

const rect = canvas.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

function client() {

clientOnly

@aretrace

thx Joshua Comeau!

Script

/** @jsxImportSource https://esm.sh/react */

import React from 'https://esm.sh/react'

export function ClientOnly({ children, ...delegated }) {

const [hasMounted, setHasMounted] = React.useState(false)

React.useEffect(() => {

setHasMounted(true)

knowledgeExplorer

@sharanbabu

* This val creates a modern, stylish knowledge explorer using the Cerebras LLM API. * It allows users to enter a topic or select from suggestions, displays information in a centered card, * and enables exploration of related topics or deeper dives using arrow keys or buttons.

HTTP

* and enables exploration of related topics or deeper dives using arrow keys or buttons.

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import React, { useState, useEffect, useCallback } from "https://esm.sh/react@18.2.0";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

const SUGGESTIONS = ["Quantum Computing", "Renaissance Art", "Climate Change", "Artificial Intelligence", "Space Exploration"

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

async function server(request: Request): Promise<Response> {

const Cerebras = (await import("https://esm.sh/@cerebras/cerebras_cloud_sdk")).default;

const client = new Cerebras({

apiKey: Deno.env.get("CEREBRAS_API_KEY"),

try {

const completion = await client.chat.completions.create({

messages: [

…

6 7

9 10

…

184