ReactJS.NET MVC tutorial doesn't work?

Question

I\'m trying to setup a new project in Visual Studio that is going to be MVC 5 with a single page app written in ReactJS. So I followed the guide on the ReactJS website.

Answer 1

The first thing you need to ensure is that you are indeed creating an ASP.NET MVC 5 application and not an ASP.NET Core, as the tutorials are different.

For ASP.NET MVC 4 & 5: https://reactjs.net/getting-started/tutorial_aspnet4.html For ASP.Net Core: https://reactjs.net/getting-started/tutorial.html

If you are creating an ASP.NET MVC 5 application then follow the steps below:

Steps:

1. Create a new MVC 5 project.
2. In the package manager console, install the following NuGet packages:

Install-Package react.js

Install-Package React.Web.Mvc4

You will notice that a folder called 'react' will be created in 'Scripts'

3. In the Scripts folder create a new '.jsx' file and name it:

Tutorial.jsx

This is your where your react code will go.

4. Copy the following code into your newly created '.jsx' file:

var CommentBox = React.createClass({ 
    render: function() { 
        return (
          

            Hello, world! I am a CommentBox.
          
        ); 
     } 
   }); 

ReactDOM.render(
    , 
     document.getElementById('content') 
);

5. In your Index view, which is in the Home folder under views, place the following code:

@{ Layout = null; }



  



  

  
  
  
  

Now if you run the application you should get the following in your browser window: 'Hello, world! I am a CommentBox.'