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 https://stackoverflow.com/questions/40407632/how-to-render-a-react-component-using-reactdom-render — Supreme Dolphin, May 01 '19 at 12:56
Possible duplicate of [how to render a react component using ReactDOM Render](https://stackoverflow.com/questions/40407632/how-to-render-a-react-component-using-reactdom-render) — Supreme Dolphin, May 01 '19 at 12:57

score 2 · Answer 1 · answered May 01 '19 at 12:54

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 01 '19 at 12:54

Avanthika

3,984
1
12
19

thanks, it works when i put my react.js code in my html file with – mahsa.p.b May 02 '19 at 08:40
Yes, you can, what is your directory structure? Where is your js located? – Avanthika May 02 '19 at 12:57
my .js file and my .html file are in the same folder. react\file.html and react\file.js. what should i do? – mahsa.p.b May 05 '19 at 08:42
Change this `` to `` – Avanthika May 05 '19 at 13:53
And if my answer was helpful, please accept it :) Thanks in advance :) – Avanthika May 05 '19 at 23:05

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

1 Answers1