ASP.NET MVC 5 With React.NET And ClearScript V8 Engine

In this article, you will learn about ASP.NET MVC 5 with React.NET and ClearScript V8 Engine.

In this article we are going to create an Asp.Net MVC 5 application with React.Net lib and V8 engine to render the react component on server side rendering approach, so let’s get started.
 
Here I’m not going to give much explanation about react.js as there are plenty of articles are available on internet, you can go through those articles.
 
Below are the libraries we are going to use in this article,
  • react.js
  • ReactJS.NET (MVC 4 and 5)
  • ReactJS.NET – ClearScript V8
Step 1
 
Create a new Empty ASP.NET MVC Project.
 
ASP.NET MVC 5 With React.NET And ClearScript V8 Engine 
 
Step 2
 
Create one Controller in Controller folder named HomeController and click on Add as this will create a controller.
 
ASP.NET MVC 5 With React.NET And ClearScript V8 Engine 
 
Step 3
 
Go to Index method and create one view called Index, this will create a master page and some required JavaScript files along with views.
 
ASP.NET MVC 5 With React.NET And ClearScript V8 Engine 
 
Step 4
 
Right click on Project and go to Nuget Package Manager and search for ReactJs.Net and install the React.Web.MVC4 package
 
ASP.NET MVC 5 With React.NET And ClearScript V8 Engine 
 
Similarly, also install the below packages from Nuget Package manager,
  • React.js -- (which will install the required js library from Nuget)
  • JavaScriptEngineSwitcher.V8 -- (which will install V8JsEngine` (wrapper for the Microsoft ClearScript.V8))
  • JavaScriptEngineSwitcher.V8.Native.win-x86 – (please install this package based on your system type i.e. 32or 64 in my case it was 32 so I have installed x86)
Now we have installed all required packages and libraries from Nuget, so in the next step, we will get into action.
 
Step 5
 
Go to Scripts folder and create one folder called jsx where we will store all react jsx files, so inside jsx folder create one file called HelloWorld.jsx like shown below,
 
ASP.NET MVC 5 With React.NET And ClearScript V8 Engine 
 
Step 6
 
Add the below code in the HelloWorld.jsx which will just render the hello World message in browser.
  1. class HelloWorld extends React.Component {  
  2.     render() {  
  3.         return (<div>  
  4.             <h1>Hello World  !</h1>  
  5.         </div>);  
  6.     }  
  7. }  
  8. ReactDOM.render(  
  9.     <HelloWorld />,  
  10.     document.getElementById('content')  
  11. );  
As we can see in the above code we have created one class called HelloWorld and we are not importing any react or react-dom library as we are going to use server side rendering these objects are available globally.
 
In the next method, we are using ReactDOM.render method will render the class object in the content id.
 
Step 7
 
Go to _Layout.cshtml and add the below script to map the react js library in the master page, so please add this script at the bottom end of the body tag in layout.cshtml
 
@RenderSection("reactScripts",required:false)
 
As we are going to render the script from child page(Index.cshtml) so we have added RenderSection method.
 
Step 8
 
Open the index.csthml and add the below code as we are using RenderSection in master page and also refer the helloworld.jsx,
  1. @section reactScripts{  
  2.     <script src="~/Scripts/react/react.js"></script>  
  3.     <script src="~/Scripts/react/react-dom.js"></script>  
  4.     <script  src="@Url.Content("~/Scripts/jsx/HelloWorld.jsx")"></script>  
  5. }  
So the complete code of index.cshtml  will look like the below code, we are adding one div tag to show the output of react component
  1. @{  
  2.     ViewBag.Title = "Index";  
  3.  }  
  4.   
  5. <h2>Index</h2>  
  6. <div id="content"></div>  
  7.   
  8. @section reactScripts{  
  9.     <script src="~/Scripts/react/react.js"></script>  
  10.     <script src="~/Scripts/react/react-dom.js"></script>  
  11.     <script src="@Url.Content("~/Scripts/jsx/HelloWorld.jsx")"></script>  
  12. }  
Step 9
 
Next step is very important as we are going to configure react component using server-side with V8JS engine, so open the ReactConfig.cs which will be auto-created when we install the ReactJs.Net and add the below code.
  1. ReactSiteConfiguration.Configuration  
  2.                 .AddScript("~/Scripts/jsx/HelloWorld.jsx");  
  3.   
  4.             JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;  
  5.             JsEngineSwitcher.Current.EngineFactories.AddV8();  
In the above code we are referring the jsx file where we have added the code to display the hello world if have any jsx files that needs to be rendered in server side needs to be added here.
 
In the second line we have configured the V8 Js Engine to the project.
 
Step 10
 
Call the ReactConfig.cs  the method called ReactConfig.Configure() in gloabal.asax.cs file and save it.
 
ASP.NET MVC 5 With React.NET And ClearScript V8 Engine
 
Step 11
 
Run it u will find the hello world in browser.
 
ASP.NET MVC 5 With React.NET And ClearScript V8 Engine
 
Happy Learning.