Use JSX as a template

Deno has a built-in JSXsupport powered by TypeScript.

By default, JSX files (.jsx, .tsx) will be transformed by React.createElement(). So you must import React on the head of your jsx file.

React is developed in Node.js and Browser ecosystem and there are no official ESM-based distribution. We recommend you get React for deno from https://jspm.io, which is ESModule CDN for CommonJS.

React is written by pure JavaScript and has no type definition by default. Optionally, you can use type definitions for React by annotating import statement with @deno-types. This is Deno's extension method for mapping JavaScript file and type definition. You can find more detail information on the official manual.

Unfortunately, there are no pure ESM type definitions for React 😇. So we are providing patched type definitions for Deno.

Here is the most essential example to use JSX with Servest.

// @deno-types="https://servestjs.org/@v0.30.0/types/react/index.d.ts"
import React from "https://dev.jspm.io/react/index.js";
// @deno-types="https://servestjs.org/@v0.30.0/types/react-dom/server/index.d.ts"
import ReactDOMServer from "https://dev.jspm.io/react-dom/server.js";
import { createRouter } from "https://servestjs.org/@v0.30.0/router.ts";

const router = createRouter();
router.handle("/", async req => {
  await req.respond({
    status: 200,
    headers: new Headers({
      "content-type": "text/html; charset=UTF-8"
    }),
    body: ReactDOMServer.renderToString(
      <html>
        <head>
          <meta charSet="utf-8" />
          <title>servest</title>
        </head>
        <body>Hello Servest!</body>
      </html>
    )
  });
});
router.listen(":8899");