Can we use React with JSX in browser without any compiler using this? I'm sure p...

toastal · on May 3, 2023

React is already often slow enough. Pushing compilation steps to the client is inefficient, especially when you consider that JSX compiles to basic functions and you could have used those functions since the first version.

hobofan · on May 3, 2023

That has been possible for some time with Babel[0] and was also referenced in the old React docs[1]. But, as stated there and in the sibling comment here, it's not really suitable for production use.

[0]: https://babeljs.io/docs/babel-standalone#script-tags

[1]: https://legacy.reactjs.org/docs/add-react-to-a-website.html#...

davnicwil · on May 3, 2023

From the react docs: "it makes your website slow and isn’t suitable for production"

I don't really like blanket statements like this or think they are appropriate. It's so counter to the spirit of the web.

Like, what does 'slow' mean in an absolute statement like this? It depends entirely on the system and usecase. It's just code at the end of the day. If it works for you, go for it!

knute · on May 3, 2023

It's interesting that this is your perception of "the spirit of the web" whereas other people are going to say that requiring JavaScript at all is "counter to the spirit of the web".

anton96 · on May 3, 2023

They are many libraries that use tagged template string to allow this, the most interesting to my eyes is the one made by preact dev. It's just named htm [0], it's made by preact but it can totally be used with react.

The most interesting thing of this one is that uses no custom syntax for js variable, so @attribute something when you must pass an object as props.

0. https://github.com/developit/htm

throwaway290 · on May 3, 2023

If it doesn’t have fragments, how do you implement something equivalent to this when mapping over items and every item has to output multiple roots?

    <React.Fragment key={idx}>

anton96 · on May 3, 2023

You can import the Fragment component of the React package or stack them directly, it works too. Normally, the empty bracket syntax should work, they have a few issues closed and open that talk about it in their repo.

throwaway290 · on May 4, 2023

Thanks! Interesting stuff

postdb · on May 3, 2023

There is the 1k jsx lib: https://nanojsx.io

Then again, if we are at this road now again, maybe they should just bring a lighter version of e4x as part of ES/JS.

c-smile · on May 3, 2023

In Sciter I did just that - JSX is an integral part of JS compiler - patched version of QuickJS : https://gitlab.com/c-smile/quickjspp/-/blob/master/quickjs-j...

So in Sciter this works out of the box:

   <html>
     <body/>
     <script>
        function HelloWorld() {
          return <p>Hello <b>world</b></p>;
        }
        document.body.append(<HelloWorld/>);
     </script> 
   </html>

JSX expressions are compiled to calls of JSX(tag,atts,kids) function. That function can be redefined enabling different libraries to use JSX in the way they want, here is an example of using JSX with PReact:

    import { h, render, Component } from 'preact';

    JSX = h;   // let's use PReact::h() as a driver of JSX expressions

See https://gitlab.com/sciter-engine/sciter-js-sdk/-/blob/main/s...