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.
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 }) {
1/** @jsxImportSource https://esm.sh/react */
2import { parse } from "https://esm.sh/csv-parse/browser/esm/sync";
3import React, { useState } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client";
5
6function App() {
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4// last stable version is v138
5function App() {
69
70function client() {
71 console.log("Initializing client-side React application");
72 createRoot(document.getElementById("root")).render(<App />);
73}
1# getBlobAndRenderAsImage
2
3Shows how to get a Val Town blob and render it as an image in the DOM with React.
4
5## Setup
141. Fetching the blob:
15
16 - The client-side React component makes a fetch request to "/image".
17 - This request is handled by our server function.
18
405. Client-side handling:
41
42 - The fetch request in the React component receives the Response.
43 - We call `response.blob()` to get a Blob object from the Response.
44
51
52
537. Updating the React state:
54
55 - We set the data URL as the state of our component.
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { Light as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
5import json from "https://esm.sh/react-syntax-highlighter/dist/esm/languages/hljs/json";
6import { docco } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/hljs";
7
8SyntaxHighlighter.registerLanguage('json', json);
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() {
52 {embedCode && (
53 <div className="result">
54 <h2>Embed Code (Copy and paste this into your React component):</h2>
55 <textarea readOnly value={embedCode} />
56 <p>Current Visitor Count: {visitorCount}</p>
90 const encodedUrl = encodeURIComponent(websiteUrl);
91 const embedCode = `
92import { useState, useEffect } from 'react';
93
94function VisitorCounter() {
1/** @jsxImportSource https://esm.sh/react */
2import React, { useState, useEffect } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import confetti from "https://esm.sh/canvas-confetti@1.6.0";
5
