Val Town Code Search

ReactStatic README.md14 matches

@jxnblk•Updated 4 months ago

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

ReactStream_migrated main.tsx16 matches

@jxnblk•Updated 4 months ago

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;

myBookmarkManager main.tsx3 matches

@arfan•Updated 4 months ago

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() {

ampleCopperMagpie main.tsx7 matches

@akshaybondre123•Updated 4 months ago

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" },

falDemoApp main.tsx4 matches

@ben5mills5•Updated 4 months ago

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);

status main.tsx3 matches

@charmaine•Updated 4 months ago

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 }) {

chatApplication main.tsx3 matches

@Shigigami•Updated 4 months ago

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() {

StripeDemo main.tsx3 matches

@charmaine•Updated 4 months ago

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() {

cerebras_coder main.tsx10 matches

@GoldGuy•Updated 4 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0  */
2import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
5import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
6import { STARTER_PROMPTS } from "https://esm.town/v/stevekrouse/cerebras_coder_prompts";
7
31}: {
32  prompt: string;
33  setPrompt: React.Dispatch<React.SetStateAction<string>>;
34  handleSubmit: (e: React.FormEvent) => void;
35  handleStarterPromptClick: (promptItem: PromptItem) => void;
36}) {
117
118function App() {
119  const previewRef = React.useRef<HTMLDivElement>(null);
120  const [prompt, setPrompt] = useState("");
121  const [projectId, setProjectId] = useState<number | null>(null);
175  }
176
177  async function handleSubmit(e: React.FormEvent | string) {
178    if (typeof e !== "string") {
179      e.preventDefault();
674                </div>
675                <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
676                  <React.Fragment key={iframeKey}>
677                    <iframe
678                      srcDoc={code}
680                      className="w-full grow"
681                    />
682                  </React.Fragment>
683                </div>
684              </div>

scientificCalculatorApp main.tsx3 matches

@Adool55•Updated 4 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function ScientificCalculator() {

« Previous

1...1424 1425 1426 1427 1428 1429 1430...1596

Projects

View all 223 vals

reactHonoStarter4 file matches

@halfstack•Updated 4 hours ago

MiniAppStarter10 file matches

@moe•Updated 7 hours ago

Hono + React + Tailwind + Farcaster Mini App Starter Project

Users

View all 2 users

@effector2 vals

Updated 1 month ago

Write business logic with ease Meet the new standard for modern TypeScript development. Type-safe, reactive, framework-agnostic library to manage your business logic.

@officialrajdeepsingh1 val

Updated 1 month ago

Documentation

View all 4 documentation results

Val Town Code SearchReturn to Val Town

ReactStaticREADME.md14 matches

ReactStream_migratedmain.tsx16 matches

myBookmarkManagermain.tsx3 matches

ampleCopperMagpiemain.tsx7 matches

falDemoAppmain.tsx4 matches

statusmain.tsx3 matches

chatApplicationmain.tsx3 matches

StripeDemomain.tsx3 matches

cerebras_codermain.tsx10 matches

scientificCalculatorAppmain.tsx3 matches