Can we use JSX, if we are creating App by linking React CDN or by CRA (create-react-app) biolerplate?

Question

The Code in html file:

<div id="app"></div>
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin></script>
    <script src="HelloWorld.js"></script>

The Code in JS file:

function tick() {
    const element = (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {new Date().toLocaleTimeString()}.</h2>
      </div>
    );
    return React.createElement('h1', null, 'Hello, ' + element);
  }
  setInterval(tick, 1000);
const domContainer = document.querySelector('#app');
console.log(domContainer);
ReactDOM.render(React.createElement(tick), domContainer);

It is throwing error of Unexpected token '<'?

Answer 1

You need to add the babel to compile it.

Add the following before the before the end of head tag: <script src="includes/Components/React/babel.min.js"></script> (After the React CDN) and then add the type="text/babel" to your script so that would be:

<script type="text/babel" src="HelloWorld.js"></script> I hope you will not see this error.