How to run Hono JSX files in Hono?

[fzn0x]

You can simply run the .tsx file to run the server with JSX. It also helps developers in VSCode to enable the React syntax. (don't forget to change your VSCode language mode to TypeScript React)

(package.json)

  "scripts": {
    "dev": "bun run --watch ./src/index.tsx",

// index.tsx
import type { PropsWithChildren } from "hono/jsx";
import { Hono } from "hono";

const app = new Hono();

type FileManager = {
  title: string;
  paths?: string[];
};

function FileManager({ title, children }: PropsWithChildren<FileManager>) {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
}
app.get("/static", (c) => {
  return c.html(<FileManager title="File Manager" />);
});

Good luck!

[fzn0x]

You can simply run the .tsx file to run the server with JSX. It also helps developers in VSCode to enable the React syntax. (don't forget to change your VSCode language mode to TypeScript React)

(package.json)

  "scripts": {
    "dev": "bun run --watch ./src/index.tsx",

// index.tsx
import type { PropsWithChildren } from "hono/jsx";
import { Hono } from "hono";

const app = new Hono();

type FileManager = {
  title: string;
  paths?: string[];
};

function FileManager({ title, children }: PropsWithChildren<FileManager>) {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
}
app.get("/static", (c) => {
  return c.html(<FileManager title="File Manager" />);
});

Good luck!