ReactUtils

Module Overview

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

Run in the root of your project.

$ yarn add react react-dom

NPM

Run in the root of your project.

$ npm install --save react react-dom

Deno

Import Maps are recommended to avoid long import URLs:

./your-project/import_map.json

{
  "imports": {
    "react": "https://esm.sh/[email protected]",
    "react-dom": "https://esm.sh/[email protected]",
    "react-dom/client": "https://esm.sh/[email protected]/client",
    "react-dom/server": "https://esm.sh/[email protected]/server",
    "react-dom/server.browser": "https://esm.sh/[email protected]/server.browser",
    "react/jsx-runtime": "https://esm.sh/react/jsx-runtime"
  }
}

Usage

Route handlers defined on an instance of 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

Usage

Node

import * as ReactUtils from 'keywork/react'

Deno

import * as ReactUtils from 'https://deno.land/x/keywork/react'

Browser/ESM

let ReactUtils = await import('https://esm.sh/keywork/react')

Interfaces

• ReactRendererOptions