[slmjkdbtl]

I never understand the appeal of JSX over something like

  h("div", {}, [
    h("p", {}, "this is easy"),
    ...list.map((l) => h("li", {}, l),
  ])

With this you automatically get loops, variable interpolation etc without having to invent a compiler and new syntax. Can someone help me understand?

[sim0n]

I would assume that lot of people just find the JSX equivalent a lot more readable and familiar (a matter of opinion, of course.)

  <div>
    <p>this is easy</p>
    {list.map((l) => <li>{l}</li>)}
  </div>

> you automatically get loops, variable interpolation etc without having to invent a compiler and new syntax

To be fair to JSX, you use regular loops, interpolation, etc without any different syntax (`{}` accepts a vanilla JS expression), you just obviously need the compiler step to de-sugar the element tags to `createElement` calls.

[slmjkdbtl]

Yeah the syntax is almost identical to vanilla js, but requiring a compiler is quite cumbersome compared to the advantage it provides imo.

[presentation]

That said if anything pretty much all of the new school frameworks and many of the tools in their ecosystems are already dependent on compilers for optimization anyway, react itself is introducing a compiler in the latest versions.

Anyway I prefer the html looking syntax if anything because it looks like the output on the page. That’s dependent on a project coding style that doesn’t unnecessarily wrap things in components, which for my company’s product I’ve set as a standard.

[littlestymaar]

Requiring a compiler also allows to catch mistakes at compile type, which is much more efficient in terms of development.

[dimal]

Here's my perspective. I never understand how some people could look at the code you pasted and think that's just as good. But different people's brains process information differently. Your example has a lot of punctuation that's very difficult for me to parse quickly. I don't see the DOM structure that's being created unless I manually pick the syntax apart in my mind, but understanding the DOM structure at a glance is far more important to me than whether I need a compiler. For the record, I'm neurodivergent. I hope that helps.

[slmjkdbtl]

Yes I can understand it helps if it looks like DOM on first sight, I'm thinking more about the functional aspect where it can achieve the same thing without requiring a compiler and a new syntax (altho you can argue it's not new syntax just js + html)

[dimal]

It doesn't achieve the same thing, though. Functionally, for the computer, it's the same. But code has two audiences: the computer and the coder who has to read and write it. And from my perspective, the human is more important than the computer. And JSX is more than a convenience at first glance. You read a lot more code than you write. If all of my code was written like this, it would add significant cognitive load, make the code more difficult to reason about and slow me down.

[fredmerc]

Keep going down that logical rabbit hole. You end up with Common Lisp!

[plonq]

I've wondered the same thing. I think one benefit is that it looks like HTML, which means it looks similar to what you see in the browser's DevTools, which makes it easier to compare and debug.

[usrusr]

It also makes it easier to see what it's not: at a glance, the "p" could really be anything until you scan the context. The <p> isn't a string (that on further examination turns out to get used for marking up a paragraph), it is a paragraph demarkation (in vdom, but still).

[codingdave]

For a single file or simple app, sure, your style works fine. But when you get a few hundred components in a complex app, importing them into each other and writing them as JSX tags feels like a simple, easy to understand syntax, as least to me.

And that is what a lot of the pushback against React seems to come down to as well -- it is overkill for simple things. And it is. But different people doing different apps with different levels of complexity... all have different needs.

So it is not as simple as one having appeal over the other. They are different tools for different problems.

[erikpukinskis]

You might be confusing JSX for something else. In JSX you also don’t need new syntax for loops. JSX Is JavaScript, as people like to say.

But to your point, JSX doesn’t really do much. Your h function is basically what React.creatElement does. Google “React without JSX” and you’ll see how it looks.

JSX is just syntactic sugar over React.creatElement. And that is what makes it so nice… there _are_ no special constructs for loops, or variables, or components. They are actual JavaScript loops, JavaScript variables, and JavaScript function.

It makes JSX easier to reason about than most templating languages.

[whichdan]

Elm works a lot like this and it's quite nice.

[65]

Because that code is very hard to read, especially with a complex HTML structure.