Applications on SolidJs

Preparation of the HTML markup in index.tsx:

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

app.html('/', async ctx => {
  return (
    <html>
      <head></head>
      <body>
        <SolidComponent title="Hello World!" />
      </body>
    </html>
  )
})

Implementation of the component SolidComponent.tsx:

// @shared

import { jsx, createSolidComponent } from '@app/solid-js'

export const SolidComponent = createSolidComponent((props: SolidComponentProps) => {
  return (
    <div>
      <div>Component on SolidJS</div>
      <div>Passed title: {props.title}</div>
    </div>
  )
})

interface SolidComponentProps {
  title: string
}

Key points to note:

A component can use other components. However, the first component that is inserted into the HTML page must be wrapped with the helper method createSolidComponent, which will connect all necessary dependencies for working with SolidJS.
The HTML markup must include a head tag. All necessary dependencies for working with SolidJS will be rendered within it. If the head tag is missing, the SolidJS component will not function.
All SolidJS components must be accessible on the client side. To ensure this, the first line should include the comment // @shared.

Check out the detailed documentation for the library to learn more about SolidJS.