Table of Contents

1. Challenge

   Introduction

   Overview

   In this Code Lab, you'll be responsible for modifying a Hono application to enable support for JSX syntax. Luckily, Hono makes it easy to enable JSX with minimal overhead, allowing you to render type-safe components directly within Hono routes.

   ---

   Scenario

   For this lab, you will start with a minimal bootstrapped Hono application. Hono is a web application framework, similar to Express or Next.js, that natively supports Typescript. It is designed to be lightweight and incredibly fast, utilizing the Bun runtime(although it can work with Node and many others as well) by default.

   Throughout the course of this lab, you will configure the Hono application to enable usage of JSX, which you will then leverage to create a simple JSX component to be rendered on the Hono server.

   ---

   Additional Info

   There is a solution directory you can reference at any time to check your implementation. To run your Hono server, utilize the command bun src/index.tsx within the Terminal.

2. Challenge

   Configuring JSX

   File Extension

   The first thing to note is that, since Hono is a Typescript-native environment, file extensions will typically end with the .ts format. However, if you want to utilize JSX to be rendered on the Hono server, you need to change the file in question to use the .tsx file format—even if you enable JSX in the project configuration. For this lab, src/index.ts has already been changed to src/index.tsx for you, but make sure you always remember this.

   ---

   Modify tsconfig

   Now that the index.tsx has the correct extension, head over to tsconfig.json to enable JSX.

   To do so, you will need to add the options "jsx": "react-jsx" and "jsxImportSource": "hono/jsx" after the "strict: true" option. The result should look like the following:

   {
     "compilerOptions": {
       "strict": true,
       "jsx": "react-jsx",
       "jsxImportSource": "hono/jsx"
     }
   }
   

   Once this is complete, JSX should now be enabled within your Hono project. As long as the file you are working with also has the .tsx file extension, it will support JSX.

   ---

   Demonstrating JSX

   Head over to src/index.tsx. This file is simply a bootstrapped file created by Hono, with the only modifications being some commented code snippets that you will work with in a bit.

   First, you can run the file using the command bun src/index.tsx in the Terminal tab. Then, open the Web Browser tab to view the output. You should see the text Hello Hono!.

   You can also view the output at the following URL: {{localhost:3000}}

   Next, you'll need to edit this file to implement and display JSX components. Start by importing the functional component type at the very top of the file with the following line:

   import type { FC } from 'hono/jsx'
   

   After you've imported FC, there are 3 components and structures you will need to implement. They are Layout, DashboardProps, and Dashboard.

   Layout Instructions

   1. At the corresponding comment, define a `const` variable called `Layout`. It should be of type `FC` and take `props` as a parameter within an arrow function. 2. Uncomment the given JSX content and place it within this arrow function.

   DashboardProps Instructions

   1. At the corresponding comment, define a `type` called `DashboardProps`. It should be an object with a `user` and `notifications` properties. 2. `user` should be of type `string`, while `notifications` should be an array of object of type `{ title: string; isRead: boolean }[]`

   Dashboard Instructions

   1. At the corresponding comment, define a `const` variable called `Dashboard`. The type of this variable should be `FC` and it should also be an arrow function accepting the parameter `{ user, notifications }`. 2. Within this arrow function, define a `Layout` element, which you implemented earlier. 3. Uncomment the given JSX content and place it within this `Layout` element.

   ---

   After you've implemented all these elements, you will need to modify the default route to properly display these JSX components.

   Render Instructions

   1. Head to the bottom of `src/index.tsx` and remove the basic `app.get()` route. 2. Uncomment the given `app.get()` route. 3. At the end of this route handler, right after the `notifications` variable, add a `return` statement:

   c.html(<Dashboard user={user} notifications={notifications} />)`.
   

   This statement ensures that your Hono route renders your Dashboard component with the pre-defined user and notifications props.

   You can now see your JSX components by starting the server. Run the command bun src/index.tsx in the Terminal, and open the Web Browser again to see the output.

   Don't forget to restart the application if it was still running. Press Control+C to stop it, then restart it to see the updated changes.

   If all is working properly, then great job! You've successfully enabled JSX support in a Hono application.