I have created an index.html, which is like:
<!DOCTYPE html>
<html lang="en">
<head>
<title>React Example</title>
<script crossorigin="anonymous" src="unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin="anonymous" src="unpkg.com/react-dom@16/umd/react-dom.development.…"></script>
<script type="text/babel" src="unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<MyTag />, document.getElementById("root"));
</script>
</body>
</html>
And my react (myScript.js) file is like:
class MyTag extends React.Component {
render() {
return <h1>Hello</h1>;
}
}
Now, I tried to run this code it gives me error, Uncaught SyntaxError: Unexpected token < at the line of return <h1>Hello</h1>;
How I can solve this problem?
You have two problems:
1) You are asking babel to load babel !
<script type="text/babel" src="unpkg.com/babel/standalone@6/babel.min.js"&g…
remove the attrib type="text/babel" + let the Browser do the loading from CDN
2) As others already said, your MyTag component should be loaded by babel (not by the Browser)
3) Then it will work ! And I did not just give some bullshit answer, i actually tried it .. haha !
Joe Dotnet
just a legend in my own (lunch) time
You need the react plugin for babel. Or instead of JSX use JavaScript: React.createElement('h1', 'Hello');
Wrap your html with paranthesis
return (<h1>Hello</h1>);
In the below line, you need to add type="text/babel" instead of text/javascript because it contains JSX which babel needs to transpile.
<script type="text/javascript" src="myScript.js"></script>
Saumya Karnwal
Developer
did you finally resolve it? i am getting the same error and i am stuck on it from daysss plz help me if possible