1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5const techOptions = {
6 frontend: [
7 { name: "React", icon: "⚛️", explanation: "A popular JavaScript library for building user interfaces", complexity: 3 },
8 { name: "Vue", icon: "🖖", explanation: "A progressive framework for building user interfaces", complexity: 2 },
9 { name: "Angular", icon: "🅰️", explanation: "A platform for building web applications", complexity: 4 },
10 { name: "Svelte", icon: "🔥", explanation: "A radical new approach to building user interfaces", complexity: 2 },
11 { name: "Next.js", icon: "⏭️", explanation: "A React framework with hybrid static & server rendering", complexity: 3 },
12 { name: "Tailwind CSS", icon: "🎨", explanation: "A utility-first CSS framework for rapid UI development", complexity: 2 },
13 ],
38function client() {
39 const root = document.getElementById("root");
40 if (root && typeof React !== 'undefined' && React.useState) {
41 const { useState, useEffect, useRef } = React;
42
43 function App() {
252 try {
253 createRoot(root).render(
254 <React.StrictMode>
255 <App />
256 </React.StrictMode>
257 );
258 } catch (error) {
259 console.error("Error rendering React app:", error);
260 root.innerHTML = `<div style="color: red; padding: 20px;">
261 <h2>Error Rendering App</h2>
265 }
266 } else {
267 console.error("Root element not found or React is not properly loaded");
268 }
269}
1/** @jsxImportSource https://esm.sh/react@18.3.1 */
2// import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client";
3import * as React from "https://esm.sh/react@18.3.1";
4
5export { React };
6
7export type RequestHandler = (request: Request) => Promise<Response>;
13export type Middleware = (req: DataRequest, res: Response, callback: NextCallback) => Promise<Response>;
14
15export interface ReactStreamProps {
16 url: URL;
17 pathname: string;
23
24export function render<T>(
25 /** Root-level React component that renders an entire <html> element
26 * including the head and body tags.
27 */
28 Component: React.ComponentType<ReactStreamProps>,
29 /** On Val Town, use `import.meta.url` for client-side hydration */
30 // module: string | false,
38
39 return async function handler(request: Request): Promise<Response> {
40 const main = reactRender(Component);
41 const middleware: Middleware[] = [
42 parseURL,
62export default render;
63
64// main react response handler
65const reactRender = (
66 Component: React.ComponentType<ReactStreamProps>,
67): Middleware =>
68 async function(req: DataRequest, res: Response): Promise<Response> {
69 const { renderToStaticMarkup } = await import("https://esm.sh/react-dom@18.3.1/server");
70
71 const html = await renderToStaticMarkup(<Component {...req.data} />);
84 headers.set("Content-Type", "text/html");
85
86 console.log("react", res.status);
87 return new Response(html, {
88 headers,
1React SSR for Val Town
2
3## Usage
4
5```tsx
6/** @jsxImportSource https://esm.sh/react */
7import { render, React } from "https://esm.town/v/jxnblk/ReactStatic";
8
9function App() {
11 <html>
12 <body>
13 <h1>ReactStatic</h1>
14 <p>React SSR in Val Town</p>
15 </body>
16 </html>
22
23<!--
24[Live example](https://www.val.town/v/jxnblk/ReactStreamDemo)
25-->
26
41### robots.txt
42
43ReactStatic has a built-in middleware to handle request to `/robots.txt`
44
45```tsx
46import { render, robots } from "https://esm.town/v/jxnblk/ReactStatic";
47// ...
48export default render(App, [
85
86```tsx
87/** @jsxImportSource https://esm.sh/react@18.3.1 */
88import { render } from "https://esm.town/v/jxnblk/ReactStatic";
89
90function App () {
92 <html>
93 <head>
94 <title>ReactStatic</title>
95 </head>
96 <body>
104```
105
106React requires matching versions for SSR and hydration -- ensure you import `react@18.3.1` when using this library.
107
108Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo
109
110
111Migrated from folder: _LEAVE_AS_IS/ReactStatic
1/** @jsxImportSource https://esm.sh/react@18.3.1 */
2import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client";
3import * as React from "https://esm.sh/react@18.3.1";
4
5export { React };
6
7export type RequestHandler = (request: Request) => Promise<Response>;
13export type Middleware = (req: DataRequest, res: Response, callback: NextCallback) => Promise<Response>;
14
15export interface ReactStreamProps {
16 url: URL;
17 pathname: string;
23
24export function render<T>(
25 /** Root-level React component that renders an entire <html> element
26 * including the head and body tags.
27 */
28 Component: React.ComponentType<ReactStreamProps>,
29 /** On Val Town, use `import.meta.url` for client-side hydration */
30 module: string | false,
31 /** Optional middleware */
32 opts: ReactStreamOptions | Middleware[] = [],
33) {
34 const useMiddleware = Array.isArray(opts); // for backwards compat
35 const options: ReactStreamOptions = !Array.isArray(opts) ? opts : {};
36 const { api, getInitialProps } = options;
37
42
43 return async function handler(request: Request): Promise<Response> {
44 const main = reactStream(Component, module);
45 const middleware: Middleware[] = [
46 parseURL,
71export default render;
72
73// main react response handler
74const reactStream = (
75 Component: React.ComponentType<ReactStreamProps>,
76 module: string | false,
77): Middleware =>
78 async function(req: DataRequest, res: Response): Promise<Response> {
79 const { renderToReadableStream } = await import("https://esm.sh/react-dom@18.3.1/server");
80
81 const stream = await renderToReadableStream(
91 headers.set("Content-Type", "text/html");
92
93 console.log("react", res.status);
94 return new Response(stream, {
95 headers,
139};
140/** DEPRECATED: Use middleware instead */
141export interface ReactStreamOptions {
142 /** DEPRECATED: Optional text response for robots.txt */
143 robots?: string;
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Hono } from "https://esm.sh/hono@3.3.1";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
5
6function MyBookmarkManager() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { AnimatePresence, motion } from "https://esm.sh/framer-motion@10.16.4";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5
6function CreativeDeveloperPortfolio() {
19 title: "AI Chatbot Platform 🤖",
20 description: "Intelligent conversational AI with natural language processing",
21 tech: ["Python", "TensorFlow", "React"],
22 link: "https://ai-chatbot.example.com",
23 image: "https://maxm-imggenurl.web.val.run/ai-chatbot-interface",
26 title: "Blockchain Explorer 🔗",
27 description: "Real-time cryptocurrency transaction tracker",
28 tech: ["Solidity", "Web3.js", "React"],
29 link: "https://blockchain-explorer.example.com",
30 image: "https://maxm-imggenurl.web.val.run/blockchain-dashboard",
33 title: "Smart Home Dashboard 🏠",
34 description: "IoT device management and monitoring system",
35 tech: ["Node.js", "MQTT", "React Native"],
36 link: "https://smart-home.example.com",
37 image: "https://maxm-imggenurl.web.val.run/smart-home-dashboard",
41 const skills = [
42 { name: "Python", level: 90, color: "bg-blue-500" },
43 { name: "React", level: 85, color: "bg-cyan-500" },
44 { name: "Machine Learning", level: 80, color: "bg-green-500" },
45 { name: "Cloud Computing", level: 75, color: "bg-indigo-500" },
1/** @jsxImportSource https://esm.sh/react */
2import { createFalClient } from "https://esm.sh/@fal-ai/client";
3import React, { useState } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5import { falProxyRequest } from "https://esm.town/v/stevekrouse/falProxyRequest";
6
10 const [loading, setLoading] = useState(false);
11
12 const generateImage = async (e?: React.FormEvent) => {
13 e?.preventDefault();
14 setLoading(true);
1/** @jsxImportSource https://esm.sh/react */
2import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
3import { html } from "https://esm.town/v/stevekrouse/html";
4import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";
5import { renderToString } from "npm:react-dom/server";
6
7function StatusRow({ rows }) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
1/** @jsxImportSource https://esm.sh/react */
2import confetti from "https://esm.sh/canvas-confetti";
3import React, { useEffect, useState } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6function App() {
