I am following this guide and I got stuck in the part when trying to add the Hello World
component (Here).
Everything is compiling and I get no errors but I don't see the component.
Here are the codes:
Index.cshtml
:
@{
Layout = null;
}
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js"></script>
<script src="@Url.Content("~/js/Tutorial.jsx")"></script>
</body>
</html>
And that's the Tutorial.jsx
file:
class CommentBox extends React.Component {
render() {
return (
<div className="commentBox">Hello, world! I am a CommentBox.</div>
);
}
}
ReactDOM.render(<CommentBox />, document.getElementById('content'));
Since I am new to ReactJS.NET, I hope this information will suffice. If it is not, tell me and I will provide more informaion.
EDIT 01:
I am getting an error in the console saying:
The script from “https://localhost:44309/js/tutorial.jsx” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.`
Loading failed for the <script> with source “https://localhost:44309/js/tutorial.jsx”.
Edit 02:
Seems the line <script src="@Url.Content("/js/tutorial.jsx")"></script>
was causing the problem. I changed it to <script src="/js/tutorial.js"></script>
while also changing the file name to tutorial.js
and now it works.
Thanks!