4 ms·

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

by msoad 3y ago

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

toastal 3y ago
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.
- deleted 3y ago
  [deleted]
hobofan 3y ago
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 https://babeljs.io/docs/babel-standalone#script-tags [1]: https://legacy.reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx https://legacy.reactjs.org/docs/add-react-to-a-website.html#...
- davnicwil 3y ago
  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 3y ago
    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".
postdb 3y ago
There is the 1k jsx lib: https://nanojsx.io 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 3y ago
  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-jsx.h 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/samples/preact/clock.htm https://gitlab.com/sciter-engine/sciter-js-sdk/-/blob/main/s...
anton96 3y ago
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 https://github.com/developit/htm
- throwaway290 3y ago
  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 3y ago
    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 3y ago
      Thanks! Interesting stuff

by msoad 3y ago

toastal 3y ago

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.

deleted 3y ago
[deleted]

hobofan 3y ago

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 https://babeljs.io/docs/babel-standalone#script-tags [1]: https://legacy.reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx https://legacy.reactjs.org/docs/add-react-to-a-website.html#...

davnicwil 3y ago
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 3y ago
  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".

postdb 3y ago

There is the 1k jsx lib: https://nanojsx.io 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 3y ago
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-jsx.h 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/samples/preact/clock.htm https://gitlab.com/sciter-engine/sciter-js-sdk/-/blob/main/s...

anton96 3y ago

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 https://github.com/developit/htm

throwaway290 3y ago
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 3y ago
  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 3y ago
    Thanks! Interesting stuff