How to load es6, react, babel code in html with cdn?

Question

I have Codepen code that I\'m trying to replicate on an web page using just three files, index.html, main.js, and style.css. I tried loading these scripts on the head tag of

Answer 1

You need to use babel standalone script to transcompile the code, and you need to include the script for react and react-dom, use these it will work:

Reason why it is working with codepen: check the setting/javascript, there you will find the babel is selected as JavaScript Preprocessor, codepen is including the script automatically, but to run these files locally you need to include the standalone script.

Update:

1- You need to define the script after the div in which you are rendering the react code, otherwise it will throw the error. like this:

2- Use ReactDOM.render instead of React.render.

Check the working code: