i get "Uncaught SyntaxError: Unexpected token <" when i run my .html and .js file

Question

i'm new in react.js, i used CDN links to compile some simple react.js code into my html, but i get this error:

"Uncaught SyntaxError: Unexpected token <"

then i searched and i saw somebody said that i should add:

type="text/babel" or type="text/jsx"

to my script tag, i did, but after that, my html didn't know my .js file!

this is my html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="fa">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title> title </title>
</head>

<body> 

  <div id="app"> </div>

  <script src="https://unpkg.com/babel-standalone@6/babel.min.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" src="myreact.js"> </script>

</body>
</html>

and this is my react.js file:

'use strict';

class MyComponent extends React.Component{ 
    render()
    {
      return  "hello";
    }
}

ReactDOM.render(
  <MyComponent/> , document.getElementById('app')
);

please help me to code in react.js.

Please check out this post stackoverflow.com/questions/40407632/… — Supreme Dolphin
– Supreme Dolphin, Commented May 1, 2019 at 12:56
Possible duplicate of how to render a react component using ReactDOM Render — Supreme Dolphin
– Supreme Dolphin, Commented May 1, 2019 at 12:57

Avanthika · Accepted Answer · 2019-05-01 12:54:40Z

2

If you are using CDN, first two you need are to render React into a DOM and the third one (babel) enables JSX and ES6. I have reordered the imports, have included cdn for babel after importing react and react-dom.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="app"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    'use strict'
    class Application extends React.Component {
     render() {
      return(
          <div>React App</div>
      );
     }
    }

    ReactDOM.render(<Application />, document.getElementById('app'));
  </script>
</body>
</html>

answered May 1, 2019 at 12:54

Avanthika

4,1821 gold badge15 silver badges19 bronze badges

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

5 Comments

mahsa.p.b Over a year ago

thanks, it works when i put my react.js code in my html file with <script> tag, but i want to have separate .js file and make a link to this .js file from my html. can i do this? do you have any idea?

Avanthika Over a year ago

Yes, you can, what is your directory structure? Where is your js located?

mahsa.p.b Over a year ago

my .js file and my .html file are in the same folder. react\file.html and react\file.js. what should i do?

Avanthika Over a year ago

Change this <script type="text/babel" src="myreact.js"> </script> to <script type="text/babel" src="./myreact.js"> </script>

Avanthika Over a year ago

And if my answer was helpful, please accept it :) Thanks in advance :)

Collectives™ on Stack Overflow

i get "Uncaught SyntaxError: Unexpected token <" when i run my .html and .js file

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related