Hacker News Reader

Comment by msoad | Hacker News Reader

Can we use React with JSX in browser without any compiler using this? I'm sure people have tried it but I can't find it. I just want an `index.html` file that I can write React code in it and play around with things...

View on HN

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.

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#...

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!

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".

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

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}>

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.

Thanks! Interesting stuff

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.

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...

Reply on news.ycombinator.com