Yes, the JSX is compiled (or "transformed") to JavaScript which creates components internally in React:

https://babeljs.io/repl/#?experimental=true&evaluate=true&lo...

I felt the same as OP when I first started using React, although it makes more sense now I've played with it, I'm still not sure about mixing concerns (code and view) in the same file. Especially when you start talking about CSS too...

https://speakerdeck.com/vjeux/react-css-in-js

I hadn't heard about JSX before so I went to your link to check it out. This is just one of the most off-putting introductory statements I've ever read:

    JSX is a JavaScript syntax extension that looks similar to XML.

Don't we all hate XML? How can you possibly even go on reading about this technology further if it's introduced like that.

XML is still used as a the standard for building layouts - on the web and on Android, and probably many other places. It can be much more readable than code for nesting components.

I believe people hating XML has more to do with using XML as a data transfer format, right? I'm happy using XML for Android layouts but can't imagine using it as a replacement for JSON - which I think is where most of the hate comes from.

Good point - Now that you said that, I don't mind using XML for defining UIs but I absolutely hate to use for data transfer.

XML is fine. XHTML is XML, after all. The issues with XML are the kind of XML that is often created with it, with namespace nightmares, endless embedded tags, etc. etc.

But if you're using XML to basically make a variant of HTML, it's great.

They should've said:

    JSX is a JavaScript syntax extension that looks similar to HTML.

JSX is a HTML-like template language that gets preprocessed to actual HTML.

No it's not getting preprocessed to actual HTML in React. Depending on the transform function, it can be turned to an object tree or a function calls tree (like in React) or actually HTML like you said but it's not a common use case AFAIK.

It's not a text templating language like classic PHP, it's an object/function calls hierarchy DSL (more like vb.net XML literals). I think most people critisizing react for putting html in JS havn't tried it or don't remember why "html" in code was considered bad in the first place.

Right. I was aiming for the 'simple' answer but should have said DOM instead of HTML.

I'm also thinking in more of an Angular2 context as that's what I'm most familiar with.