使用ASP.NET MVC 5应用程序设置ReactJS

Question

I just started learning ReactJS and i am trying to set it up with an ASP.NET MVC application, i just want to create a sample application.

I installed node version v8.12.0 and npm version 6.10.3

Created a empty MVC 5 application, with a new folder Jsx inside a folder called Scripts.

In the Jsx folder i have created Tutorial.jsx file.

var CommentBox = React.createClass({ 
    render: function() { 
        return (
          <div className="commentBox">
            Hello, world! I am a CommentBox.
          </div>
        ); 
    } 
}); 

ReactDOM.render(
    <CommentBox />, 
     document.getElementById('content') 
);

In the Index.Html i have referenced those files.

<div id="content"></div>
<script src="@Url.Content("~/Scripts/react/react.js")"></script>
<script src="@Url.Content("~/Scripts/react/react-0.12.2.min.js")"></script>
<script src="@Url.Content("~/Scripts/react/react-dom.js")"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="@Url.Content("~/Scripts/Jsx/Tutorial.jsx")"></script>

When i am trying to load the Index.html i don't see anything on the page, in the chrome developer tools i see the below error

Tutorial.jsx:1 Failed to load resource: the server responded with a status 
of 500 (Internal Server Error)

Not sure exactly why its not able to load the tutorial.jsx.

Tried replacing <script src="@Url.Content("~/Scripts/Jsx/Tutorial.jsx")"></script> with the <a href="~/Scripts/react/Jsx/Tutorial.jsx"></a> , the error is gone but no output is displayed on screen.

Answer 1

You cant include your jsx like this in your website. Try to use tool like webpack to transform jsx into js then you can use it. You can take a look how I setup webpack to transform jsx to js

Follow the link here

Small code snippet bellow. I'm using babel-loader to transform jsx and js es6 syntax to browser readable js code

{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: ["babel-loader", "eslint-loader"]
}

After transform to js file you can include js file to your view