In this article I will explain a simple tutorial with an example, how to create a simple ReactJS Hello World example in ASP.Net Web Forms.
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.
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
Install-Package React.Web -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
Note: If ReactConfig.cs file will not added automatically, then add it manually using steps below.
The next step is to add ReactConfig.cs class to the App_Start folder.
![ASP.Net Web Forms: ReactJS Hello World Example]()
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_ASP.Net_HelloWorld
{
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;
namespace React_ASP.Net_HelloWorld
{
public class Global : System.Web.HttpApplication
{
protected void Application_Start(object sender, EventArgs e)
{
ReactConfig.Configure();
}
}
}
Adding HelloWorld 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.
![ASP.Net Web Forms: ReactJS Hello World Example]()
Once added, rename the File extension TSX to JSX.
![ASP.Net Web Forms: 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 App!</h1>);
}
}
ReactDOM.render(
<HelloWorld />,
document.getElementById('dvMessage')
);
HTML Markup
The HTML Markup 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.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<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="Scripts/HelloWorld.jsx"></script>
</form>
</body>
</html>
That’s it and the application is ready to run.
Screenshot
![ASP.Net Web Forms: ReactJS Hello World Example]()
Downloads
