Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function generateProblem(config) {
162  };
163
164  return React.createElement(
165    "div",
166    { className: `math-flashcard-container ${isSettingsVisible ? "flipped" : ""}` },
167    React.createElement(
168      "div",
169      { className: "flashcard-inner" },
170      React.createElement(
171        "div",
172        { className: "flashcard-front" },
173        React.createElement(
174          "div",
175          { className: "flashcard-header" },
176          React.createElement("h1", null, "Math Flashcards 🧮"),
177          React.createElement(
178            "button",
179            {
184          ),
185        ),
186        React.createElement(
187          "div",
188          { className: "flashcard" },
189          React.createElement(
190            "div",
191            { className: "problem" },
192            React.createElement("div", { className: "first-number" }, problem.a),
193            React.createElement(
194              "div",
195              { className: "second-line" },
196              React.createElement("span", { className: "operation" }, problem.operation),
197              React.createElement("span", { className: "second-number" }, problem.b),
198            ),
199          ),
200          React.createElement(
201            "div",
202            { className: "result-display" },
203            showResult && React.createElement("div", { className: "result" }, problem.result),
204          ),
205          React.createElement(
206            "div",
207            { className: "multiple-choice" },
208            problem.choices.map((choice, index) =>
209              React.createElement(
210                "button",
211                {
225            ),
226          ),
227          React.createElement(
228            "button",
229            {
235        ),
236      ),
237      React.createElement(
238        "div",
239        { className: "flashcard-back" },
240        React.createElement("h2", null, "Settings"),
241        React.createElement(
242          "div",
243          { className: "settings-section" },
244          React.createElement("h3", null, "Operations"),
245          React.createElement(
246            "div",
247            { className: "toggle-group" },
248            React.createElement(
249              "label",
250              null,
251              React.createElement("input", {
252                type: "checkbox",
253                checked: config.addition,
256              "Addition (+)",
257            ),
258            React.createElement(
259              "label",
260              null,
261              React.createElement("input", {
262                type: "checkbox",
263                checked: config.subtraction,
266              "Subtraction (-)",
267            ),
268            React.createElement(
269              "label",
270              null,
271              React.createElement("input", {
272                type: "checkbox",
273                checked: config.multiplication,
278          ),
279        ),
280        React.createElement(
281          "div",
282          { className: "settings-section" },
283          React.createElement("h3", null, "Number Ranges"),
284          React.createElement(
285            "div",
286            { className: "toggle-group" },
287            React.createElement(
288              "label",
289              null,
290              React.createElement("input", {
291                type: "checkbox",
292                checked: config.range1to10,
295              "1-10",
296            ),
297            React.createElement(
298              "label",
299              null,
300              React.createElement("input", {
301                type: "checkbox",
302                checked: config.range10to90,
305              "10-90 (by 10's)",
306            ),
307            React.createElement(
308              "label",
309              null,
310              React.createElement("input", {
311                type: "checkbox",
312                checked: config.range100to900,
317          ),
318        ),
319        React.createElement(
320          "button",
321          {
331
332function App() {
333  return React.createElement("div", { className: "app" }, React.createElement(MathFlashcards, null));
334}
335
336function client() {
337  createRoot(document.getElementById("root")).render(React.createElement(App, null));
338}
339if (typeof document !== "undefined") { client(); }

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {

markdownBlogStarterLayout.tsx3 matches

@stevekrouse•Updated 2 months ago

1/** @jsxImportSource npm:react@18.2.0 */
2import type { ReactNode } from "npm:react@18.2.0";
3
4export function Layout({ children }: { children: ReactNode }) {
5  return (
6    <html lang="en">

1/** @jsxImportSource https://esm.sh/preact */
2import { makeBadge } from "npm:badge-maker";
3import { render } from "npm:preact-render-to-string";
4import prettyMilliseconds from "npm:pretty-ms";
5

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {

1# React Hono Val Town Project Starter Template
2
3This is a starter template for a full-stack app in a Val Town Project. The app itself is a simple persistent message board.
23This template is actively accepting pull requests, particularly for bugs, but also for anything that can be done more idiomatically.
24
25If you'd like to make a template with other technologies choices (ie no Hono or no React), please create a new template and we can link to it from this one as another way to go. Eventually, we'd like to be many templates that show how to use Projects. The next one I'm personally excited about making is a fullstack React Router 7 one. [This one](https://www.val.town/x/just_be/reactRouter7) is a good start, but I'd like to rebuild the message board app from this template in that format.

1# Frontend
2
3This template is a classic client-side-only React app. 
4
5## `index.html`
9This HTML file imports `/frontend/style.css` from `/public/style.css` and `/frontend/favicon.svg` from `/frontend/favicon.svg`. Everything in `/frontend/` is mapped to `/public` by `/backend/index.ts`. This is just a convention. You could import & serve everything out of the same folder name.
10
11This HTML file has a `<div id="root"></div>`, which is where we mount the React app.
12
13This HTML file imports `/frontend/index.tsx` from `/public/index.tsx`, which is the **entrypoint** for all frontend JavaScript, including all the React. It is not a problem that it imports a file with a `.tsx` extension becaues browsers ignore file extensions. They only pay attention to content-types, which is great, because all these files will be returned as transpiled JS with the appropriate JS content type by [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)
14
15## `index.tsx`
16
17This file is the **entrypoint** for frontend JavaScript. It imports the React app from `/frontend/components/App.tsx` and mounts it on `<div id="root"></div>`.
18
19It also looks for *bootstrapped* JSON data at `window.__INITIAL_DATA`, and passes that only to the `<App />`.
25## `components/`
26
27This directory is where the React components are stored. They're pretty standard client-side React components.

12## Serving assets to the frontend
13
14This backend HTTP server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.
15
16In a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. 
26## CRUD API Routes
27
28This app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. This routes are called from the React app to refresh and update data.
29
30## Errors

8## Migrations
9
10In `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages. 
11
12This "migration" runs once on every app startup because it's imported in `index.ts`. You can comment this line out for a slight (30ms) performance improvement on cold starts. It's left in so that users who fork this project will have the migration run correctly.