linkInBioTemplatemain.tsx2 matches
1/** @jsxImportSource https://esm.sh/react */2import { renderToString } from "npm:react-dom/server";34export default async function(req: Request) {
clientMultirouteReactmain.tsx11 matches
1/**2* @title Client-Side Rendered React App3* @description Create a personal portfolio website with client-side rendering using React and React Router.4*/5import { websiteStyles } from "https://esm.town/v/iamseeley/websiteStyles";13<meta charset="UTF-8">14<meta name="viewport" content="width=device-width, initial-scale=1.0">15<title>${personalData.name} | Client-side React via CDN</title>16<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>17<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>18<script src="https://cdn.jsdelivr.net/npm/react-router-dom@5.2.0/umd/react-router-dom.min.js"></script>19<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.14.5/babel.min.js"></script>20<style>25<div id="root"></div>26<script type="text/babel">27const { useState, useEffect } = React;28const { BrowserRouter, Route, NavLink, Switch } = ReactRouterDOM;2930const Navigation = () => (40<h2>Welcome to My Portfolio</h2>41<p>${personalData.summary}</p>42<p><strong>This website is rendered client-side with React.</strong></p>43<p>Check out the <a href='https://www.val.town/v/iamseeley/clientMultirouteReact'>source</a> and start building your own site!</p>44</div>45);94);9596ReactDOM.render(<App />, document.getElementById('root'));97</script>98</body>
multiroutePreactmain.tsx8 matches
1/**2* @title Multi-Route Website with Preact3* @description Create a personal portfolio website with multiple pages using Preact and server-side rendering.4*/5/** @jsxImportSource npm:preact */6import { h } from 'npm:preact';7import renderToString from 'npm:preact-render-to-string';8import { websiteStyles } from "https://esm.town/v/iamseeley/websiteStyles";9import { personalData } from "https://esm.town/v/iamseeley/personalData";35<h2>Welcome to My Portfolio</h2>36<p>{personalData.summary}</p>37<p><strong>This website is rendered server-side with Preact.</strong></p>38<p>Check out the <a href='https://www.val.town/v/iamseeley/multiroutePreact'>source</a> and start building your own site!</p>39</main>40</div>105<meta charset="UTF-8">106<meta name="viewport" content="width=device-width, initial-scale=1.0">107<title>${personalData.name} | Server-side Preact</title>108<style>109${websiteStyles}
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
