Серверная генерация старниц

Если файл имеет расширение jsx или tsx, то будет применен jsx-трансформер. Не забудьте импортировать фабрику jsx из @app/html-jsx.

Пример использования:

import { jsx } from '@app/html-jsx'

interface HtmlLayoutProps {
  title?: string
}

function HtmlLayout(props: HtmlLayoutProps, ...children: any) {
  return (
    <html>
      <head>{props.title && <title>{props.title}</title>}</head>
      <body>{children}</body>
    </html>
  )
}

app.html('/', async ctx => {
  const date = new Date().toISOString().slice(0, 19).replace('T', ' ')

  return (
    <HtmlLayout title={'Заголовок страницы'}>
      <h1>Пример страницы возвращаемой с сервера</h1>
      <p>Текущее время: {date}</p>
    </HtmlLayout>
  )
})

Компонент — это функция, которая первым аргументом принимает атрибуты JSX-элемента, а остальными аргументами — вложенные компоненты.

Имена компонентов принято писать с заглавной буквы.

function MyComponent(props, ...children) {
  return (
    <div>
      Это тело компонента, а это то что в него передано:
      <div>{children}</div>
    </div>
  )
}

Использовать такой компонент можно так:

<div>
  Основной код странциы и компонент:
  <MyComponent
    title={'Привет'}
    subTitle={'Мир'}
    count={200}
    checked
  >
    <div>Первая строка</div>
    <div>Вторая строка</div>
  </MyComponent>
</div>

Таким образом, в функцию компонента MyComponent придет параметр props со следущими занчениями:

{
  "title": "Привет",
  "subTitle": "Мир",
  "count": 200,
  "checked": true
}

В children будет массив элементов

[
  <div>Первая строка</div>,
  <div>Вторая строка</div>,
]

Документация

Серверная генерация старниц