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.

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

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

Just one example: the class attribute in HTML vs className in JSX.

It’s not that it’s complicated, you just use one or the other. But it’s very indicative of what’s going on under the hood: despite looking exactly like HTML, JSX isn’t creating HTML. It’s creating elements via JavaScript APIs.

Narrative violation: className and friends are NOT a React thing! They are a standard DOM property!

https://developer.mozilla.org/en-US/docs/Web/API/Element/cla...

The only "debatable" thing that React does is to use the names from the JS API in JSX (where some people would expect names from the HTML API because JSX looks like HTML)

That’s basically what I said, though? The point is that JSX is made to look like HTML so you think you’re writing HTML but you’re not, you’re using a JS API.

Also I had to laugh at the sibling replies:

> Narrative violation: className and friends are NOT a React thing!

> FWIW, the className prop is a React thing not a JSX thing

Don’t try to say it doesn’t cause confusion!

JSX has an Async "tag"...

Let that sink in.

<Async></Async>

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.

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.

> Here in the intro it doesn't even explain that you need to use className instead of class.

Again, because `className` is not React specific, it's JS DOM API specific. Sounds like the real problem is that people start learning React without fully learning the JS DOM API itself, then they get confused when things like `className` or `htmlFor` show up.

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

You're not writing HTML. That's the entire gist of the parent comment. It looks like HTML only insofar as HTML is a type of XML. But what you're really doing underneath is something like:

    const el = document.getElementById('item');
    el.className = el.className === 'active' ? 'inactive' : 'active';

JSX is simply syntactic sugar on top of DOM operations like that (albeit within the context of a renderer like React; Svelte eschews a renderer entirely and truly is creating DOM operations like above). In React, JSX would be direct syntactic sugar for:

    React.createElement('div', null, `Hello ${this.props.toWhat}`);

> It is no longer standard

It is standard, it is in the Element API, I don't know how it can get more standard than that. Again, it sounds like the problem is that people really should learn JS and DOM separately before ever touching React. Sadly, too many beginners in web dev and programming in general gravitate towards a React/Node stack, which are good production tools, but they really ought to know how we got there.

Now why I don't use DSLs is because they don't use the standard of the JS DOM API, they use their entirely new creation, like v-for or #if :else. That is why I consider Vue or Svelte templates to be DSLs while not JSX, because the latter is fully compliant with the Element spec, and it uses plain JS/TS, unless you define a DSL to be so broad as to be literally any transformation of code, which, well, I can't practically agree with.

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

Depends on how much you read it

> JSX is a DSL that looks almost like normal HTML, but differs in small uncanny-valley ways.

My point was not that its a common misconception that JSX has something to do with HTML - therefore comparing it to HTML and then being surprised that it isn't, shouldn't come as a surprise.

Also it does not differ in small uncanny-valley ways. Just one example on the syntax level: HTML has real self-closing elements (e.g., `<img>`) while JSX requires you to explicitly self-close (e.g., `<img />`). In HTML you also cannot explicitly self-close any element (e.g., `<div />` will just be parsed like `<div>`), while in JSX you can. I don't even want to start about whitespace etc. - those things are actually found / listed in any decent JSX tutorial.

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.

> 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}`);

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.

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

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

No, you're not. There is no JSX of any sort in the example the parent commentor provided, nor in the approach that they present, even outside of that specific example.

The first parameter is the component, which is string containing the HTML tag name for built-in components which are basically just HTML elements, such as div, span, img, h1, etc, but the actual component (a function or a class) for any other type of component. The second parameter is the props. The third parameter is the children, which happens to be a string in this case because the content of the h1 in the example is pure text, but if you'd want anything more complicated as children, you couldn't put in a string and pass that, you'd provide it more React.createElement -provided values.

React at it's core is a function (or set of functions) that interpret strings like "h1" into DOM elements in a browser.

JSX is a shorthand for writing those function calls. <h1> becomes React.createElement("h1"). Sure you are still largely using HTML element names, but that's only because people don't really use JSX for anything else. The whole point is that it's easier to write JSX than the underlying function calls.

You can use JSX to target things other than DOM by supplying your own function instead of React.createElement(). Here's an example of an express web-server using JSX: https://betterprogramming.pub/how-to-create-a-web-server-wit...

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.

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

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

Other times not so much.

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

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.

Same, this in my opinion was one of React's biggest "innovations".

Why is it such a strong factor for you? I see this point being made every time someone mentions a framework that doesn't use JSX.

But frameworks are so complex nowadays! Learning something the size of React, whatever templating language it uses is the least of my worries. Especially because calling it a DSL is a bit of an overstatement, it's always just HTML with a few custom tags/attributes that let you inject values, use loops and conditionals.

For me it’s cause there exists already perfectly capable and better ways to do these operations.

I don’t need or want to work in an environment that reinvents how to map over a list.

Frameworks and libraries have their own APIs like reacts hooks or solids signals. Yes these can be involved but they are different from the generalized solutions that the framework reinvents with the custom properties in alpine or the looping I mention

An API exposing the capabilities of a framework is different than reinventing data attributes, looping etc

Seriously. That `x-show="open"` example is so ambiguous. Is it setting a `hidden` attribute? Setting CSS `display`? Or `visibility? Or is it actually removing it from the DOM? If so, is it deleting the node or just holding on to it?

I agree. Though as others have said, JSX is indeed a DSL, but the type checking is unmatched. Other DSL's feel old school in comparison.

React/Solid etc also invent their own DSL, each js framework just does it their own way.

hard agree. also especially brutal if you have to enclose it in strings like this, meaning you need to write an extension/language server to get this to have any semblance of a good developer experience

So 10 years ago you wouldn't use jQuery?

HTML was never intended to display dynamic content.

Mixing HTML with JS for dynamic rendering is as controversial as using DSL.

JSX is wheels and engine attached to a horse. It's nice to have a faster horse, but it doesn't mean cars are a bad idea.