Search

reacttemplate

@gueejla

A common react template/setup that I gleaned from others on valtown

HTTP

A common react template/setup that I gleaned from others on valtown

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

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

import { sillyCSS } from "https://esm.town/v/gueejla/sillyCSS";

</div>

function client() {

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

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

client();

function server(req: Request): Promise<Response> {

GDI_DigitalClock

@rozek

This val is part of a series of examples to introduce "val.town" in my computer science course at Stuttgart University of Applied Sciences . The idea is to motivate even first-semester students not to wait but to put their ideas into practice from the very beginning and implement web apps with frontend and backend. It contains a very simple (but still a bit visually impressive) web page with a digital clock showing the current time - made using Townie. This val is licensed under the MIT License.

HTTP

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

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

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

function App() {

</div>

function client() {

const root = document.getElementById('root');

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

client();

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

allSplat

@all

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

import * as SPLAT from "https://cdn.jsdelivr.net/npm/gsplat@latest";

</div>

function client() {

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

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

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

linearRegression

@bao

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

HTTP

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

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

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

function linearRegression(x: number[], y: number[]) {

</div>

function client() {

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

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

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

legitimateTanTiger

@sharanbabu

* This code creates a search engine prototype with autocomplete functionality using the Cerebras LLM API. * It uses React for the frontend and the Cerebras API for generating autocomplete suggestions. * The suggestions are cached in the browser to reduce API calls. * It implements a two-step LLM process: first to get initial suggestions, then to filter them for sensibility and ethics. * If the second LLM call fails, it displays "Failed to fetch" instead of showing results.

HTTP

* This code creates a search engine prototype with autocomplete functionality using the Cerebras LLM API.

* It uses React for the frontend and the Cerebras API for generating autocomplete suggestions.

* The suggestions are cached in the browser to reduce API calls.

* If the second LLM call fails, it displays "Failed to fetch" instead of showing results.

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

import debounce from "https://esm.sh/lodash.debounce";

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

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

function App() {

</div>

function client() {

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

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

client();

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

valcontributionchart

@ejfox

// This approach will fetch data from the specified endpoint, process it to create a GitHub-style contribution chart,

HTTP

// This approach will fetch data from the specified endpoint, process it to create a GitHub-style contribution chart,

// and render it using React. We'll use the fetch API to get the data, process it to create a heatmap-like structure,

// and then use CSS Grid to render the chart with varying shades of green based on the number of vals created each day.

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

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

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

function App() {

</div>

function client() {

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

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

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

carRaceGame1

@Salmannadaf1

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

HTTP

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

function CarRaceGame() {

zIndex: 20

function client() {

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

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

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

multiroutePreact

@iamseeley

🌐 Multi-Route Website with Preact

HTTP

🌐 Multi-Route Website with Preact

* @title Multi-Route Website with Preact

* @description Create a personal portfolio website with multiple pages using Preact and server-side rendering.

/** @jsxImportSource npm:preact */

import { h } from 'npm:preact';

import renderToString from 'npm:preact-render-to-string';

import { websiteStyles } from "https://esm.town/v/iamseeley/websiteStyles";

<p>{personalData.summary}</p>

<p><strong>This website is rendered server-side with Preact.</strong></p>

<p>Check out the <a href='https://www.val.town/v/iamseeley/multiroutePreact'>source</a> and start building your own sit

</main>

<title>${personalData.name} | Server-side Preact</title>

<style>

weather

@gao

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

HTTP

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

const weatherCodeMap = {

</div>

function client() {

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

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

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

app

@RIKKAEBI

@jsxImportSource https://esm.sh/react

HTTP

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

import confetti from "https://esm.sh/canvas-confetti@1.6.0";

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

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

type Like = {

CGPAcalculator

@Aditya230

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

// SRM University Grade Point Mapping

</div>

function client() {

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

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

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

hiraganaWordBuilder

@ashryanio

@jsxImportSource https://esm.sh/react

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

</div>

function client() {

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

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

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

religionClickerGame

@roramigator

// This val creates a sarcastic idle clicker game about starting a religion.

HTTP

// This val creates a sarcastic idle clicker game about starting a religion.

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

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

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

function App() {

return descriptions[key] || "Mystery achievement. Very mysterious indeed.";

function client() {

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

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

client();

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

diacomDemo

@dazzag24

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

function App() {

</div>

function client() {

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

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

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

stevekrouse_minimal

@stevekrouse

@jsxImportSource https://esm.sh/react

HTTP

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

import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=46";

import tailwindURL from "https://esm.town/v/stevekrouse/tailwindURL";

import { renderToString } from "npm:react-dom/server";

const linkClass = "text-blue-500 hover:underline";

return { allHits, todayHits };

export const reactExample = modifyFetchHandler(async (request: Request) => {

const url = new URL(request.url);

…

28 29

31 32

…

250