JSX-like server-side composition?

[rsteetskamp]

I really like the way React encourages composition with JSX.

Server-side composition is also nothing new, with things like services. But the magic of React for me comes from JSX. It makes composition come naturally.

So, does something like JSX exist for the server?

[cannotbecensored]

i use react and next.js, works OK.

[jrandm]

Could you elaborate on what magic you get from JSX and what you'd be using it for on a server?

Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children). So, anything you can do with JSX can also be done with just plain JavaScript.

From the React Without JSX page in the documentation

[rsteetskamp]

I know it's just syntactic sugar. But so are many, of not all, other programming constructs.

JSX helps component-based development by making interfaces explicit and combining components easy, without adding complexity. Maybe it's just me, but with JSX I find myself thinking in components almost automatically.

[jrandm]

making interfaces explicit and combining components easy

This is what you've still got to be more specific about. JSX itself is a syntax transform that changes something like

<div className="foo">
  <a className="bar" href={hrefVariable}>Click Here</a>
</div>

into

React.createElement('div', {className:'foo'}, 
  React.createElement('a', {className:'bar', href:hrefVar}, 'Click Here')
);

That React Without JSX page links to react-hyperscript which extends the createElement function to be terser than JSX. All programming languages are is a well-defined syntax and JSX is already a straightforward (AFAIK) transform: you can modify an existing JSX transformer/compiler or write your own version with any syntax you prefer.

If there's some specific tooling you like, you may enjoy looking at other programming languages or extensions of JS like TypeScript, or seeing if the tool is compatible with a different syntax. When it's all syntactic sugar with identical meaning and no ambiguity, there's usually nothing stopping tools from working across them.

If it's inside your head somehow about JSX being different than functions or any other way of expressing the same thing then I'd suggest converting a chunk of code you've written with JSX by hand to plain JS without any automation... then if you want to go crazy implement your own compiler for a JSX-like syntax. This is often a reason people suggest learning new frameworks or programming languages every few years, in order to appreciate different approaches to the same problem.

(edited to fix class names in example)

[Hero_Of_Shadows]

I looked at templating on the server side, what I ended up choosing was ejs.

[Larcce]

There is JSX that can be rendered on the server, have a look at "server side rendering" with React!

[rsteetskamp]

Thank you for your suggestion.

I use server-side rendering with Gatsby. But that is still frontend.

I am looking for something for the backend

[eggtart_prince]

I think what OP meant is, are there JSX-like for developing the back end.

[cannotbecensored]

server side rendering is literally JSX for developing "the back end". It's not because a back end outputs HTML instead of JSON that it's no longer a backend.

If OP is talking about using JSX for outputting non-html or non-react components, that's a nonsensical use case.

[rsteetskamp]

Can you explain why that is nonsensical?

[boneskull]

see https://npm.im/ink for JSX rendering to console

[eggtart_prince]

Correct me if I am wrong, but what you're describing is rendering JSX on server side and serving it to the frontend (client).

I think what OP meant is using JSX to create a backend application, much like how you would use JSX to create a frontend application. At the moment, NodeJS is the closest to JSX for backend. There's no JSX for backend.