https://babel-standalone.netlify.app/
This is just a quick demo to show how @babel/standalone works. All we have is an html file. That file loads React, ReactDOM, and @babel/standalone through script
tags.
We can then write our next-gen JavaScript directly in the html file and it will work! Pretty cool.
How does this work? If we inspect the DOM through Chrome DevTools, we can see that our original jsx code is right where it was, in the script
tag before the closing tag of body
. But if we take a look at the head
, we will notice that another script
tag was added. This is the compiled JavaScript, which now contains code from the raw React APIs, like createElement
.
Note that this kind of approach is not recommended for production. Nevertheless, it might be valuable for quick proof of concepts, tutorials, or education purposes.