ReactJS With ASP.NET MVC Setup Using NPM (Babel And Webpack)

In this article we will see how to set up React js Library in Asp.Net MVC using Node js NPM (Babel and Webpack).

 

In this project, we are going to use Nodejs so make sure you install the Node js in your system before proceeding

 

Step 1

 

Create one new Asp.Net MVC Project and give some name e.g.: ReactApp:

 

 

And select the empty template and click on OK to create a new project.

 

Step 2

 

Right click on the project and select Add and select new scaffolded item and create one empty controller and name it as HomeController

 

 

This will create all MVC related templates in the project which will look like the below template,

 

 

Step 3

 

Install Node js based on your system type from the below link here.

 

Step 4

 

After installing node js open the HomeController and create one view for the Index Action method like seen below. You can set the layout page as you want.

 

 

Save and run it in the browser. You will find something like the below screen; now our Asp.Net MVC application is ready, so let’s integrate React into it.

 

Step 5

 

Go to the scripts folder and add a folder called React where we will store all node js modules and React code into it.

 

 

Step 6

 

Open the React folder in file explorer and type CMD, which will open the command prompt terminal and type npm in it to check whether node js is installed or not, if it is installed it will show the below lines in the console:

 

 

Step 7

 

In the Command prompt that we have opened, type npm init which will initialize the npm and create the package.json in the React folder.

 

Please follow the below steps:

• Give the package name
• Enter the description
• Make the entry point of your react application; in my case, I have entered as app.js
• Give author and mention the license
• Then type yes

This should create one package.json file, where all our installations will be included here like babel, webpack, React, etc

 

 

Step 8

 

After the creation of package.json then type the below command. It will install the required node modules folder where we will have React, React dom, and other libraries.

 

 

Step 9

 

Go to Visual Studio and click on "show all files" and we will see the below list of folders that are in excluded.

 

As we require only package.json file to add/modify, include the file in it. In package.json you will see the list of dependencies that are installed.

 

 

Step 10

 

After installing the React and React dom, the next step is to install the babel and webpack dependencies, so please type the below command.

 

After typing the below command it will install the dependencies, so this is the place where we need to install the required packages, so you can install any package by typing the npm command,

 

Step 11

 

As we have installed the dependencies the next step is to create one config file where we can handle all the React configurations in one place, so right click on React folder then create one new JavaScript file called webpack.config.js like shown below,

 

 

Step 12

 

Open the package.json file and the below line inside the scripts section. The code should look like the below, and here we are mentioning in the package.json to use the webpack for compiling to native JavaScript. Don't forget to add webpack in scripts section to compile using webpack module.

 

 

Step 13

 

Go to scripts section and add the folder structure like the below shown,

 

src ->app.js

src->main.js

 

 

After creating the folders and javscript files copy the below code inside:

 

main.js

var React = require('react');
class Main extends React.Component {
    render() {
        return ( < > < h1 > hello world < /h1> < />)
    }
}
export default Main;

In the above code, as we can see, we are importing the React lib and creating one class component which will return hello world,  and we are exporting this class. So this is the class where we will import all the class components or functional components and export this all together as single compoenent.

 

app.js

var React = require('react');
var ReactDOM = require('react-dom');
import Main from './main';
ReactDOM.render( < Main / > , document.getElementById('root'));

As we here we are importing the main.js file and rendering the component to the root element in the Index.cshtml, we will see this in the upcoming step.

 

Step 14

 

Open the webpack.config.js that we have created earlier. This is the configuration file where we can manage the React project so paste the below code.

module.exports = {
    context: __dirname,
    entry: "./src/app.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js",
    },
    watch: true,
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env', '@babel/preset-react']
                }
            }
        }]
    }
}

As you can see we are exporting the module settings so below is the detailed information about the settings.

 

entry - This is the application entry point as we have created the app.js as our app to render

 

output - This is the output file where we want to store all the JavaScript’s file output to one single file with compressed and minified, so this file will be created once we run the webpack and stays updated whenever we make changes to React files and folders.

 

rules - Here we are excluding node modules not to compile and in the test section we can add whatever  file extension that is required e.g: js,jsx.

 

Step 15

 

Open the command prompt and type the below command to run the webpack which will compile all javascript files and trigger the output.

 

 

As you can see in the above picture when we run the webpack it creates the bundle.js file in the dist folder with the minified javascript code, so as we have configured with watch as true in webpack.config.js, this will keep on looking for the changes that we made. And don’t forget to include the dist folder; i.e bundle.js file in the project.

 

Step 16

 

Open the Index.cshtml and add the below lines of code as we have dicussed in step 13 which should look like below:

@{
   ViewBag.Title = "Index";
   Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
   <div id="root"></div>
@section reactScript
{
   <script src="~/Scripts/React/dist/bundle.js"></script>
}

So here we are adding one div tag to hold the html that is generated by react code and creating one asp.net section to hold the final output which is in bundle.js to refer to as js file in _layout.cshtml

 

So open the _layout.csthml and add the refer section at the bottom -- that means before the closing body tag.

@RenderSection("reactScript", required: false)

Step 17

 

Save and run it in the browser,