Build React App Using Visual Studio 2019

In this article, you will learn to build a simple React app with Visual Studio 2019.

Introduction

 
In this article, we are going to learn how to create a simple web application using ReactJS and Visual Studio.
 
Description
 
ReactJS is a front-end JavaScript library used for building the user interface. It is currently the most famous JavaScript library. It is maintained by Facebook and a community of individual developers and companies.
 
Prerequisites
Currently, I am using .NET Core 2.2.301 and Node version 10.16.0.
 

Steps for creating an application

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

    Learn About React App With Visual Studio 2019
  • 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.

    Learn About React App With Visual Studio 2019
  • 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.

    Learn About React App With Visual Studio 2019
  • 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.
    Learn About React App With Visual Studio 2019
  • 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.

    Learn About React App With Visual Studio 2019
    • 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.

    Learn About React App With Visual Studio 2019
  • 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.

    Learn About React App With Visual Studio 2019

  • Now, you can edit your application and start working on it.

Summary

 
In this article, I have demonstrated how to create a web application using ReactJS and Visual Studio 2019. Hopefully, it will help.