1Migrated from folder: Archive/dateme_react_router_rewrite/dateme_home_react
1Migrated from folder: Archive/dateme_react_router_rewrite/dateme_router
25
26
27Migrated from folder: Archive/dateme_react_router_rewrite/dateme_react_client
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3import { Tldraw } from "https://esm.sh/tldraw@2.1.0";
4
1# lit
2
3[Lit](https://lit.dev/docs/ssr/server-usage/) is kind of like Google's answer to React: it's a little more reliant on browser APIs like custom elements and the shadow DOM, a little less 'magic', like using JSX.
4
5This is an example of using Lit and rendering it straight to a string, which is something that's recently popular. It works pretty well, right off the bat: Lit provides nice ESM modules and a pretty smooth workflow!
1/** @jsxImportSource https://esm.sh/react */
2import OpenAI from "npm:openai";
3import { renderToString } from "npm:react-dom/server";
4const openai = new OpenAI();
5import { Hono } from "npm:hono@3";
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource npm:react **/
2import { renderToString } from "npm:react-dom@18/server";
3
4export default (req: Request) => {
2
3/** @jsx jsx */
4import { renderToString } from "npm:react-dom/server";
5
6import { jsx } from "https://deno.land/x/hono@v3.11.7/middleware.ts";
1/**
2 * @title Running React on the Client
3 * @description Vals can also be used to host client-side code!
4 * @preview https://tfayyaz-react_tldraw.web.val.run
5 * @include tfayyaz/reacttldrawclient
6 * @resource [React - Quick Start](https://react.dev/learn)
7 * @resource [tldraw - Quick Start](https://tldraw.dev/)
8 */
13 `<html>
14 <head>
15 <title>TLDraw React Example</title>
16 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
17 <style>
26 <body>
27 <main id="root"></main>
28 <script type="module" src="https://esm.town/v/tfayyaz/reacttldrawclient"></script/>
29 </body>
30 </html>`,
Starter template with client-side React & Hono server
A web-based dice roller using React on Val Town
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh
