JSX gives us a great way to handle HTML-based templating in JavaScript. Did you know you can use it without React?
Published in · 4 min read · Jul 29, 2020
--
I’m personally a big fan of JSX and love the way it allows me to split up and componentize my code. Even though JSX had been around before React, it wouldn’t have been nearly as popular without React picking it up. However, we can actually use JSX without React, and it’s not that difficult either.
The way React works is by configuring your bundler to convert JSX into calls to a createElement function. So for example:
However, most bundlers allow you to choose your own JSX pragma (function that will be in the place of React.createElement). For example, if you were using Babel, you could specify what function to use through a simple comment like this:
And now Babel would pass those some parameters to myJsxFunction. Now all we need to do is create a function that takes these parameters and creates real DOM nodes that we can add to our DOM. So let’s get started. (If you need a code sandbox to play around in, you can use this static template using standalone Babel.)
DOM nodes are created using the document.createNode() function. It requires just a tag name, so a good place to start would be with that:
Now that we have a DOM node, we have to actually add the attributes provided to us. These can be anything like class or style. So we’ll just loop through all the provided attributes (using Object.entries) and just set them on our DOM node:
This approach has one issue, though. How do we handle events? For example, let’s say I have this JSX:
Our function would set onClick as a normal attribute with the callback set as actual text.
Instead what we can do is check if our attribute starts with on and is in the window scope. This will tell us if it’s an event or not. For example, onclick is in the window scope; however, onfoo isn’t. If it is, then we can register an event listener on that node using the part of the name without the on.
This is how it looks:
Nice! Now all that’s left to do is to add all the children to the parent. However, you can’t append a string to a DOM node, so in case the child isn’t also a node, we can create a text node and append that instead:
However, this quickly runs into issues with deeply nested elements and also elements that are created using array maps. So instead, let’s replace that part with a recursive appendChild method:
And now we can use this in place of our old method:
It works! Try it out. We can now render basic JSX to the DOM:
And you should see your JSX rendered out perfectly. There are a few more things we can add, though; for example, in React, elements are usually functions. Implementing this will allow us to nest components and take full advantage of props, which are a crucial feature of JSX.
Thankfully, it’s pretty simple to implement. All we have to do is check if the tag name is a function instead of a string. If it is, we don’t do any of the other stuff but rather just call the function. Here’s how it looks:
And now let’s try that out:
As you can see, implementing that allowed us to use props as well! You can actually say we’re done here, but there’s one more feature I want to implement: fragments. For those not familiar, fragments are a way to have empty containers in JSX, and they use empty tags. Example:
But for this to work, we need a function that takes this fragment, and instead of creating a DOM element, it just returns its children. Here’s how it looks:
It works out of the box because of our recursive appendChild method.
And that’s it! We’ve done it. A super simple JSX-to-DOM function that lets us use the power of JSX without having to use rReact specifically. You can find the source code for it in this CodeSandbox.
I hope you found this article helpful, I also hope you find some cool ways to use the power of JSX. I actually learned about all of this while working on Dhow, which is a JSX-powered static-site generator for Node.js. It basically lets you write Next.js style code but converts it to static HTML without any hydration qualms.
