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')
)
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.