How to Setup MVC React.NET Project

                


References:

Tutorial (ASP.NET 4.x)

https://reactjs.net/
https://reactjs.net/tutorials/aspnet4.html

Step 1: Creating a Basic Project Solution

Minimum Requirements

• .Net 4.6.1

• Visual Studio 2017 or later version. (VS 2019 recommended) §NuGet Package Manager.

• Node JS

Project Template: ASP.Net Web Application (With MVC Compatibility)

• Choose Language: C#

• Choose .Net version: 4.6.1

• Choose an Empty Project Template.

• Add core reference MVC.

The Project Solution

Remove Unwanted Packages and Project resources from the solution, then add the ‘themes’ folder, ‘js’ folder, etc.

Step 2: Install and configure the required NuGet packages

1. React.Web.Mvc4, version 5.2.12

2. JavaScriptEngineSwitcher.V8

To use V8, add the following packages:JavaScriptEngineSwitcher.V8

JavaScriptEngineSwitcher.V8.Native.win-x64

ReactConfig.cs will be automatically generated for you. Update it to register a JS engine.

using JavaScriptEngineSwitcher.Core;

using JavaScriptEngineSwitcher.V8;


JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;

JsEngineSwitcher.Current.EngineFactories.AddV8();





Note: To fix the compiler issue Install the Fix package.
Microsoft.CodeDom.Providers.DotNetCompilerPlatform.BinFix

Step 3: Install Node Js

Download Link: https://nodejs.org/en/download/
Documentation: https://nodejs.org/en/docs/

Step 4: Install WebPack to the Development Environment using NPM (Node Package Manager)

Before installing Node Packages you need to add a package file and WebPack config. file to the project root directory.


1. package.json (List of Node packages and dependencies)

2. webpack.config.js (Configuration file for the Babel Bundle)

1. package.json




Sample Code:

2. webpack.config.js

Install Nods Packages

Commands:

npm;
npm install webpack;
npm install webpack-cli;
npm install glob;
npm install babel-loader --save-dev;
npm install babel-polyfill --save-dev;
npm install @babel/preset-react --save-dev;
npm install @babel/preset-env --save-dev;
npm install react@17.0.2
npm install react-dom@17.0.2
npm install react-router-dom@6.2.2
npm install reactjs-popup@2.0.5
npm install style-loader
npm install css-loader
npm install @amcharts/amcharts4
npm install jquery
npm install datatables.net-dt
npm install datatables.net-responsive-dt
npm install react-datepicker

· -P, --save-prod: Package will appear in your dependencies. This is the default unless -D or -O are present.· -D, --save-dev: Package will appear in your devDependencies.
· -O, --save-optional: Package will appear in your optional dependencies.
· --no-save: Prevents saving to dependencies.


Adding Post Build Event:

Open project properties >> Build Events >> Post-build event command line
Add the below command line and save the properties
call npm run build

References:
https://react-popup.elazizi.com/component-api