HonoX入門

$ mkdir honox_test
$ cd honox_test
$ npm install hono honox
$ npm create hono@latest .
create-hono version 0.14.3
✔ Using target directory … .
? Which template do you want to use?
  nextjs
  nodejs
  vercel
❯ x-basic
  aws-lambda
  bun
  cloudflare-pages
? Which template do you want to use? x-basic
? Directory not empty. Continue? (y/N) y
? Directory not empty. Continue? yes
? Do you want to install project dependencies? (Y/n) 
? Do you want to install project dependencies? yes
? Which package manager do you want to use? (Use arrow keys)
❯ npm
? Which package manager do you want to use? npm
$ npm run dev

index.tsxは以下のようになっているため。

app/routes/index.tsx

import { css } from 'hono/css'
import { createRoute } from 'honox/factory'
import Counter from '../islands/counter'

const className = css`
  font-family: sans-serif;
`

export default createRoute((c) => {
  const name = c.req.query('name') ?? 'Hono'
  return c.render(
    <div class={className}>
      <h1>Hello, {name}!</h1>
      <Counter />
    </div>,
    { title: name }
  )
})