NetzoJSX/TSX
JSX is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. It is commonly used in libraries and frameworks such as React for building user interfaces. Netzo supports JSX (and TSX) out of the box without the need for an additional transformation step.
Requirements to use JSX/TSX
Set-up JSX in TypeScript by placing a
/** @jsx h */comment at the top of the file. This tells the TypeScript compiler to use the h function as the JSX factory, as JSX is not a part of the JavaScript language and is not recognized by the TypeScript compiler by default.Import a
hfunction of your choice within your code. Thehfunction is a helper function that is used to create virtual DOM elements in a way that is similar to how you would create elements in the real DOM. It is typically defined in a library like Preact, which provides a lightweight implementation of the virtual DOM concept.Use a
.tsxor.jsxfile extension. This is required for Deno to recognize the file as a file that contains JSX/TSX.
Refer to the Deno or Deno Deploy documentation for more information.
Automatic JSX/TSX transformation is not yet supported
In the future, you will be able to set up automatic JSX/TSX transformation once in the compilerOptions of deno.json file, instead of having to add the /** @jsx h */ comment and an import of the h function in every file.
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "preact"
}
}{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "preact"
}
}The following basic examples demonstrate common use cases of working with JSX/TSX.
Server side rendering with JSX
A HTTP server that renders a HTML page on the server with JSX (using preact).
CLI Netzo
/** @jsx h */
import { serve } from "https://deno.land/[email protected]/http/server.ts";
import { h } from "https://esm.sh/[email protected]";
import { renderToString } from "https://esm.sh/[email protected][email protected]";
function handler(_req: Request): Response {
const page = (
<div>
<h1>Current time</h1>
<p>{new Date().toLocaleString()}</p>
</div>
);
const html = renderToString(page);
return new Response(html, {
headers: { "content-type": "text/html; charset=utf-8" },
});
}
serve(handler);/** @jsx h */
import { serve } from "https://deno.land/[email protected]/http/server.ts";
import { h } from "https://esm.sh/[email protected]";
import { renderToString } from "https://esm.sh/[email protected][email protected]";
function handler(_req: Request): Response {
const page = (
<div>
<h1>Current time</h1>
<p>{new Date().toLocaleString()}</p>
</div>
);
const html = renderToString(page);
return new Response(html, {
headers: { "content-type": "text/html; charset=utf-8" },
});
}
serve(handler);