I'm following this tutorial on React and MVC, and the tutorial works as stated, but the React structure I am trying to integrate is in JavaScript, not jsx.
I'm encountering Uncaught SyntaxError: Unexpected token < in the console on the browser when I run the program.
The closest questions were this question, which doesn't help my issue because the project worked before I began to stray, and this question, which doesn't ask quite the same question.
Index.cshtml:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script type="module" src="@Url.Content("~/React/index.jsx")"></script>
</body>
</html>
index.jsx:
import App from './src/App.js';
ReactDOM.render(
<App />,
document.getElementById('content')
);
App.js:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App text-center">
<h1>Analytics</h1>
</div>
);
}
}
Everything points to the right places, and then the Uncaught SyntaxError: Unexpected token < points to <div className="App text-center"> in App.js.
Why am I getting this error? :/
console.logbefore thereturnstatement, it doesn't actually log anything.