using react on the server (+ htmx)

04 Feb, 2025

BUILD THE DAMN APP

then go back and make it pretty

https://developers.cloudflare.com/d1/ vendor lock in jeebus crhizt

part 1: the counter

making the page

const Counter: FC<{ count: number }> = (props) => {
  return (
    <div>
      <h3>{props.count}<h3/>
      <div>
        <button>-<button/>
        <button>+<button/>
      </div>
    </div>
  )
}

app.get('/', (c) => {
  return c.render(<Counter count={3} />)
})

export default app;

Screenshot 2025-02-04 at 11

(todo add click to run hono playground?)

making it actually do stuff

let count = 0;

app.put('/plus', (c) => {
  count++;
  console.log("plus", count);
  return c.render(<Counter count={count} />)
})

app.put('/minus', (c) => {
    count--;
    console.log("minus", count);
    return c.render(<Counter count={count} />)
})

const Counter = () => {
  return (
    <div>
      <Count count={count}>{props.count}<h3/>
      <div>
        <button hx-put="minus" hx-target="#count">-</button>
        <button hx-put="plus" hx-target="#count">+</button>
      </div>
    </div>
  )
}

app.get('/', (c) => {
  return c.render(
    <html>
      <head>
        <script src="https://unpkg.com/htmx.org@2.0.4"></script>
      </head>
      <body>
        <Counter />
      </body>
    </html>
  )
})

export default app;

(todo add click to run hono playground?)

it works :)

repo link at this point: https://github.com/griffinht/counter/tree/895f4fbdf7556cce23a61bdb9ffd60d5e3f10a07

todo 200 level w/ typed htmx https://hono.dev/examples/htmx

todo 400 level react components https://github.com/iflamed/hono-react-ssr-shadcn-ui

part 2: explore page + user profiles

explore page
user profiles
making it work

part 3: the db

(prisma raw queries)

prisma because i couldn't figure out the other ones and its all modern

i only want raw queries because i don't want a leaky abstraction over SQL when i could just use sql