In this article I will explain with an example, how to add React (ReactJS) to existing ASP.Net MVC Project.
Software Information
This article makes use of Visual Studio 2019, MVC 5 and .Net Framework 4.5.
Installing ReactJS Packages from Nuget
You will need to install the following packages from Nuget. In the Package Manager Console window, type the following commands (one by one) and press Enter key and the packages will start installing.
1. React.Web.Mvc4
Install-Package React.Web.Mvc4 -Version 5.2.12
2. JavaScriptEngineSwitcher.V8
Install-Package JavaScriptEngineSwitcher.V8 -Version 3.18.1
3. Microsoft.ClearScript.V8.Native.win-x86
Install-Package Microsoft.ClearScript.V8.Native.win-x86 -Version 7.2.5
Adding and configuring ReactConfig.cs
The next step is to add ReactConfig.cs class to the App_Start folder.
![Add React to existing ASP.Net MVC Project]()
Once the Class is added, the following code needs to be added to the class.
ReactConfig.cs
Inside the ReactConfig.cs class, the DefaultEngine for ReactJS application is set to V8JsEngine.
using JavaScriptEngineSwitcher.Core;
using JavaScriptEngineSwitcher.V8;
namespace React_HelloWorld_MVC
{
public static class ReactConfig
{
public static void Configure()
{
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
JsEngineSwitcher.Current.EngineFactories.AddV8();
}
}
}
Global.asax Configuration
Inside the Application_Start event handler of the Global.asax file, the ReactConfig.Configure method needs to be called as shown below.
using System.Web.Mvc;
using System.Web.Routing;
namespace React_HelloWorld_MVC
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
ReactConfig.Configure();
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes);
}
}
}
Adding ReactJS JSX file
Now in the Scripts Folder (create if not present) inside the Solution Explorer, add a File of type TypeScript JSX File as shown below.
![Add React to existing ASP.Net MVC Project]()
Once added, rename the File extension TSX to JSX.
![Add React to existing ASP.Net MVC Project]()
Once the File is added, the following code needs to be added to the file.
Here a class HelloWorld is created which extends ReactJS Component.
The render function returns an HTML Header element (H1) with a message in it.
Finally, the ReactDOM.render function, render’s the class in a HTML DIV with ID dvMessage.
class HelloWorld extends React.Component {
render() {
return (<h1>My First ReactJS MVC App!</h1>);
}
}
ReactDOM.render(
<HelloWorld />,
document.getElementById('dvMessage')
);
Controller
The Controller consists of following Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
View
The View consists of an HTML DIV dvMessage inside which the message from the ReactJS will be displayed.
Then the following necessary JS files for ReactJS application are inherited.
1. react.development.js
2. react-dom.development.js
Finally, the HelloWorld.jsx file is inherited.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="dvMessage"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
<script src="@Url.Content("~/Scripts/HelloWorld.jsx")"></script>
</body>
</html>
That’s it and the application is ready to run.
Screenshot
![Add React to existing ASP.Net MVC Project]()
Downloads
