My First React Application With ASP.NET MVC

Introduction

 

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
    
    
   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.

3. Open a "New Project" popup and select Template => Visual C# => Web => ASP.NET Web Application (.NET Framework)
    
    
   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"

4. Open popup (dialog) - New ASP.NET Application – FirstReactApp
    
    
   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 the OK button.

5. Now, we see ASP.NET MVC application folder structure in solution as per the below screenshot.
    
    
   => Now, we are going to install the required NuGet Package from Manage NuGet Packages.

6. Install ReactJS.NET (React.Web.Mvc4) NuGet Package from Manage NuGet Packages
    
    
   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
    
    
2. => again open another dialog popup for licenses acceptance and click on "I Accept" button
    
    
   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.

7. Now, add a controller by right-clicking on the controller folder from the solution.
    
    

    
    
   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

   using System.Web.Mvc;
   namespace FirstReactApp.Controllers {
       public class HomeController: Controller {
           // GET: Home
           public ActionResult Index() {
               return View();
           }
       }
   }

8. Add the required CDN files on schtml view
    
   View => Home => Index.cshtml 

   @{
    ViewBag.Title = "Index";
   }
   <div id="myContainer"></div>
   
   <!--All Required REACTJS Lib-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>

   React Component by Creating .JSX

9. 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

 

 

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 components by using the 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

class HelloWorld extends React.Component {
    render() {
        return (
       < div >
          < h1 > Hello World React JS! < /h1>
    < /div>)
    }
}
ReactDOM.render( < HelloWorld / > , document.getElementById('myContainer'));

10. NET Bundling and Minification
     
    We need to add HelloWorld.jsx file to create 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

    using System.Web;
    using System.Web.Optimization;
    using System.Web.Optimization.React; //Add this namespace
    namespace FirstReactApp {
        public class BundleConfig {
            public static void RegisterBundles(BundleCollection bundles) {
                bundles.Add(new BabelBundle("~/bundles/main").Include("~/Scripts/react/FirstReactApp.jsx"));
            }
        }
    }

11. Add the main bundle as mentioned above into _Layout.cshtml page

    @Scripts.Render("~/bundles/main")

12. Run the Project to display the expected output screen