mirror of
https://github.com/honojs/hono.git
synced 2024-12-01 10:51:01 +00:00
2.9 KiB
2.9 KiB
JSX Middleware
JSX Middleware enable rendering HTML with JSX syntax. It's just for Sever-Side-Rendering. No virtual DOM. This middleware is only for writing with TypeScript.
Settings
tsconfig.json:
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "jsx",
"jsxFragmentFactory": "Fragment"
}
}
Usage
index.tsx:
import { Hono } from 'hono'
import { jsx } from 'hono/jsx'
const app = new Hono()
const Layout = (props: { children?: string }) => {
return (
<html>
<body>{props.children}</body>
</html>
)
}
const Top = (props: { messages: string[] }) => {
return (
<Layout>
<h1>Hello Hono!</h1>
<ul>
{props.messages.map((message) => {
return <li>{message}!!</li>
})}
</ul>
</Layout>
)
}
app.get('/', (c) => {
const messages = ['Good Morning', 'Good Evening', 'Good Night']
return c.html(<Top messages={messages} />)
})
app.fire()
dangerouslySetInnerHTML
dangerouslySetInnerHTML
allows you to set HTML directly.
app.get('/foo', (c) => {
const inner = { __html: 'JSX · SSR' }
const Div = <div dangerouslySetInnerHTML={inner} />
})
memo
You can memorize calculated strings of the component with memo
.
import { jsx, memo } from 'hono/jsx'
const Header = memo(() => <header>Welcome to Hono</header>)
const Footer = memo(() => <footer>Powered by Hono</footer>)
const Layout = (
<div>
<Header />
<p>Hono is cool!</p>
<Footer />
</div>
)
Fragment
import { jsx, Fragment } from 'hono/jsx'
const List = () => (
<Fragment>
<p>first child</p>
<p>second child</p>
<p>third child</p>
</Fragment>
)
With html Middleware
It's powerful to use JSX middleware with html middleware. For more information, see html middleware docs.
import { Hono } from 'hono'
import { html } from 'hono/html'
import { jsx } from 'hono/jsx'
const app = new Hono()
interface SiteData {
title: string
children?: any
}
const Layout = (props: SiteData) => html`<!DOCTYPE html>
<html>
<head>
<title>${props.title}</title>
</head>
<body>
${props.children}
</body>
</html>`
const Content = (props: { siteData: SiteData; name: string }) => (
<Layout {...props.siteData}>
<h1>Hello {props.name}</h1>
</Layout>
)
app.get('/:name', (c) => {
const { name } = c.req.param()
const props = {
name: name,
siteData: {
title: 'JSX with html sample',
},
}
return c.html(<Content {...props} />)
})
app.fire()
Tips for Cloudflare Workers
It's useful to use Miniflare'slive-reload
option for developing.
package.json:
{
"scripts": {
"build": "esbuild --bundle --outdir=dist ./src/index.tsx",
"dev": "miniflare --live-reload --debug"
}
}
wrangler.toml:
[build]
command = "yarn build"