My First React Application With ASP.NET MVC

In this article, I`m starting from scratch to create new asp.net MVC application with reactJS.Net and also adding react component in it.

In this article, I'm starting from scratch to create a new ASP.NET MVC application with ReactJS.Net and I'm also adding a React component in it. I`m using Visual Studio to creating the ASP.NET MVC application and will install NuGet package ReactJS.NET with ES6. I am creating a simple "Hello World" application.

Let’s start to create the ASP.NET MVC application,

  1. Open Visual Studio from the start menu or taskbar icon
  2. After that click on - File => New => Project

    ASP.NET

    When clicking on the Project open a "New Project” popup, and from there we can select a project and enter the application and select folder location.
  1. Open a "New Project" popup and select Template => Visual C# => Web => ASP.NET Web Application (.NET Framework)

    ASP.NET

    Here you select project template with ASP.NET Web Application (.NET Framework) and your application name; e.g., FirstReactApp. After that click on the OK button and open a new popup called: "New ASP.NET Application"
  1. Open popup (dialog) - New ASP.NET Application – FirstReactApp

    ASP.NET

    In this dialog popup, we select "Empty" project template as in the below list of project templates. And in the below project templates list select "Add folders and core references for:” e.g. Web Form, MVC & Web API etc. We`ll select MVC for now. And click on OK button.
  1. Now, we see ASP.NET MVC application folder structure in solution as per the below screenshot.

    ASP.NET

    => Now, we are going to install the required NuGet Package from Manage NuGet Packages.
  1. Install ReactJS.NET (React.Web.Mvc4) NuGet Package from Manage NuGet Packages

    ASP.NET

    Now, we need to install ReactJS.NET (React.Web.Mvc4), by right clicking on the project "FirstReactApp" and selecting NuGet package manager "Manage NuGet Packages" and opening a dialog popup to install the required package,

    Select "Browse" => Enter Package "React.Web.Mvc4" => Select "React.Web.Mvc4" from search result => click on "Install" button.
    1. => Open a dialog box and click on OK
      ASP.NET

    2. => again open another dialog popup for licenses acceptance and click on "I Accept" button

      ASP.NET

      After that, you can see 3 packages installed: 1. React.Web.Mvc4; 2. React. Web; 3. React.Core. Close the "Manage NuGet Packages" dialog popup.

    3. And also install "Web.Optimization.React" from "Manage NuGet Packages" using the same steps as above.
  1. Now, add a controller by right clicking on controller folder from solution.

    ASP.NET

    ASP.NET

    Select the option of the controller and add the name of controller; eg. HomeController, and click on add button. After that click on the home controller and right click on Index action and click on Add View option.

    Controller  => HomeController.CS
    1. using System.Web.Mvc;  
    2. namespace FirstReactApp.Controllers {  
    3.     public class HomeController: Controller {  
    4.         // GET: Home  
    5.         public ActionResult Index() {  
    6.             return View();  
    7.         }  
    8.     }  
    9. }  
  1. Add the required CDN files on schtml view

    View => Home => Index.cshtml
    1. @{  
    2.  ViewBag.Title = "Index";  
    3. }  
    4. <div id="myContainer"></div>  
    5.   
    6. <!--All Required REACTJS Lib-->  
    7. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>  
    8. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>  
    9. <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>  
    10. <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>  
    React Component by Creating .JSX
  1. Now, we need to create a first component to create a file (.jsx) by right clicking on container folder script => react folder select a file from new items dialog popup and click on Add button. fThe file is called : "FirstReactApp.jsx"

    Select Web => JSX File, and enter file name "FirstReactApp.jsx". Then, click on "Add" button

 ASP.NET

React is all about modular components. For Hello World example, we'll have the following component structure as per below. Now I`m going to create a react component called "HelloWorld" inside the simple div => h1 => text.

I am using ES6 to creating component by using class keyword.

What is ES6?

ECMAScript 6 (ES6, often referred to as “Harmony”) is the upcoming sixth major release of the ECMAScript language specification. ECMAScript is the “proper” name for the language commonly referred to as JavaScript. I won’t go into the history of these names, but if you’re interested there’s plenty of information around the web.

(source:https://dev.venntro.com/2013/09/es6-part-1/)

Using ES6 with React version v0.13 introduces a new way to create a component by defining a class component that is a new "Class" keyword and module syntax.

Use the new modern ES6 pattern to create "HelloWorld" component likes below:

Scripts => react => FirstReactApp.jsx

  1. class HelloWorld extends React.Component {  
  2.     render() {  
  3.         return (   
  4.        < div >   
  5.           < h1 > Hello World React JS! < /h1>                
  6.     < /div>)  
  7.     }  
  8. }  
  9. ReactDOM.render( < HelloWorld / > , document.getElementById('myContainer'));  
  1. NET Bundling and Minification

    We need to add HelloWorld.jsx file to create a new bundles.add() inside the bundleConfig file to compile our JSX to JavaScript and then minify it.

    React.Web.Mvc4 supports the use of Microsoft's ASP.NET Bundling and Minification library to transform JavaScript via Babel and minify it along with all your other JavaScript. Simply create a BabelBundle containing any number of JSX or regular JavaScript files: (source: react)

    App_Start => BundleConfig.cs
    1. using System.Web;  
    2. using System.Web.Optimization;  
    3. using System.Web.Optimization.React; //Add this namespace  
    4. namespace FirstReactApp {  
    5.     public class BundleConfig {  
    6.         public static void RegisterBundles(BundleCollection bundles) {  
    7.             bundles.Add(new BabelBundle("~/bundles/main").Include("~/Scripts/react/FirstReactApp.jsx"));  
    8.         }  
    9.     }  
    10. }  
  1. Add main bundle as per mentioned above in to _Layout.cshtml page
    1. @Scripts.Render("~/bundles/main")  
  1. Run the Project to display expected output screen

    ASP.NET