Uncaught SyntaxError: Unexpected token '<' (React)

Question

I am trying to make a React project without Node and I am calling a JS file from a HTML file. I am just trying to make a simple example to learn. For some reasons I am getting Uncaught SyntaxError: Unexpected token '<'error in JS file. I am using Tomcat to run this project locally and this project will be used locally only (computers won't be having internet). I am new to react so please enlighten me.

HTML file

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="ISO-8859-1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React Local</title>

  
</head>

<body>

<link href="./js/bootstrap.min.css" rel="stylesheet" type="text/css">
  
  <script src="./js/jquery.min.js" type="text/javascript"></script>

  <div id="root">Loading....</div>

  <script src="./Component/RootComponent.js"></script>
  

  <script  src="./js/react.development.js"></script>
  <script  src="./js/react-dom.development.js"></script>
  <script  src="./js/babel.js"></script>


</body>

</html>

JS file

class RootComponent extends React.Component{
    
    render() { 
        return (
            <>
        <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
          <ul>
            <li>Instagram</li>
            <li>WhatsApp</li>
            <li>Oculus</li>
          </ul>
        </div>
        </>
      );
      } 
    }
// Create a function to wrap up your component
function App(){
  return(
  <div>
    <RootComponent name="@luispagarcia on Dev.to!"/>
  </div>
  )
}

ReactDOM.render(
    <App />,
    document.querySelector('#root')
  )

you should add your component script after adding react dependency script — J-007
– J-007, Commented Jan 12, 2022 at 14:44

Quentin · Accepted Answer · 2022-01-12 14:50:16Z

1

See the documentation.

You need to tell the browser (and the client-side babel compiler) that your script is not JS needs compiling with babel by setting type="text/babel"

<script src="./Component/RootComponent.js" type="text/babel"></script>

I strongly recommend setting up a local compiler instead of using browser-side babel.

answered Jan 12, 2022 at 14:50

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Uncaught SyntaxError: Unexpected token '<' (React)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related