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
