Adding React to an existing ASP.Net MVC project

Part 2: integration

In Part 1 we looked at creating a new ASP.Net MVC project and installing all the required javascript modules and plugins necessary to get React up and running in the project.

In this part we will be embedding the React code within an MVC view, and looking at configuring the compiler to update the browser automatically.

1. Remove unused files

If you followed Part 1 of the tutorial, then you will have some files that we are not going to use. So we are just going to delete some of these. In Solution Explorer, expand the “Views” folder and the “Home” folder inside it

Screenshot by Author

You can delete the files About.cshtml and Contact.cshtml.

2. Cleaning up the code

In the “Controllers” folder, open up HomeController.cs and delete the two functions called “About()” and “Contact()”. You can also remove any unused “using” statements — these appear in grey instead of black. It does no harm to leave them in, but just to keep the code clean I’m going to remove them. The resultant file should look like this (your namespace will contain the name of your app instead of “MVC_Web_App”):

using System.Web.Mvc;
namespace MVC_Web_App.Controllers
{
  public class…