Log inSign up

Search

Results include substring matches and semantically similar vals. Learn more
stevekrouse avatar
ssr_react_mini
@stevekrouse
Server-side Render React Mini Framework This is very experimental, more of a prototype of an architecture, than a true framework Example: https://www.val.town/v/stevekrouse/TodoApp
Script
# Server-side Render React Mini Framework
/** @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}
iamseeley avatar
reactClient
@iamseeley
🌐 Client Side code for the React example
Script
🌐 Client Side code for the React example
* @title React CSR Client in Val Town
* @description Client-side React application for a personal portfolio website.
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
import { BrowserRouter, Route, NavLink, Routes } from "https://esm.sh/react-router-dom";
<p><strong>This website is rendered client-side with React.</strong></p>
<p>Check out the <a target='_blank' href='https://www.val.town/v/iamseeley/reactClient'>client</a> and <a target='_blank'
const root = ReactDOM.createRoot(document.getElementById("root"));
tfayyaz avatar
react_framer_motion_client
@tfayyaz
* @title Running React on the Client * @description Vals can also be used to host client-side code! * @preview https://pomdtr-react_example_server.web.val.run * @include pomdtr/react_example_client * @resource [React - Quick Start](https://react.dev/learn)
HTTP (deprecated)
* @title Running React on the Client
* @description Vals can also be used to host client-side code!
* @preview https://pomdtr-react_example_server.web.val.run
* @include pomdtr/react_example_client
* @resource [React - Quick Start](https://react.dev/learn)
// The server response includes a script referencing the client val
export const server = (req) =>
<head>
<title>React Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<main id="root"></main>
<script type="module" src="https://esm.town/v/tfayyaz/react_framer_motion_script"></script/>
</body>
flxa avatar
ssr_react_mini
@flxa
Server-side Render React Mini Framework This is very experimental, more of a prototype of an architecture, than a true framework Example: https://www.val.town/v/stevekrouse/TodoApp
Script
# Server-side Render React Mini Framework
/** @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}
nbbaier avatar
react_client
@nbbaier
// JSX can be used in the client val thanks to this magic comment
Script
// JSX can be used in the client val thanks to this magic comment
/** @jsxImportSource https://esm.sh/react **/
// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
import { Button } from "https://esm.town/v/nbbaier/shadcnButton";
</Table>
// The app will be rendered inside the root div
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
iamseeley avatar
reactServer
@iamseeley
🌐 React Client-side rendering Server
HTTP (deprecated)
🌐 React Client-side rendering Server
* @title React CSR Server in Val Town
* @description Serve the HTML shell for a client-side rendered React app in Val Town.
import { websiteStyles } from "https://esm.town/v/iamseeley/websiteStyles";
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<title>${personalData.name} | Client-side React</title>
<style>
<div id="root"></div>
<script type="module" src="https://esm.town/v/iamseeley/reactClient"></script>
</body>
tfayyaz avatar
react_tldraw
@tfayyaz
* @title Running React on the Client * @description Vals can also be used to host client-side code! * @preview https://tfayyaz-react_tldraw.web.val.run * @include tfayyaz/reacttldrawclient * @resource [React - Quick Start](https://react.dev/learn) * @resource [tldraw - Quick Start](https://tldraw.dev/)
HTTP (deprecated)
* @title Running React on the Client
* @description Vals can also be used to host client-side code!
* @preview https://tfayyaz-react_tldraw.web.val.run
* @include tfayyaz/reacttldrawclient
* @resource [React - Quick Start](https://react.dev/learn)
* @resource [tldraw - Quick Start](https://tldraw.dev/)
// The server response includes a script referencing the client val
export const server = (req) =>
<head>
<title>TLDraw React Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<main id="root"></main>
<script type="module" src="https://esm.town/v/tfayyaz/reacttldrawclient"></script/>
</body>
iamseeley avatar
react_tldraw_deleted_1717545567
@iamseeley
* @title Running React on the Client * @description Vals can also be used to host client-side code! * @preview https://pomdtr-react_example_server.web.val.run * @include pomdtr/react_example_client * @resource [React - Quick Start](https://react.dev/learn)
HTTP (deprecated)
* @title Running React on the Client
* @description Vals can also be used to host client-side code!
* @preview https://pomdtr-react_example_server.web.val.run
* @include pomdtr/react_example_client
* @resource [React - Quick Start](https://react.dev/learn)
// The server response includes a script referencing the client val
export const server = (req) =>
<head>
<title>TLDraw React Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<main id="root"></main>
<script type="module" src="https://esm.town/v/tfayyaz/reacttldrawclient"></script/>
</body>
iamseeley avatar
clientMultirouteReact
@iamseeley
🌐 Client-Side Rendered React App via CDN
HTTP (deprecated)
🌐 Client-Side Rendered React App via CDN
* @title Client-Side Rendered React App
* @description Create a personal portfolio website with client-side rendering using React and React Router.
<title>${personalData.name} | Client-side React via CDN</title>
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-router-dom@5.2.0/umd/react-router-dom.min.js"></script>
const { useState, useEffect } = React;
const { BrowserRouter, Route, NavLink, Switch } = ReactRouterDOM;
<p><strong>This website is rendered client-side with React.</strong></p>
<p>Check out the <a href='https://www.val.town/v/iamseeley/clientMultirouteReact'>source</a> and start building y
iamseeley avatar
react_tldraw
@iamseeley
* @title Running React on the Client * @description Vals can also be used to host client-side code! * @preview https://pomdtr-react_example_server.web.val.run * @include pomdtr/react_example_client * @resource [React - Quick Start](https://react.dev/learn)
HTTP (deprecated)
* @title Running React on the Client
* @description Vals can also be used to host client-side code!
* @preview https://pomdtr-react_example_server.web.val.run
* @include pomdtr/react_example_client
* @resource [React - Quick Start](https://react.dev/learn)
// The server response includes a script referencing the client val
export const server = (req) =>
<head>
<title>TLDraw React Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<main id="root"></main>
<script type="module" src="https://esm.town/v/iamseeley/reacttldrawclient"></script>
</body>
ejfox avatar
healthdatasimple
@ejfox
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import React from "https://esm.sh/react";
import { renderToString } from "https://esm.sh/react-dom/server";
import { createRoot } from "https://esm.sh/react-dom/client";
const BLOB_KEY = 'health_data';
// Client-side App component
function App({ data }) {
</div>
// Client-side rendering
function client() {
fetch('/api/health-data')
if (typeof document !== "undefined") {
client();
export default async function server(request: Request): Promise<Response> {
andreterron avatar
server
@andreterron
* @title Running React on the Client * @description Vals can also be used to host client-side code! * @preview https://pomdtr-react_example_server.web.val.run * @include pomdtr/react_example_client * @resource [React - Quick Start](https://react.dev/learn)
HTTP (deprecated)
* @title Running React on the Client
* @description Vals can also be used to host client-side code!
* @preview https://pomdtr-react_example_server.web.val.run
* @include pomdtr/react_example_client
* @resource [React - Quick Start](https://react.dev/learn)
// The server response includes a script referencing the client val
export const server = (req) =>
<head>
<title>React Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<main id="root"></main>
<script type="module" src="https://esm.town/v/andreterron/react_tldraw_client"></script/>
</body>
pomdtr avatar
react_example_client
@pomdtr
// JSX can be used in the client val thanks to this magic comment
Script
// JSX can be used in the client val thanks to this magic comment
/** @jsxImportSource https://esm.sh/react **/
// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
function Counter() {
const [counter, setCounter] = React.useState(0);
return (
return (
<h1>React Example</h1>
<Counter />
// The app will be rendered inside the root div
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
andreterron avatar
tldraw_react_client
@andreterron
// JSX can be used in the client val thanks to this magic comment
Script
// JSX can be used in the client val thanks to this magic comment
/** @jsxImportSource https://esm.sh/react **/
// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
import { Tldraw } from "https://esm.sh/tldraw";
</div>
// The app will be rendered inside the root div
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
stevekrouse avatar
scientificCyanHarrier
@stevekrouse
Simple SQLite dashboard made by townie in this video: https://x.com/stevekrouse/status/1833577807093371325
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
<div className="sidebar">
function client() {
client();
.sidebar {
.sidebar h2 {
.sidebar ul {
.sidebar li {
1
…
Next