How to create React and Asp.Net Core App using Visual Studio 2017

In this tutorial, we are going to learn how to create react and asp.net core app using visual studio 2017. React is a javascript library which is created by facebook. React is used as a view layer for both web and mobile apps. We create small reusable UI components using react. So, as you know, in previous tutorials, we have discussed about how to create angular 6 app with asp.net core, and how to create angular 7 app with asp.net core. So, now in this tutorials, we will build an app with react and asp.net core using visual studio 2017.

• How to create an Angular 6 app using Asp.Net Core 
• How to create an Angular 7 app using Asp.Net Core

Let’s create react and asp.net core app using visual studio 2017 in step by step.

Step # 1 – Install some dependencies

Before going to next, you must have installed some dependencies like below list. If you have already installed these dependencies, then ignore this step.

• .NET Core SDK
• ASP.NET Core
• Node.js and npm (Latest Version)
• Angular Studio 2017

Create a new React and Asp.Net Core project

In this step we are going to create a new project using react and asp.net core.

So, let’s start. Open visual studio 2017 => then click on file from upper menu (or press Ctrl+Shift+N) => then select new => then select project => then select “Web” from right pane => then select “Asp.Net Core Web Application” from middle pane => then enter the name in “Name input field” => then click on browse button to specify your location => then click on ok button.

After clicking ok button, now you will see a new popup window with the name of “New Asp.Net Core Web Application – ReactWithAspNetCore”. Now, select “.Net Core ” and then select version of Asp.Net Core from upper dropdown => then select “React.js” template and then click ok button.

Now, after clicking ok button. You will see the visual studio will create a new project with react and asp.net core. So, build this project and run by pressing Ctrl+f5. Then you will see the output as you see in the below screenshot.

React and Asp.Net Core App Structure

After creating the project, you will see the below structure of your application.

Thank you for reading. Please keep visiting and sharing!