Search results for "react client side"

townGen

@all

townGen [[https://www.val.town/v/all/promptGen]] [[https://www.val.town/v/stevekrouse/valwriter]] Note : It looks like openai enhancement was dropped at some point when adding all the gizmos;

1

HTTP

* Sub-functionalities are now listed under the main functionality to help describe it better.

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

// Simulated API for Hono and Deno features

frontend: [

"react",

"vue",

"aframe",

"react-three-fiber",

"cannon-es",

"Use modern CSS techniques",

"Add client-side form validation",

"Implement lazy loading for images",

"Use Web Workers for background tasks",

"Ensure it works properly in both server and client environments",

"Add offline support with Service Workers",

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

async function server(request: Request): Promise<Response> {

calendarEventExtractor

@pdebieamzn

// This calendar app will allow users to upload a PDF, extract events from it using OpenAI's GPT model,

1

0

HTTP

// and display them on a big calendar. We'll use react-big-calendar for the calendar component,

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import { Calendar, momentLocalizer } from "https://esm.sh/react-big-calendar";

// Set up the localizer for react-big-calendar

function client() {

if (typeof document !== "undefined") { client(); }

erties. Use ISO 8601 format for dates. Do not include any explanatory text outside the JSON array. Do not use markdown code f

App

@tfayyaz

// JSX can be used in the client val thanks to this magic comment

0

HTTP (deprecated)

// 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 { Button } from "https://esm.town/v/nbbaier/shadcnButton";

</Table>

// The app will be rendered inside the root div

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);

muddyAmethystLimpet

@pdebieamzn

// This calendar app will allow users to upload a PDF, extract events from it using OpenAI's GPT model,

0

HTTP

// and display them on a big calendar. We'll use react-big-calendar for the calendar component,

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import { Calendar, momentLocalizer } from "https://esm.sh/react-big-calendar";

// Set up the localizer for react-big-calendar

function client() {

if (typeof document !== "undefined") { client(); }

erties. Use ISO 8601 format for dates. Do not include any explanatory text outside the JSON array. Do not use markdown code f

aiTextEditor

@sharanbabu

* This val creates a text editing tool using the Cerebras Llama 70B model. * It includes a command input field with speech-to-text functionality, a collapsible additional context area, * and a rich text editor. The user's command, additional context, and current text are sent to the Cerebras API, * which returns the modified text to be displayed in the editor. * We use React for the UI, the Web Speech API for speech recognition, and the Cerebras API for text processing.

0

HTTP

* We use React for the UI, the Web Speech API for speech recognition, and the Cerebras API for text processing.

// Server-side code

const client = new Cerebras({

const completion = await client.chat.completions.create({

import React, { useState, useRef, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import ReactQuill from "https://esm.sh/react-quill";

return React.createElement(

React.createElement("h1", null, "My AI Pen✒️"),

townGen

@cofsana

townGen [[https://www.val.town/v/all/promptGen]] [[https://www.val.town/v/stevekrouse/valwriter]] Note : It looks like openai enhancement was dropped at some point when adding all the gizmos;

0

HTTP

* Sub-functionalities are now listed under the main functionality to help describe it better.

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

// Simulated API for Hono and Deno features

frontend: [

"react",

"vue",

"aframe",

"react-three-fiber",

"cannon-es",

"Use modern CSS techniques",

"Add client-side form validation",

"Implement lazy loading for images",

"Use Web Workers for background tasks",

"Ensure it works properly in both server and client environments",

"Add offline support with Service Workers",

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

async function server(request: Request): Promise<Response> {

tomatoSpider

@tfayyaz

Client Side React Helper Example Usage /** @jsxImportSource https://esm.sh/react */ import react_http from "https://esm.town/v/stevekrouse/react_http?v=6"; import { useState } from "https://esm.sh/react@18.2.0"; export function App() { const [ count, setCount ] = useState(0) return ( <div> <h1>Example App</h1> </div> ) } export default () => react_http({ component: App, sourceURL: import.meta.url, head: `<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.tailwindcss.com"></script> <title>Example App</title>` }) Gotchas Only use https imports The val with your React component will be imported in the browser. Thus, only use https imports in this val and any that it imports. Replace any npm: with https://esm.sh/ and everything should work great.

1

Script

# Client Side React Helper

## Example Usage

```tsx

/** @jsxImportSource https://esm.sh/react */

import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";

import { useState } from "https://esm.sh/react@18.2.0";

export function App() {

</div>

export default () => react_http({

component: App,

#### Only use https imports

The val with your React component will be imported in the browser. Thus, only use `https` imports in this val and any that it

import { ${component.name} } from "${sourceURL}";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import { jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";

createRoot(document.body).render(jsx(${component.name}, {}));

theHereTimes

@gio

* This application creates "The Here Times", a map-based news aggregator. * It uses the Google Maps JavaScript API for map rendering, Geonames for location data, * and the NewsAPI for fetching news articles. * The app displays news for the top 12 most populous cities/neighborhoods in the current map view. * * We'll use the following approach: * 1. Use Google Maps JavaScript API for rendering the map * 2. Use Geonames API to get top 12 most populous cities within the map bounds * 3. Fetch news data from NewsAPI based on these locations * 4. Display news articles in a side drawer, only showing articles that contain the city's name in the title * 5. Place markers on the map for each location (exactly 12) * 6. Add a search bar to allow users to search for specific locations * 7. Recenter the map when a location is clicked or searched

0

HTTP

* 4. Display news articles in a side drawer, only showing articles that contain the city's name in the title

import ReactDOM from "https://esm.sh/react-dom@18.2.0";

import React from "https://esm.sh/react@18.2.0";

const mapRef = React.useRef(null);

const [map, setMap] = React.useState(null);

const [center, setCenter] = React.useState({ lat: 40.7128, lng: -74.006 });

const [zoom, setZoom] = React.useState(10);

const [news, setNews] = React.useState([]);

const [locations, setLocations] = React.useState([]);

const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);

react_http

@stevekrouse

Client Side React Helper Example Usage /** @jsxImportSource https://esm.sh/react */ import { useState } from "https://esm.sh/react@18.2.0"; import react_http from "https://esm.town/v/stevekrouse/react_http?v=6"; export function App() { const [count, setCount] = useState(0); return ( <div> <h1>Example App</h1> <button onClick={() => setCount(count + 1)} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" > {count} </button> </div> ); } export default () => react_http({ component: App, sourceURL: import.meta.url, head: `<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.tailwindcss.com"></script> <title>Example App</title>`, }); Gotchas Only use https imports The val with your React component will be imported in the browser. Thus, only use https imports in this val and any that it imports. Replace any npm: with https://esm.sh/ and everything should work great.

2 2 24

3

Script

# Client Side React Helper

## Example Usage

```tsx

/** @jsxImportSource https://esm.sh/react */

import { useState } from "https://esm.sh/react@18.2.0";

import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";

export function App() {

export default () =>

react_http({

component: App,

#### Only use https imports

The val with your React component will be imported in the browser. Thus, only use `https` imports in this val and any that it

import { ${component.name} } from "${sourceURL}";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import { jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";

createRoot(document.body).render(jsx(${component.name}, {}));

ssr_react_mini_starter

@stevekrouse

Starter App for ssr_react_mini You need to export four things: loader - runs on any GET request, on the server. it accepts the Request and returns the props of your React compnent. action - runs on the server on any non-GET, ie POST, PUT, DELETE, or <form> s submit Component - your React component. it's initially server-rendered and then client-hydrated default - you should mostly leave this line alone This is framework is bleeding-edge. You'll need to read the code of the framework itself (it's very short) to understand what it's doing. If you have questions or comments, please comment below on this val! (or any of these vals)

2

HTTP (deprecated)

# Starter App for [ssr_react_mini](https://www.val.town/v/stevekrouse/ssr_react_mini)

1. `loader` - runs on any GET request, on the server. it accepts the `Request` and returns the props of your React compnent.

3. `Component` - your React component. it's initially server-rendered and then client-hydrated

/** @jsxImportSource https://esm.sh/react */

import { useEffect, useState } from "https://esm.sh/react@18.2.0";

import { Button, Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini";

// ensure any server-side imports only run server side

`CREATE TABLE IF NOT EXISTS ssr_react_mini_startesr_clicks (

`select count(*) from ssr_react_mini_starter_clicks`,

await sqlite.execute(`INSERT INTO ssr_react_mini_starter_clicks DEFAULT VALUES`);

const addClick = () => setClicks(clicks + 1); // optimistic, client-side

<title>SSR React Starter</title>

TodoApp

@lxmrc

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 . SSR React Mini Framework This "framework" is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix. The trick is client-side importing the React component that you're server rendering . Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as modules 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 and action , so they only run server-side.

0

HTTP (deprecated)

# SSR React Mini & SQLite Todo App

This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, Remix

## 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

The trick is [client-side importing](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L30) the React component that you

The tricky part is making sure that server-only code doesn't run on the client and vice-versa. For example, because this val

/** @jsxImportSource https://esm.sh/react */

import { useEffect, useState } from "https://esm.sh/react@18.2.0";

import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini?v=75";

useEffect(() => addLog(`Client rendered`), []);

KidsCodingDameDinoAdventure

@jbwinters

* This val implements a Dino Code Adventure game using React. * It uses client-side React for the game logic and UI, and * includes a server-side endpoint for storing high scores.

0

HTTP

* This val implements a Dino Code Adventure game using React.

* It uses client-side React for the game logic and UI, and

* includes a server-side endpoint for storing high scores.

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect, useCallback } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

const GRID_SIZE = 5;

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {

linkInBioTemplate

@valenchiaga

@jsxImportSource https://esm.sh/react

0

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import { renderToString } from "https://esm.sh/react-dom/server";

// Hexagon component

</div>

// Client-side rendering

function client() {

createRoot(document.getElementById("root")).render(<Game />);

if (typeof document !== "undefined") {

client();

// Server-side code

async function server(request: Request): Promise<Response> {

TodoApp

@summerboys

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 . SSR React Mini Framework This "framework" is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix. The trick is client-side importing the React component that you're server rendering . Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as modules 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 and action , so they only run server-side.

0

HTTP (deprecated)

# SSR React Mini & SQLite Todo App

This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, Remix

## 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

The trick is [client-side importing](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L30) the React component that you

The tricky part is making sure that server-only code doesn't run on the client and vice-versa. For example, because this val

/** @jsxImportSource https://esm.sh/react */

import { useEffect, useState } from "https://esm.sh/react@18.2.0";

import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini?v=75";

useEffect(() => addLog(`Client rendered`), []);

flaapyclone

@veddevv

a Flappy Bird clone but with a slot machine deciding random effects ranging from Slow motion to.. idk.

0

HTTP

// This val creates a Flappy Bird game with a slot machine feature that randomly activates

// and adds new features throughout the game. It uses React for rendering the UI and

// manages game state on the client-side. The game logic is implemented using

// requestAnimationFrame for smooth animation.

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect, useRef } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

const GAME_WIDTH = 400;

{pipes.map((pipe, index) => (

<React.Fragment key={index}>

</React.Fragment>

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {