Search

Code
1,917

8 matches

/** @jsxImportSource https://esm.sh/react@18.2.0 **/
// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
import ReactDOM from "https://esm.sh/react-dom@18.2.0";
import React from "https://esm.sh/react@18.2.0";
import { useState } from "https://esm.sh/react@18.2.0";
import { Tldraw } from "https://esm.sh/tldraw@2.1.0";
// The app will be rendered inside the root div
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

iamseeley/reacttldrawclient/main.tsx

7 matches

/** @jsxImportSource https://esm.sh/react **/
// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
import ReactDOM from "https://esm.sh/react-dom";
import React, { useState, useEffect } from "https://esm.sh/react@18.0.0";
// The app will be rendered inside the root div
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

iamseeley/react_tldraw/main.tsx

13 matches

/**
 * @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>

iamseeley/react_tldraw_deleted_1717545567/main.tsx

13 matches

/**
 * @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>

stevekrouse/cron_client_react_fork/README.md

5 matches


- [ ] simplify by removing HTMX (try doing the form as a GET request, manual JS script, or client side react)
- [ ] make the timezone picker better (fewer options, searchable)
Migrated from folder: Archive/cron_client_react_fork

neverstew/cors_example/README.md

3 matches


This val is a client-side-rendered React app that makes requests to @stevekrouse/cors_example_backend. The backend is in a different val because CORS applies to requests on different domains. The backend has examples of the default permissive CORS behavior and disabled CORS.

andreterron/server/main.tsx

13 matches

/**
 * @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>

andreterron/tldraw_react_client/main.tsx

8 matches

// 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";
// The app will be rendered inside the root div
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

summerboys/TodoApp/README.md

18 matches

# SSR React Mini & SQLite Todo App
This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in [Val Town SQLite](https://docs.val.town/std/sqlite/).
## SSR React Mini Framework
This ["framework"](https://www.val.town/v/stevekrouse/ssr_react_mini) is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix.
The trick is [client-side importing](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L30) the React component that you're [server rendering](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L35-37). Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as [modules](https://esm.town/v/stevekrouse/TodoApp) importable by the browser.
The tricky part is making sure that server-only code doesn't run on the client and vice-versa. For example, because this val colocates the server-side `loader` and `action` with the React component we have to be careful to do all server-only imports (ie sqlite) dynamically inside the [`loader`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L7) and [`action`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L20), so they only run server-side.

mjweaver01/TodoApp/README.md

18 matches

# SSR React Mini & SQLite Todo App
This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in [Val Town SQLite](https://docs.val.town/std/sqlite/).
## SSR React Mini Framework
This ["framework"](https://www.val.town/v/stevekrouse/ssr_react_mini) is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix.
The trick is [client-side importing](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L30) the React component that you're [server rendering](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L35-37). Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as [modules](https://esm.town/v/stevekrouse/TodoApp) importable by the browser.
The tricky part is making sure that server-only code doesn't run on the client and vice-versa. For example, because this val colocates the server-side `loader` and `action` with the React component we have to be careful to do all server-only imports (ie sqlite) dynamically inside the [`loader`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L7) and [`action`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L20), so they only run server-side.

stevekrouse/pinkPig/main.tsx

7 matches

// render WebcamPage as a client side react component with fetch handler response object
import WebcamPage from 'https://esm.sh/gh/fal-ai/fal-js@9cc7cf5456/apps/demo-nextjs-app-router/app/camera-turbo/page.tsx';
import React from 'https://esm.sh/react@17.0.2?dev';
import { render } from 'https://esm.sh/react-dom@17.0.2?dev';
render(React.createElement(WebcamPage), document.getElementById('root'));
`;

stevekrouse/todo_list/README.md

4 matches

# Example Full-stack Todo List App with React SSR + Client-side hydration & sqlite
Requires you to put the React component  in another val, in this case: https://www.val.town/v/stevekrouse/TodoApp

…

124 125 126 127

128

Search

Code1,917

Code
1,917