0

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!

Omer
  • 163
  • 1
  • 10
  • Are all the scripts loaded? In your browser press F12 for dev tools and check the network tab. Maybe check console as well to see if there are errors shown there. – HMR Aug 31 '19 at 09:38
  • I checked the console now and I see these two errors: `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.` and - `Loading failed for the – Omer Aug 31 '19 at 09:42
  • Are you sure you installed [ReactJS.net](https://reactjs.net/tutorials/aspnetcore.html#install-reactjs.net)? – HMR Aug 31 '19 at 09:49
  • Yes. When I am trying to compile my code, I am getting a massage box saying: `Adding the certificate to the Trusted Root Certificate store failed with the following error: The access control list (ACL) structure is invalid`. Can this cause the issue? – Omer Aug 31 '19 at 09:52
  • I managed to fix the massage in the above with `wosi`'s answer here: https://stackoverflow.com/questions/47413183/visual-studio-2017-gives-adding-the-certificate-to-the-trusted-root-certificate/48079314#48079314 – Omer Aug 31 '19 at 09:59

1 Answers1

0

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.

Omer
  • 163
  • 1
  • 10