Build React App Using Visual Studio 2019

Introduction

• Visual Studio 2019 Community
• .NET Core 2.2.0 or above SDK.
• Node.js

Steps for creating an application

• Open Visual Studio 2019.
• Click on the “Create new project” option.
  
  
  

• Select “Select ASP.NET Core web application” from the project template.
• Click on the "Next" button which will open a new window to configure your new project.
  
  
  

• Set the name of the project in “Project Name” and provide a location in the “Location” textbox.
• Click on the "Create" button of the popup window.
  
  
  

• After clicking on the "Create" button, you will find another popup window with the name “Create a new ASP.NET Core web application”. You can find two dropdowns over the popup window - one for selecting the environment as “.NET Core” and the second one to select the “ASP.NET Core version”.
• Select “.NET Core” and “ASP.NET Core 2.2” respectively.
• Then, select the JS template from this below template list. You can find “React.js and Redux” in that list. React.js and Redux template helps to configure Redux environment in our project.
• Click on the "Create" button.
  
  

• Now, our project will be created. A default overview window will open in Visual Studio.
• Open the Solution Explorer and observe the folder structure which is like the below image.
  
  
  

• ClientApp
  Is subdirectory of the main project, you can find your ReactJS code. You can also find package.json and package-lock.json files.
  
  
• src
  This folder contains React components which help you to build the UI layer. You can also find App.Js, index.js, registerServiceWorker.js file in this folder. File index.js provides an entry into the App and also kicks off the registerServiceWorker.js. This service worker takes care of caching and updating files for the end-user.

• Now, build your application. While building your application, you can see Visual Studio downloads the dependencies/restore dependencies like below image.
  
  
  

• Once the build process is completed, click on the IIS Express to run the application and check the result on the browser.
• The React application should be running successfully in the browser like in the below image with “Hello, world!” message.
  
  
  
  
• Now, you can edit your application and start working on it.

Summary