In this article I will explain with an example, how to get started with ReactJS in ASP.Net MVC.
This article will help you understand, configure and create a very simple ReactJS application in ASP.Net MVC.
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.
![Getting started with ReactJS in ASP.Net MVC]()
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.
![Getting started with ReactJS in ASP.Net MVC]()
Once added, rename the File extension TSX to JSX.
![Getting started with ReactJS in ASP.Net MVC]()
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
![Getting started with ReactJS in ASP.Net MVC]()
Downloads
