How to install MVC React Project ?

The MVC React Project is a robust and versatile tool for creating cutting-edge web applications with client-side interactivity. For the beginner web developer or anyone new to this development framework, creating their environment with this framework requires understanding. Here, you will find some steps that will help prepare the development environment for the MVC React Project.

Follow the steps to set up to install the MVC React Project :

Step 1: Install Node. js The MVC React Project has a deep dependency on the Node. It is a JavaScript runtime environment that enables such a script to run not on the client side only but on the server side as well. First, download and install the most current build of Node that can be run on the computer. js from the official website (http://nodejs. org). This will also install Node Package Manager or npm, which you will be using to manage the dependencies you have on your project.


Step 2: Next, you’ll need a strong code editor to write and coordinate all your project code Keeping your code tidy is essential when managing a project and there is no better tool for a programmer than a code editor. There are many different choices for an IDE: Visual Studio Code, Sublime Text, and Atom among them. Whichever type of browser you will be selecting, ensure that it is well suited to your work environment and personality.

Step 3: Install the MVC React Project With Node.js and your code editor set up, you're ready to install the MVC React Project. Open your terminal or command prompt and navigate to the directory where you want to create your project. Then, run the following command to create a new MVC React Project:

open vs 2019

Open new project


Install NuGet packages:

ASP.NET MVC 4,5

JavaScriptEngineSwitcher.Core;

JavaScriptEngineSwitcher.V8

ReactConfig.cs created automatically

Add this in ReactConfig.cs:

using JavaScriptEngineSwitcher.Core;

using JavaScriptEngineSwitcher.V8;

public static void Configure()

{

JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;

JsEngineSwitcher.Current.EngineFactories.AddV8();

}

create package.json file:

Add the below syntax

{

  "name": "mvcdemo2",

  "version": "1.0.0",

  "scripts": {

    "build": "webpack"

  },

  "devDependencies": {

  },

  "dependencies": {

  }

}

Add 'npm run build' on project properties in the Build Events section

in the Post-build event command line box to build the WebPackages


Build the project to find any error occurs or not after that

If so run the below command in Power Shell to find the error.

Execute 'npm run build' command in Power Shell to confirm the same.

Next to install web packages:

Power Shell Commands to Install Webpack:

Execute the below command and add the webpack in Power Shell:

npm install webpack webpack-cli

npm install webpack webpack


Execute 'npm run build' command to build the web packages to find if any error occurs or not.

npm install @babel/core @babel/cli @babel/preset-env --save-dev 

npm install @babel/preset-react --save-dev

npm install babel-loader --save-dev

npm install babel-polyfill --save-dev 

npm install react

npm install react-dom

npm install axios

npm install glob 

For uninstall command:

npm uninstall @babel/polyfill

Note: For "react": "^18.2.0" version

We should use 

import * as ReactDOMClient from 'react-dom/client';

For Rendering:

const root = ReactDOMClient.createRoot(document.getElementById('companymain'));

root.render(

    <React.StrictMode>

        <div>

            <BindCompanyTopData />

        </div>

    </React.StrictMode>        

);

Note: --save-dev: means in development mode 

Add js folder with folder name react: 

react-dom.development.js

react.development.js

remarkable.min.js

Add App_Themes folder with folder name: 

Configure BundleConfig.cs

This will start the development server and open your application in your default web browser.

Congratulations! You've successfully set up your development environment to work with the MVC React Project. You're now ready to dive into the code, explore the project structure, and start building your next amazing web application.