Use Vite for JSX without React

If you want to build vanilla JavaScript apps, JSX would be a useful tool. Vite makes it easy.

It’s been possible to use JSX without React for some time, but the tooling setup was awkward. This article from 2020 shows a way to implement it yourself, but since then the options have blossomed. The powerful tool Vite means we can entirely avoid the complexities of Webpack and Babel.

JSX offers many possibilities for a vanilla JavaScript developer, because it is such a convenient way to represent HTML in JavaScript, making it possible to easily return DOM elements directly from JavaScript functions like this:

const data = { name: 'Luna the Cat', age: 2 }
return (
  <img src="/img/cat2.jpg" alt="cat">
  <p>This is {data.name} who is {data.age} years old.</p> )

This means you can have all the functions and HTML that work with a certain page component together in a single .jsx file, which is a really useful way of working. It can also be a big help in server-side rendering situations.

If you’re not familiar with Vite, I would say it is time to check it out. It drastically reduces the configuration involved for setting up modern scenarios with all kinds of code, and it makes implementing React-free JSX a snap.

To make this work — and have a fully running dev server with hot module reloading you can start working with in under 5 minutes — here’s what you do:

npm init @vitejs/app

When it asks for a project name, type

vite-jsx

When it asks you to select a framework, choose ‘vanilla’ (NB: this means no framework — yay!)

Next it asks if you want JavaScript ot TypeScript, and that is up to you but I’m going with JavaScript.

Now, just:

cd vite-jsx
npm install
code .

and your project will open up in vscode.

In order to use JSX for vanilla JavaScript, you just need to make a couple of changes to the project. First, install this package, which is what actually converts the JSX to DOM.

npm install start-dom-jsx

Vite is so confident in its lack of config that the vanilla template doesn’t even have a config file. But for this, we do need one.

touch vite.config.js

Edit the file, it just needs to contain these lines, which configure ESBuild to use the newer version of JSX transform:

export default {
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
}

And at this point we are really done. When you create a JSX file, just make sure that instead of importing React, you have this at the top of the file:

import { h } from 'start-dom-jsx'

If you also want to use Fragments you will need to have

import { h, Fragment } from 'start-dom-jsx'

Now you can write a .jsx file. You can just treat it like JavaScript and import it in your main.js file like this:

import component from './cool-component.jsx'

or use it in any other way you see fit, because this is vanilla JavaScript, and being able to use JSX without React gives you the power to make it work your own way. If you like this approach, but want to use a more React-like framework to support your work, take a look at Preact — there is also a Vite preset available for that.

You can view a very simple demo project on github.