Search results for "react client side"

dbpediaenhanced

@ejfox

An API and basic interface for entity searching from DBPedia, enhanced with images

0

HTTP

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

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

return React.createElement(

React.createElement("h1", { className: "text-3xl font-bold text-center mb-8" }, "DBpedia Entity Search"),

React.createElement(

React.createElement("input", {

React.createElement(

loading && React.createElement("p", { className: "text-center" }, "Loading..."),

error && React.createElement("p", { className: "text-red-500 text-center" }, error),

results.length > 0 && React.createElement(

SIPforKCC

@Mirceanicolaeciobanu

@jsxImportSource https://esm.sh/react

0

Script

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

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

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

const initialActions = [

required:

sleeping hours, staff are aware of the needs, risks and safety measures of residents during night hours Staff are aware of t

toBeTaken:

E: Medication: Competencies including confidence is leading a shift Implement REACT TO RED Campaign for initially assessing p

byWhom: "Nic Ciobanu Vincent Vhinyu Knappe Cross",

required:

es Employee duties Care values Code of practice Person centred care Putting residents first Principals of care. Individuality

toBeTaken:

id: 10,

area: "Gain the views of Residents Relatives Visiting Professionals Staff Public relations HIGH PRIORITY",

required: "Seek the views of all, act upon any areas identified.",

</div>

function client() {

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

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

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

zod_demo_http

@stevekrouse

This val shows how to break up your HTTP val into three vals: @stevekrouse/zod_demo_http (this val) @stevekrouse/zod_demo_frontend (client-side react component) @stevekrouse/zod_demo_shared (code that is imported in both vals, but only run on the backend) I have these vals in a folder. Unfortunately, folders are not publicly shareable, which is why I listed all the vals above. The Val Town full-screen editor makes it a lot easier to work with multiple vals at once. The trickiest and most interesting part of this particular demo is how we import just the zod type in the frontend which avoids the error if we were to import any real value from that shared file. In this sense, it's not a truly safe shared file. Open questions I don't know why zod types aren't working when imported via esm.sh I don't know how we would get zod validation working on the frontend without reimporting zod from esm.sh (which would then lose us types or require us to duplicate the zod code)

0

HTTP

* @stevekrouse/zod_demo_http (this val)

* @stevekrouse/zod_demo_frontend (client-side react component)

* @stevekrouse/zod_demo_shared (code that is imported in both vals, but only run on the backend)

wittyTurquoiseDove

@all

@jsxImportSource https://esm.sh/react

1

0

HTTP

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

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

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

import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";

import { tomorrow } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism";

const [showSidePanel, setShowSidePanel] = useState(true);

y Grail layout, featuring a header, footer, three-column structure with fixed sidebars and a flexible main content area, ensu

async function handleSubmit(e: React.FormEvent) {

onClick={() => setShowSidePanel(!showSidePanel)}

{showSidePanel ? "←" : "→"}

easingbattleground

@ejfox

May the best easing win

0

HTTP

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

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

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

import { BrowserRouter as Router, Route, Link, Routes } from "https://esm.sh/react-router-dom";

const canvasRef = React.useRef(null);

React.useEffect(() => {

function client() {

client();

cors_example

@neverstew

CORS issues are the bane of frontend engineers. In Val Town, if you don't customize any CORS headers, we add these defaults: Access-Control-Allow-Origin: "*" Access-Control-Allow-Methods: "GET,HEAD,PUT,PATCH,POST,DELETE" You can override them if you wish to disallow CORS. Check out @neverstew/setCorsHeaders for the easiest way to do this in your code. This val is a client-side-rendered React app that makes requests to @stevekrouse/cors_example_backend. The backend is in a different val because CORS applies to requests on different domains. The backend has examples of the default permissive CORS behavior and disabled CORS.

1

0

HTTP

You can override them if you wish to disallow CORS. Check out [@neverstew/setCorsHeaders](https://www.val.town/v/neverstew/se

This val is a client-side-rendered React app that makes requests to @stevekrouse/cors_example_backend. The backend is in a di

/** @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";

const BASE_URL = "https://stevekrouse-cors_example_backend.web.val.run";

</div>

export default react_http(App, import.meta.url);

gameOfLifeSite

@dthyresson

// This approach will create a Game of Life simulation using React for the frontend and

0

HTTP

// This approach will create a Game of Life simulation using React for the frontend and

// of the game grid and implement the Game of Life rules on the client side. An explanation

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

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

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

const rect = canvas.getBoundingClientRect();

const x = (event.clientX - rect.left) * scaleX;

const y = (event.clientY - rect.top) * scaleY;

function client() {

client();

createVolumeAndPriceBoostForSolanaToken

@fybnonsol

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

0

Script

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

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

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

// Solana and Wallet Imports

overflowX: 'auto'

// Client-side rendering

function client() {

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

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

// Server-side handler

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

if (request.url.includes('/volume-boost')) {

// Simulate volume boost server-side logic

return new Response(JSON.stringify({

if (request.url.includes('/price-boost')) {

// Simulate price boost server-side logic

return new Response(JSON.stringify({

broadRedMarmoset

@willthereader

@jsxImportSource https://esm.sh/react

1

0

HTTP

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

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

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

// first stable version is v22

</div>

function client() {

console.log("Initializing client-side React application");

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

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

client();

async function scrapePage(url) {

flowingBeigePigeon

@lilymachado

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

0

HTTP

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

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

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

// Comprehensive type for wildlife image analysis

try {

// Dynamically import OpenAI to ensure server-side compatibility

const { OpenAI } = await import("https://esm.town/v/std/openai");

// Enhanced image upload handler with file validation

const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {

const file = event.target.files?.[0];

width: '100%'

function client() {

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

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

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

forbearingAmethystToad

@vawogbemi

@jsxImportSource https://esm.sh/react

0

HTTP

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

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

import DatePicker from "https://esm.sh/react-datepicker";

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

.react-datepicker {

.react-datepicker__header {

.react-datepicker__current-month {

.react-datepicker__day-names, .react-datepicker__week {

.react-datepicker__day-name, .react-datepicker__day {

.react-datepicker__day:hover {

react_framer_motion_script

@tfayyaz

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

1

Script

// 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 { motion } from "https://esm.sh/framer-motion";

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

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

// import "https://esm.sh/tldraw/tldraw.css";

dragConstraints={{ left: -100, right: 100 }}

// The app will be rendered inside the root div

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

root.render(<App />);

flutteringVioletBird

@stevekrouse

CronGPT This is a minisite to help you create cron expressions, particularly for crons on Val Town. It was inspired by Cron Prompt , but also does the timezone conversion from wherever you are to UTC (typically the server timezone). Tech Hono for routing ( GET / and POST /compile .) Hono JSX HTMX (probably overcomplicates things; should remove) @stevekrouse/openai, which is a light wrapper around @std/openai I'm finding HTMX a bit overpowered for this, so I have two experimental forks without it: Vanilla client-side JavaScript: @stevekrouse/cron_client_side_script_fork Client-side ReactJS (no SSR): @stevekrouse/cron_client_react_fork I think (2) Client-side React without any SSR is the simplest architecture. Maybe will move to that.

0

HTTP

I'm finding HTMX a bit overpowered for this, so I have two experimental forks without it:

1. Vanilla client-side JavaScript: @stevekrouse/cron_client_side_script_fork

2. Client-side ReactJS (no SSR): @stevekrouse/cron_client_react_fork

I think (2) Client-side React without any SSR is the simplest architecture. Maybe will move to that.

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

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

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

function App() {

<a href={href} className="text-blue-500 hover:text-blue-700" target="_blank" rel="noopener noreferrer">{children}</a>

function client() {

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

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

client();

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

worthyCyanRoundworm

@vawogbemi

@jsxImportSource https://esm.sh/react

0

HTTP

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

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

import DatePicker from "https://esm.sh/react-datepicker";

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

.react-datepicker {

.react-datepicker__header {

.react-datepicker__current-month {

.react-datepicker__day-names, .react-datepicker__week {

.react-datepicker__day-name, .react-datepicker__day {

.react-datepicker__day:hover {

ethereumAddressGenerator

@alfongj

Tool to generate test ethereum addresses, client side. Don't use this for production keys. The code has not been audited and there could be leakages (although it's unlikely)

0

HTTP

Tool to generate test ethereum addresses, client side.

Don't use this for production keys. The code has not been audited and there could be leakages (although it's unlikely)

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

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

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

import { ethers } from "https://esm.sh/ethers@5.7.2";

</div>

function client() {

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

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

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