While optional, Keywork uses React as its primary HTML templating engine.

Peer Dependencies

If you haven't already, make sure to add the React peer dependencies:

$ yarn add react react-dom

$ npm install --save react react-dom

Import Maps are recommended to avoid long import URLs:

{
  "imports": {
    "react": "https://esm.sh/react@18.2.0",
    "react-dom": "https://esm.sh/react-dom@18.2.0",
    "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
    "react-dom/server": "https://esm.sh/react-dom@18.2.0/server",
    "react-dom/server.browser": "https://esm.sh/react-dom@18.2.0/server.browser",
    "react/jsx-runtime": "https://esm.sh/react/jsx-runtime"
  }
}

Usage

Route handlers defined on an instance of Keywork#Router.RequestRouter | RequestRouter can return a React component, Keywork automatically converts the content into a streamed response.

import { RequestRouter } from 'keywork/router'

const app = new RequestRouter()

app.get('/', () => <h1>Hello from Keywork! 👋</h1>)

interface GreetParams {
  firstName: string
}

app.get('/greet/:firstName', ({ params }) => {
  return (
    <div>
      <h1>Hello there! {params.firstName}</h1>
    </div>
  )
})

export default app