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