Uncaught SyntaxError: Unexpected token &lt

Hi

In the “render-HTML-elements-to-the-DOM” challenge of react i tried to use it into an html file. So, in i put


    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <div id="challenge-node"></div>
    
    <!--
      Syntax: ReactDOM.render(componentToRender, targetNode)
    -->
    <script>
      const JSX = (
       <div>
        <h1>Hello World</h1>
        <p>Lets render this to the DOM</p>
       </div>
      );
    ReactDOM.render(JSX, document.getElementById('challenge-node'));
    </script>

When i open on Chrome the file the followin error appears

Uncaught SyntaxError: Unexpected token <

… on div element at

 const JSX = (
       <div>

I tried then to put the js code into a separate file and i changed the js code into

<script type="type/babel" src="react-test.js"></script>

The error dissapeard but nothing is working.
Any idea for propper use the react library?
Thank you

Did you add the babel script?

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="challenge-node"></div>

<!--
  Syntax: ReactDOM.render(componentToRender, targetNode)
-->

<script type="text/babel">
  const JSX = (
   <div>
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p>
   </div>
  );
ReactDOM.render(JSX, document.getElementById('challenge-node'));
</script>

I would suggest using create-react-app or one of the online editors that have good support for react, like https://codesandbox.io or https://stackblitz.com

1 Like

There is a bit more to it. You need to add babel and your script tag must use type=“text/babel”

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id='challenge-node'></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script type='text/babel'>
  const JSX = (
    <div>
      <h1>Hello World</h1>
      <p>Lets render this to the DOM</p>
    </div>
  );
  ReactDOM.render(JSX, document.getElementById('challenge-node'));
  </script>
</body>
</html>
1 Like

Thank you for your editor and github proposals.

I put also the

type="text/babel"

and works fine.
Thank you