DEV Community

Cover image for JSX Unchained: Make a template engine without React

JSX Unchained: Make a template engine without React

Riccardo Tartaglia on October 18, 2023

Hello, developer. Today, let's talk about JSX, the love-hate relationship of all React developers. Many hate it, many love it, but have you ever w...
Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto •

Kudos! 🎉 This is very interesting to play with, certainly a good case study to understand better the inner works of babel + webpack!! Thanks for that 😁. But for a practical application I still would go with solid.js

Collapse
 
argonauta profile image
Riccardo Tartaglia •

Great! +1 for Solid.
Of course this is not a "production ready" project.

Collapse
 
aquaductape profile image
Caleb Taylor •

There's also solidjs, where JSX elements compile to real DOM elements, so console.log(<div>hi</div>) actually logs that div element instead of a function when called creates the element.

Collapse
 
argonauta profile image
Riccardo Tartaglia •

Yeah! This article is inspired by Ryan Carniato and what the Solid team had done with JSX.

Collapse
 
harrybawsac profile image
Harry Bawsac •

This is pretty funny! I’ll try it out, but I’m missing how to use it as part of something bigger. Thanks for sharing.

Collapse
 
argonauta profile image
Riccardo Tartaglia •

This is a method to compose the "view" layer of your project, you can combine this system with any type of JS library for DOM manipulation or reactivity...Maybe you can try to make a new JS framework! :D

Collapse
 
harrybawsac profile image
Harry Bawsac •

Just ran your example and works perfectly! Somehow I really like this idea.

Haha, making yet another JS framework... I don't think the world needs another one 😅

Thread Thread
 
rjjrbatarao profile image
rjjrbatarao • • Edited

if you heared of alpinejs and htmx this it the most compatible one with this new approach :), and for the css we can use tailwind

Collapse
 
rjjrbatarao profile image
rjjrbatarao • • Edited

omg amazing! i was looking out a way to integrate alpine.js and htmx with something like react but i dont need react because alpine and htmx has its own framework. one question though on how to add the attributes to jsx-runtime, sample works perfectly but attributes are lost

Collapse
 
argonauta profile image
Riccardo Tartaglia •

The jsx-engine that I showed in the article is a minimal example.

You can start from here and write an engine that can preserve HTML attributes, or transform JSX props to HTML attributes.

Collapse
 
rjjrbatarao profile image
rjjrbatarao •

that's what i thought, I've already made changes to the jsx-runtime.js to make it work thank you