Preact: Without BabelJS - more of a tools question

[CoderJason123]

I am trying to eliminate my need / dependency on transpilers. I've run into a lot of issue during development, time consuming issues, and I frankly don't like this paradigm. But, it is what it is. I know you can do regular javascript classes and not do JSX.

Is there an easier way to convert primarily the render method, to plain javascript, than perhaps the method i was doing of looking at the compiled jsx which gave me this?

I know there is a syntax, for which I need to find a good link on the right format, but frankly, I'd love to find a way to take my jsx render html and put it in the H hyperscript format without too much hassle.

I realize this is not an issue with preact more of a tools question, to use in conjunction with preact. Thank you kindly.

ContactConnect.prototype.render = function render() {
return (0, _preact.h)(
'section',
{ 'class': 'container' },
(0, _preact.h)(
'div',
{ 'class': 'row' },
(0, _preact.h)(
'div',
{ 'class': 'six columns' },
(0, _preact.h)(
'div',
{ 'class': 'mycard' },
(0, _preact.h)(

[yaodingyd]

If you want to use without JSX, using h function inside render is just like using 'React.createElement'. See demo

The only difference is that preact h doesn't take a third argument for children, but treat children as one of the props

[CoderJason123]

Thank you -- so i am familiar with the syntax. But the effort level to convert several jsx pages by hand is not currently worth it to me. I'd like to find a tool to assist me.

[yaodingyd]

Converting JSX to h is what babel does(among other things). I don't think there are other tooling options does this.

[CoderJason123]

You might be right. It looks like Buble gives me a pretty clean format vs Babel. I think this will serve my needs. I can run my jsx thru here and use the end result to a js file. I just hate the reliance on so much tooling required for simple old javascript! Thank you!

[Kanaye]

Preacts h actually supports children as additional parameters but that doesn't really matter here.

@CoderJason123 if you need to only support browsers that support template literals you could use hyperx.

Here an example using h(), h() with rest params as children and a tagged template using hyperx.