Search

Code
1,917

10 matches

// Posts are automatically deleted after 24 hours. A basic spam filter is implemented to prevent abuse.
// The app uses SQLite for data storage and includes both server-side and client-side components.
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

lisardo/ReactStream/README.md

24 matches

React SSR and client-side hydration for Val Town
```tsx
/** @jsxImportSource https://esm.sh/react */
import { render, React } from "https://esm.town/v/jxnblk/ReactStream";
function App() {
  const [count, setCount] = React.useState(0);
  return (
      <body>
        <h1>ReactStream</h1>
        <p>React SSR with client-side hydration in Val Town</p>
        <pre>{count}</pre>
[Live example](https://www.val.town/v/jxnblk/ReactStreamDemo)
ReactStream has a built-in middleware to handle request to `/robots.txt`
```tsx
import { render, robots } from "https://esm.town/v/jxnblk/ReactStream";
// ...
```tsx
/** @jsxImportSource https://esm.sh/react */
import { render } from "https://esm.town/v/jxnblk/ReactStream";
      <head>
        <title>ReactStream</title>
      </head>
React requires matching versions for SSR and hydration.
Import `React` from `https://esm.town/v/jxnblk/ReactStream` to ensure your component uses the same version as this library (currently react@18.3.1).
Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo

movienerd/powerfulLimeGuppy/main.tsx

10 matches

 * Upgrades are hidden until they are unlocked for the first time.
 * The game state is stored client-side using localStorage for persistence.
 * React is used for the UI, and setInterval for the auto-upgrade functionality.
 */
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

Olive/linkInBioTemplate/main.tsx

12 matches

/**
 * This web app creates a Side School Seminar location voting system.
 * Users can vote for their preferred seminar location from four options.
 * The app uses React for the frontend and SQLite for storing votes on the backend.
 * The design is inspired by Side.school and includes an image in the first frame.
 * It features a celebration animation when voting, a distinct style for the selected option,
 */
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
      <div className="content">
        <h1>Side School Seminar</h1>
        <h2>Choose the location:</h2>
function client() {
  createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") {
  client();
}
      <head>
        <title>Side School Seminar</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

stevekrouse/zod_demo_http/README.md

3 matches

* @stevekrouse/zod_demo_http (this val)
* @stevekrouse/zod_demo_frontend (client-side react component)
* @stevekrouse/zod_demo_shared (code that is imported in both vals, but only run on the backend)

ejfox/eldestBronzePtarmigan/main.tsx

33 matches

