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.

Thread Thread
 
umutakyol profile image
asdsadasf

Why?

Thread Thread
 
adam_cyclones profile image
Adam Crockett πŸŒ€

You know what they say, be prepared. This is why.
dev.to/adam_cyclones/moving-from-v...

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