In this article I will explain a simple tutorial with an example, how to create a simple ReactJS Hello World example in ASP.Net Core MVC.
This article will cover all the aspects such as Installing Packages, Integrating and Configuring ReactJS and finally creating a simple Hello World example in ASP.Net Core MVC.
 
 
Software Information
This article makes use of Visual Studio 2019, MVC Core and .Net Core 3.0.
 
 
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.AspNet
Install-Package React.AspNet -Version 5.2.12
 
2. JavaScriptEngineSwitcher.V8
Install-Package JavaScriptEngineSwitcher.V8 -Version 3.18.1
 
3. JavaScriptEngineSwitcher.Extensions.MsDependencyInjection
Install-Package JavaScriptEngineSwitcher.Extensions.MsDependencyInjection -Version 3.3.0
 
4. Microsoft.ClearScript.V8.Native.win-x64
Install-Package Microsoft.ClearScript.V8.Native.win-x64 -Version 7.2.5
 
 
Adding ReactJS JSX file
Now in the Scripts Folder (create if not present) inside the wwwroot folder of the project, add a File of type TypeScript JSX File as shown below.
ASP.Net Core: ReactJS Hello World Example
 
Once added, rename the File extension TSX to JSX.
ASP.Net Core: ReactJS Hello World Example
 
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 Core App!</h1>);
    }
}
ReactDOM.render(
    <HelloWorld />,
    document.getElementById('dvMessage')
); 
 
 
Configuring ReactJS in Startup.cs class
The first step is to configure the JSON Serializer settings in the Startup.cs file.
Open the Startup.cs class from the Solution Explorer window.
ASP.Net Core: ReactJS Hello World Example
 
Once the Class is added, the following code needs to be added to the class.
ConfigureServices method
Inside the ConfigureServices method, first an IHttpContextAccessor is added to the services, so that static files (HelloWorld.jsx) can be accessed.
Note: For more details about using IHttpContextAccessor, please refer my article Using HttpContext in ASP.Net Core.
 
Then, React and JsEngineSwitcher is added and the Default Engine is set to V8JsEngine.
Finally, MVC is added and the compatibility is set to .Net Core 3.0.
 
Configure method
Inside the Configure method, the UseReact function is called and the HelloWorld.jsx file is added.
Finally, the UseStaticFiles method is called so that the Static files inside wwwroot folder can be accessed.
Note: For more details about using Static Files, please refer my article Static Files (Images, CSS and JS files) in ASP.Net Core.
 
using React.AspNet;
using JavaScriptEngineSwitcher.V8;
using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;
namespace ReactJS_MVC_Core
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            //Add IHttpContextAccessor for accessing Static Files.
            services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
 
            //Add React.
            services.AddReact();
 
            //Add JsEngineSwitcher V8.
            services.AddJsEngineSwitcher(options => options.DefaultEngineName = V8JsEngine.EngineName).AddV8();
 
            //Add MVC.
            services.AddControllersWithViews().SetCompatibilityVersion(CompatibilityVersion.Version_3_0);
        }
 
        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
 
            app.UseRouting();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapDefaultControllerRoute();
                endpoints.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
            });
 
            //Add the ReactJS File.
            app.UseReact(config =>
            {
                config.AddScript("~/Scripts/HelloWorld.jsx");
            });
            app.UseStaticFiles();
        }
    }
}
 
 
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
{
    public IActionResult 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
ASP.Net Core: ReactJS Hello World Example
 
 
Downloads
Download Code