multirouteReactmain.tsx9 matches
1/**2* @title Multi-Route Website with React3* @description Create a personal portfolio website with multiple pages and server-side rendered React components.4*/5/** @jsxImportSource https://esm.sh/react */6import { renderToString } from "npm:react-dom/server";7import { websiteStyles } from "https://esm.town/v/iamseeley/websiteStyles";8import { personalData } from "https://esm.town/v/iamseeley/personalData";32<h2>Welcome to My Portfolio</h2>33<p>{personalData.summary}</p>34<p><strong>This website is rendered server-side with React.</strong></p>35<p>Check out the <a href='https://www.val.town/v/iamseeley/multirouteReact'>source</a> and start building your own site!</p>36</div>37);88<meta charSet="UTF-8" />89<meta name="viewport" content="width=device-width, initial-scale=1.0" />90<title>{personalData.name} | Server-side React</title>91<style>{websiteStyles}</style>92</head>117const url = new URL(req.url);118const currentPath = url.pathname;119const reactHtml = renderToString(<App currentPath={currentPath} />);120const fullHtml = `<!DOCTYPE html>${reactHtml}`;121return new Response(fullHtml, {122headers: { "Content-Type": "text/html" },
reactServermain.tsx4 matches
1/**2* @title React CSR Server in Val Town3* @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>
reactClientREADME.md2 matches
1๐ Client Side code for the React example23Migrated from folder: vals_by_example/reactClient
reactServerREADME.md2 matches
1๐ React Client-side rendering Server23Migrated from folder: vals_by_example/reactServer
clientMultirouteReactREADME.md2 matches
1๐ Client-Side Rendered React App via CDN23Migrated from folder: vals_by_example/clientMultirouteReact
multiroutePreactREADME.md2 matches
1๐ Multi-Route Website with Preact23Migrated from folder: vals_by_example/multiroutePreact
multirouteReactREADME.md2 matches
1๐ Multi-Route Website with React23Migrated from folder: vals_by_example/multirouteReact
preactExamplemain.tsx3 matches
1/** @jsxImportSource https://esm.sh/preact */2import { render } from "npm:preact-render-to-string";34export const preactExample = (request: Request) =>5new Response(render(<div>Test {1 + 1}</div>), {6headers: {
65title: "Client-Side",66items: [67"pomdtr/react_example",68todo("Val Town Islands"),69todo("Creating Web Component"),
65title: "Client-Side",66items: [67"pomdtr/react_example",68todo("Val Town Islands"),69todo("Creating Web Component"),
