1/**
2 * @title React CSR Server in Val Town
3 * @description Serve the HTML shell for a client-side rendered React app in Val Town.
4 */
5import { websiteStyles } from "https://esm.town/v/iamseeley/websiteStyles";
16 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
18 <title>${personalData.name} | Client-side React</title>
19 <style>
20 ${websiteStyles}
23 <body>
24 <div id="root"></div>
25 <script type="module" src="https://esm.town/v/iamseeley/reactClient"></script>
26 </body>
27 </html>
1๐ Client Side code for the React example
2
3Migrated from folder: vals_by_example/reactClient
1๐ React Client-side rendering Server
2
3Migrated from folder: vals_by_example/reactServer
1๐ Client-Side Rendered React App via CDN
2
3Migrated from folder: vals_by_example/clientMultirouteReact
1๐ Multi-Route Website with Preact
2
3Migrated from folder: vals_by_example/multiroutePreact
1๐ Multi-Route Website with React
2
3Migrated from folder: vals_by_example/multirouteReact
1/** @jsxImportSource https://esm.sh/preact */
2import { render } from "npm:preact-render-to-string";
3
4export const preactExample = (request: Request) =>
5 new Response(render(<div>Test {1 + 1}</div>), {
6 headers: {
65 title: "Client-Side",
66 items: [
67 "pomdtr/react_example",
68 todo("Val Town Islands"),
69 todo("Creating Web Component"),
65 title: "Client-Side",
66 items: [
67 "pomdtr/react_example",
68 todo("Val Town Islands"),
69 todo("Creating Web Component"),
1/** @jsxImportSource npm:hono@3/jsx */
2import { handler } from "https://esm.town/v/pomdtr/ssr";
3import date_me_faq from "https://esm.town/v/stevekrouse/dateme_faq_react";
4import Layout from "https://esm.town/v/vawogbemi/dateme_layout";
5
Hono + React + Tailwind + Farcaster Mini App Starter Project
React Router for Hono in Val Town
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh
