Why doesn't JSX work in without a weird comment in the Code Playground JS tab?

Question

For react standalone to work only three scripts are needed in html head or body:
1. for react
2. for react dom and
3. for babel

And that should be all. We should then be able to add JSX in the JS tab of the Playground and it should be working.

But nah...

I've gone through some working codes of react here. Some people added a loader and recommended showing it till babel transpiles JSX.

What I found is that all that it matters to make JSX work in the JS tab is to add this weird comment:

// </closingScript> <startingScript type="text/babel"> (can't add script tag) (uncommenting also works)

Why?

🦁

Answer 1

This is a smart workaround way to use the code playground for react jsx code.

The JS code of the code playground is basically appended to the html head tag.

Although JS comment sign "//" can comment JS codes, but it's ignored by the HTML interpreter, HTML only interprets the JS comment sign as merely a string output "//”.

However HTML could interpret the following script tag with type="text/babel" together with the JS codes as a whole JSX codes with the babel compiler.