Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react */
2
3import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
4import { html } from "https://esm.town/v/stevekrouse/html";
5

14- [2024-03-02 - MyFooter: my footer component which shares random vals I've liked!](https://val.town/v/postpostscript/MyFooter)
15- [2024-03-16 - readmeManager: Edit Val Readmes With Persistent Drafts](https://val.town/v/postpostscript/readmeManager)
16- [2024-04-09 - reactiveStateBlob: wrap blob state in a proxy to autosave it on changes](https://val.town/v/postpostscript/reactiveStateBlob)
17- [2024-04-24 - lock: lock that releases when it leaves the execution context](https://val.town/v/postpostscript/lock)
18- [2024-04-25 - fetchWorker: communicate with a worker over a fetch-like interface](https://val.town/v/postpostscript/fetchWorker)

1// https://api.val.town/v1/express/liamdanielduffy.reactTodoListWebsite
2export const REACT_TODO_LIST_CONTENTS = {
3  body: `<div id="root"></div>
4    <script>
5      const e = React.createElement;
6
7      class TodoList extends React.Component {
8        constructor(props) {
9          super(props);
52      }
53
54      ReactDOM.render(
55        e(TodoList),
56        document.getElementById('root')

1null
2
3Migrated from folder: Archive/dateme_react_router_rewrite/dateme_faq_react

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3import { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
5import { html } from "https://esm.town/v/stevekrouse/html";
6
7// button that's disabled until client react hydrates
8export const Button = (props) => {
9  const [clientHydrated, setClientHydrated] = useState(false);
51      const props = await loader(req);
52      const script = `
53        import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client";
54        import { jsx as _jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";
55        import { Component } from "https://esm.town/v/${author}/${name}";
56    

1# Starter App for [ssr_react_mini](https://www.val.town/v/stevekrouse/ssr_react_mini)
2
3You need to export four things:
4
51. `loader` - runs on any GET request, on the server. it accepts the `Request` and returns the props of your React compnent.
62. `action`- runs on the server on any non-GET, ie POST, PUT, DELETE, or `<form>`s submit
73. `Component` - your React component. it's initially server-rendered and then client-hydrated
84. `default` - you should mostly leave this line alone
9
10This is framework is bleeding-edge. You'll need to read the [code of the framework itself](https://www.val.town/v/stevekrouse/ssr_react_mini) (it's very short) to understand what it's doing.
11
12If you have questions or comments, please comment below on this val! (or any of these vals)
13
14Migrated from folder: Archive/ssr_react_mini_starter

5The router map url paths to component vals.
6
7Component vals must export a React Component as their default export:
8
9```ts

1import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
2import { jsx as _jsx } from "https://esm.sh/react/jsx-runtime";
3import { TodoApp } from "https://esm.town/v/stevekrouse/TodoApp";
4

1# Server-side Render React Mini Framework
2
3This is very experimental, more of a prototype of an architecture, than a true framework
5Example: https://www.val.town/v/stevekrouse/TodoApp
6
7Migrated from folder: Archive/ssr_react_mini

10import { sqlite } from "https://esm.town/v/std/sqlite?v=4";
11import { Hono } from "npm:hono";
12import { JSX } from "npm:react";
13
14export async function emailSubscription(req: Request) {