/**
 * This dating app allows users to upload photos of their bedside table and phone case.
 * It uses Val Town's SQLite for data persistence and blob storage for image uploads.
 * The app includes a simple matching algorithm based on common items in bedside tables.
 */
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
  const [matches, setMatches] = useState([]);
  const [bedsideImage, setBedsideImage] = useState(null);
  const [phoneCaseImage, setPhoneCaseImage] = useState(null);
      setUser(userData);
      setBedsideImage(userData.bedsideImage);
      setPhoneCaseImage(userData.phoneCaseImage);
      const result = await response.json();
      if (type === 'bedside') {
        setBedsideImage(result.imageUrl);
      } else {
    <div className="app">
      <h1>Bedside & Case Dating App</h1>
      {user ? (
          <div className="image-upload">
            <h3>Your Bedside Table</h3>
            {bedsideImage ? (
              <img src={bedsideImage} alt="Bedside Table" className="uploaded-image" />
            ) : (
              <input type="file" onChange={(e) => handleImageUpload(e, 'bedside')} />
            )}
                <h4>{match.name}</h4>
                <img src={match.bedsideImage} alt="Bedside Table" className="match-image" />
                <img src={match.phoneCaseImage} alt="Phone Case" className="match-image" />
function client() {
  createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
      name TEXT NOT NULL,
      bedsideImage TEXT,
      phoneCaseImage TEXT
      name: "John Doe",
      bedsideImage: "https://maxm-imggenurl.web.val.run/a-simple-bedside-table-with-a-lamp-and-book",
      phoneCaseImage: "https://maxm-imggenurl.web.val.run/a-plain-black-phone-case"
    const matches = [
      { id: 2, name: "Jane Smith", bedsideImage: "https://maxm-imggenurl.web.val.run/a-bedside-table-with-plants-and-a-clock", phoneCaseImage: "https://maxm-imggenurl.web.val.run/a-colorful-floral-phone-case" },
      { id: 3, name: "Bob Johnson", bedsideImage: "https://maxm-imggenurl.web.val.run/a-messy-bedside-table-with-many-gadgets", phoneCaseImage: "https://maxm-imggenurl.web.val.run/a-rugged-outdoor-phone-case" }
    ];
        UPDATE ${KEY}_users
        SET ${type === 'bedside' ? 'bedsideImage' : 'phoneCaseImage'} = ?
        WHERE id = 1
      <head>
        <title>Bedside & Case Dating App</title>
        <style>${css}</style>

iamseeley/reactClient/main.tsx

19 matches

/**
 * @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";
import { personalData } from "https://esm.town/v/iamseeley/personalData";
      <p>{personalData.summary}</p>
      <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' href='https://www.val.town/v/iamseeley/reactServer'>server</a> code and start building your own site!</p>
      <p>You've been on this page for {count} seconds.</p>
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

iamseeley/clientMultirouteReact/main.tsx

24 matches

/**
 * @title Client-Side Rendered React App
 * @description Create a personal portfolio website with client-side rendering using React and React Router.
 */
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <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>
      <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.14.5/babel.min.js"></script>
      <script type="text/babel">
        const { useState, useEffect } = React;
        const { BrowserRouter, Route, NavLink, Switch } = ReactRouterDOM;
            <p>${personalData.summary}</p>
            <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 your own site!</p>
          </div>
        ReactDOM.render(<App />, document.getElementById('root'));
      </script>

iamseeley/reactServer/main.tsx

9 matches

/**
 * @title React CSR Server in Val Town
 * @description Serve the HTML shell for a client-side rendered React app in Val Town.
 */
      <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>

iamseeley/reactClient/README.md

5 matches

🌐 Client Side code for the React example
Migrated from folder: vals_by_example/reactClient

iamseeley/reactServer/README.md

4 matches

🌐 React Client-side rendering Server
Migrated from folder: vals_by_example/reactServer

iamseeley/clientMultirouteReact/README.md

5 matches

🌐 Client-Side Rendered React App via CDN
Migrated from folder: vals_by_example/clientMultirouteReact

stevekrouse/dateme_router_hydrated/main.tsx

18 matches

/** @jsxImportSource https://esm.sh/react@18.2.0 */
import * as ReactDOM from "https://esm.sh/react-dom@18.2.0/client";
import {
  RouterProvider,
} from "https://esm.sh/react-router-dom@6.23.0?deps=react@18.2.0,react-dom@18.2.0";
import * as React from "https://esm.sh/react@18.2.0";
import { routes } from "https://esm.town/v/stevekrouse/dateme_routes";
function makeClientSide(routes) {
  return routes.map(route => {
      action: route.action ? action : undefined,
      children: route.children ? makeClientSide(route.children) : undefined,
    };
const router = createBrowserRouter(makeClientSide(routes), {
  hydrationData: window.__staticRouterHydrationData,
ReactDOM.hydrateRoot(
  document.body,
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

stevekrouse/valwriter_react_clientside/main.tsx

5 matches

/** @jsxImportSource https://esm.sh/react@18.2.0 */
import { updateValByName } from "https://esm.town/v/nbbaier/updateValByName?v=14";
        import { App } from "${import.meta.url}";
        import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
        import { jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";
        createRoot(document.body).render(jsx(App, { }));
    user: "website that shows the current time",
    content: `/** @jsxImportSource npm:react */
export default function() {

stevekrouse/valwriter_react_clientside/README.md

3 matches


Migrated from folder: Archive/valwriter_react_clientside

…

124 125 126

127

128

Search

Code1,917

Code
1,917