Val Town Code SearchReturn to Val Town

1// JSX can be used in the client val thanks to this magic comment
2/** @jsxImportSource https://esm.sh/react **/
3// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
4import React from "https://esm.sh/react";
5import ReactDOM from "https://esm.sh/react-dom";
6
7function Counter() {
8  const [counter, setCounter] = React.useState(0);
9
10  return (
22  return (
23    <>
24      <h1>React Example</h1>
25      <Counter />
26    </>
29
30// The app will be rendered inside the root div
31const root = ReactDOM.createRoot(document.getElementById("root"));
32root.render(<App />);

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export const reactExample = () =>
5  new Response(renderToString(<div>Test {1 + 1}</div>), {
6    headers: {

1null
2
3Migrated from folder: examples/reactExample

1/** @jsxImportSource https://esm.sh/preact */
2import { render } from "npm:preact-render-to-string";
3
4export const preactExample = () =>
5  new Response(render(<div>Test {1 + 1}</div>), {
6    headers: {

1null
2
3Migrated from folder: examples/preactExample

38```
39
40See @pomdtr/react_example
41
42### Adding external resources to your example

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export const personalWebsite = (request: Request) => {

1/** @jsxImportSource npm:preact */
2import type { VNode } from "npm:preact";
3import { render } from "npm:preact-render-to-string";
4
5export const html = (html: VNode) =>

1export const preactTest = async () => {
2  const { useState, h, htm, renderToString } = await import(
3    "https://npm.reversehttp.com/preact,htm,preact/hooks,preact-render-to-string"
4  );
5  const html = htm.bind(h);

1/** @jsxImportSource https://esm.sh/preact */
2import { getDocs } from "https://esm.town/v/stevekrouse/getSqliteDateMeDocs";
3