When you want to generate html on the server you will need some template engine.
You can use, EJS, handlebars or many others, but I prefer a template engine where I can create components instead of working with partials and layouts.
First we will create a simple Deno application to get started.
Put this code in main.js:
You can start this with deno run --allow-net ./main.js. Now you can open your browser on localhost:8000 and view the html page.
The goal is to replace this html template string with JSX components.
It’s time to create our first component pages/home.jsx.
For now this is a single component with the complete html.
React 17 is at the moment of writing not yet supported. The problem is that in React 17 the JSX is translated to something new. It isn’t React.createElement anymore to avoid the need for importing React.
I first tried to load React 16 from Skypack CDN, but that doesn’t work because of this issue
It is also possible to use Preact instead of React.
Since JSX is translated to React.createElement() we have to replace React with some other class.
There are 2 ways of doing this.
with a JSX pragma
The first line is the JSX pragma. This means to use h instead of React.
But you can also use tsconfig.json so you don’t need the pragma everywhere.
You have to run Deno with the link to the config deno run --config ./tsconfig.json ...
The render function in main.js looks like this:
In the final version I created extra components for the layout and for the button.
I hope this will get you started with JSX in Deno. This is just a simple example and there is a lot to improve like using deps.ts and Typescript. But I try to keep this example focussed on JSX.