DEV Community

Using JSX without react

Kartik Nair on July 25, 2020

I'm personally a big fan of JSX & love the way it allows me to split up & componentize my code. Even though JSX had been around before Reac...
Collapse
 
daviddalbusco profile image
David Dal Busco •

Cool idea to try to use JSX without any framework or compiler πŸ‘ Thank you for the post!

I discovered it with Stencil. It's pretty neat to be able to write Web Components with JSX too.

Collapse
 
kartiknair profile image
Kartik Nair •

Just checked out Stencil it looks great. Thanks for showing me this! I've been trying to check out web components but the other options looked a bit intimidating.

Collapse
 
daviddalbusco profile image
David Dal Busco •

Stencil lead me to use also React, maybe you will follow the other way around πŸ˜‰

Happy my answer was useful and thanks again for your interesting post!

Collapse
 
midasxiv profile image
Midas/XIV •

Good to see an other developer from the UAE. πŸ‘‹

Collapse
 
kartiknair profile image
Kartik Nair •

Heyo πŸ‘‹. It's honestly pretty rare to see someone from the UAE on here lol

Collapse
 
midasxiv profile image
Midas/XIV •

Exactly. I would love to collaborate in someway.

Thread Thread
 
kartiknair profile image
Kartik Nair •

Let's do it! I've dropped you a PM

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€ •

I am a jsx fan as well, but have you seen lit-html I feel like that's a better way to go without React. Also with an IDE or plugin for your editor you can get syntax highlighting pretty easily.

Collapse
 
kartiknair profile image
Kartik Nair •

Yep I've tried it out before one thing that annoys me is having to constantly wrap all jsx in the html function. A good alternative is the the Babel plugin which transforms jsx into htm. Perhaps I'll try and use that more often

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt •

For lit-html, syntax highlighting in VSCode doesn't seem to be as smart as JSX, though.

Collapse
 
kartiknair profile image
Kartik Nair •

You have to download the lit-html extension. It's not as good as jsx Emmet though

Thread Thread
 
adam_cyclones profile image
Adam Crockett πŸŒ€ • • Edited

Is there a template literals html highlighter, might do the job for most things even when not using lit?

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€ •

I'm x vscode and now I use webstorm which is a dream.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt •

It would be nice, if I can make it play well with TypeScript.

There is vhtml, but it isn't yet TypeScript ready.

Akin to html template strings, there is also pug template string; but I guess it can't be properly minified.

Collapse
 
kartiknair profile image
Kartik Nair •

Perhaps give this a go: github.com/nicojs/typed-html