1/** @jsxImportSource https://esm.sh/react */
2import confetti from "https://esm.sh/canvas-confetti@1.6.0";
3import React, { useEffect, useState } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6const NAMING_OPTIONS = {
1/** @jsxImportSource https://esm.sh/react */
2import confetti from "https://esm.sh/canvas-confetti@1.6.0";
3import React, { useEffect, useState } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6const NAMING_OPTIONS = {
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { blob } from "https://esm.town/v/std/blob";
5
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect, useRef } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";
5
26 }, [htmlOutput]);
27
28 const sendMessage = async (e?: React.FormEvent) => {
29 e?.preventDefault();
30 if (input.trim() === "") return;
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect, useRef } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import Chart from "https://esm.sh/chart.js/auto";
5
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function App() {
38 };
39
40 const handleSubmit = (e: React.FormEvent) => {
41 e.preventDefault();
42 const correctAnswer = num1 + num2;
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { blob } from "https://esm.town/v/std/blob";
5
1/** @jsxImportSource https://esm.sh/react */
2import React from "https://esm.sh/react@18.2.0";
3import { useState, useEffect, Component } from "https://esm.sh/react@18.2.0";
4import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
5import { DragDropContext, Droppable, Draggable } from "https://esm.sh/react-beautiful-dnd@13.1.1";
6
7class ErrorBoundary extends Component {
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { blob } from "https://esm.town/v/std/blob";
5
1# getJsonAndRenderAsImage
2
3Shows how to get a JSON object containing a base64 imaged stored in Val Town blob storage and render it as an image in the DOM with React.
4
5## Setup
221. Fetching the JSON:
23
24 - The client-side React component makes a fetch request to "/image".
25 - This request is handled by our server function.
26
485. Client-side handling:
49
50 - The fetch request in the React component receives the Response.
51 - We call `response.json()` to parse the JSON object from the Response.
52
59
60
617. Updating the React state:
62
63 - We set the data URL as the state of our component.
