[aposm]

That's precisely my issue with React though - JSX is a DSL that looks almost like normal HTML, but differs in small uncanny-valley ways. Sure, it's fine once you're used to it. But it's very much not standard HTML.

[nickbauman]

I was just going to say this too: JSX is a DSL. And a particularly screwy one!

[k4rli]

What's screwy about it? In my experience it's been painless to switch between html+vanillajs and React projects.

[FlorianRappl]

That is just wrong on many levels. JSX brings an XML-like notation to JS. It has nothing to do with HTML. react-dom couples your React DOM to the real DOM - thus allowing you to use special JSX elements that create DOM elements. But then you / React interacts with them using the DOM API - not HTML source code.

Things like `htmlFor` or `className` should not be confusing - these are the official DOM properties. `style` in its DOM API also has an object-oriented API and not a string. If you are confused by these things (className vs class, ...) then potentially you started learning JSX from a completely misleading / wrong point.

I know most articles on React / JSX get that wrong, but this non-sense has to stop. After all, you do not write React in the browser because you want to generate HTML - you do write it to manipulate the DOM. On the server, you may want to generate HTML and then this can be misleading (true), but this has not been the main objective.

[cooperadymas]

Telling someone they learned something wrong maybe isn't the best approach when trying to explain why something should not be confusing. Especially when it's a widely held view, maybe the learners are not the problem.

Most people learn JSX when they learn React. It was created by Facebook for React, after all. What does the React docs teach about className?

https://reactjs.org/docs/introducing-jsx.html

Here in the intro it doesn't even explain that you need to use className instead of class. It uses it with no explanation. Then it throws in a line about camelCasing and assumes that you understand why it changed.

Surely the JSX in depth page explains it.

https://reactjs.org/docs/jsx-in-depth.html

It does even less.

https://reactjs.org/docs/dom-elements.html#classname

Finally! In a page that seemingly has nothing to do with JSX we get told to change how we write HTML, but we're not even told why. (The htmlFor section tells us.) No wonder people are confused.

Yes, className is a property of the Element interface but it is not the attribute used when writing HTML. You're still changing how you write HTML. It is no longer standard. That is the point people are making here - JSX introduces enough edge cases that you must learn that it adds equally as much mental overhead as the template DSL for Alpine or Vue. Even if people understand the reasoning and it is not confusing, it's still a shift.

[culi]

Aren't you simply reinforcing the main point GP made? That it's yet another DSL to learn

[afavour]

I strongly agree but looking at the Alpine examples it feels like the worst of both worlds to me. At least JSX allows code checking etc, putting code inside HTML attributes has a real ick factor for me.

[idoubtit]

> That's precisely my issue with React though - JSX is a DSL

React does not require JSX, so it's a bit strange to raise the same issue with JSX as with the DSLs of Vue, etc.

If one wants to avoid JSX, it's always possible to write pure JS:

    return (<h1 className="sc">Hello {title}</h1>);

    return React.createElement('h1', {className: "sc"}, `Hello ${title}`);

[hbrn]

Guess what? Vue can also be used with render functions (or even JSX) instead of templates.

But JSX is a standard way to work with React. And Vue templates are a standard way to work with Vue.

[j45]

Is the point of the frameworks not to write less JavaScript?

[savy91]

You are still writing JSX in a string, aren't you?

[tshaddox]

I’d be totally fine with using React without JSX, other than the slight hassle of losing all that muscle memory from years of using JSX.

[mejutoco]

Yes, but jsx is compiled/transpiled/transform, so it is never exposed in the served html. The end-user just sees normal html.

[j45]

Feels a like a lot of work sometimes to still output html at the end of the day.

Other times not so much.

[frankfrank13]

react doesn't actually use/require JSX right? just the typical way of writing react does (or at least this used to be true)

[spiderice]

I mean technically you're right.. but it's more useful to talk about it in the way that basically everyone is using React.. with JSX.