How to integrate React and Asp.Net Core 3.1 app using VS Code

In this tutorial, we are going to cover how to integrate React with Asp.Net Core 3.1 using Entity Framework Core in visual studio code. We will use SQLite database in this project. So, first-of-all, we will install all the dependencies that we need in this project and then we will see how to setup a project using React and Asp.Net Core 3.1 and Entity Framework Core. 

What will we learn in this tutorial?

We will learn lots of points in this tutorial as you do see below in the list.

1. How to install dependencies?
2. How to create a multi project solution application?
3. How to Create a Database using Entity Framework Core?
4. How to test API using Postman?
5. How to Create a client side?
6. How to fetch data from the API?

Integrate React and Asp.Net Core 3.1 app using Entity Framework Core in VS Code.

Let’s start how to set-up a new project in React and Asp.Net Core 3.1 application using Entity Framework Core  in VS Code. 

Step # 1: How to install dependencies?

In this step, we will see how to install all the required dependencies. Let’s see it step by step.

Install .Net Core 3.1

First-of-all, go to this link (https://dotnet.microsoft.com/download/dotnet-core/3.1) to download .Net Core 3.1 or any version according to your machine and then install it in your machine.

Install Node.js

Now, in this step, we will see how to install Node.js in our machine. So, go to this link (https://nodejs.org/en/download/) and then download the required version according to your machine and then install it.

To test that node has been installed properly or not, go to the command prompt and then run the below command and then you will see the output as you do see below in the screenshot.

=> node -v

Step # 2: How to create a multi project solution application?

Now, in this step, we will see how to create a multi project solution application. So, we will create multiple projects to create our application. So, first-of-all, we will create a new directory where we will create our project. So, run this below command to create a new directory.

=> mkdir BookStore

The above command will create a new folder with the name of “BookStore”. Now, go to the inside this folder using the below command.

=> cd BookStore

Now, we will create a solution file for our project using the below command as you do see below in the screenshot.

=> dotnet new sln

Now, we will see a new file with the name of “BookStore.sln” created within the BookStore folder.

Now, we will add two class libraries and one API project. So, go to the terminal and then run these below commands.

=> dotnet new classlib -n Domain

=> dotnet new classlib -n BookStoreDb

=> dotnet new webapi -n API

After running these above commands you will see the output as you do see below in the screenshot.

Then you will see the three different projects with some default files within our project directory as you do see below in the screenshot. 

API Project Folder: this project will contain all the APIs.

BookStoreDb Project Folder: this.project will contain all the database related stuff.

Domain Project Folder: this project will contain all the entities for our project.

So, now we will add our projects to the  “BookStore” solution and then add references to each project. So, go to the terminal and then run these below commands to add projects to our solution as you do see below in the screenshot.

=> dotnet sln add Domain/

=> dotnet sln add BookStoreDb/

=> dotnet sln add API/

Now, we need to add reference for each project. So, go to the terminal and then follow the steps.

So, run the below command to go to the inside API project.

=> cd API/

And now run the below command to add the Domain project’s reference to the API project as you do see below in the screenshot.

=> dotnet add reference ../Domain/

Now, run the below command to add the BookStoreDb project’s reference to the API project as you do see below in the screenshot.

Now, go to the terminal and then go to the inside BookStoreDb project by running the below command.

=> cd BookStoreDb/

Now, run the below command to add the Domain project’s reference to the BookStoreDb project as you do see below in the screenshot.

=> dotnet add reference ../Domain/

Step # 3: How to Create a Database using Entity Framework Core?

Now, in this step, we will create a database for our project. So, to create a database, just follow the below steps.

Create a Domain Class:

To do this, go to the project folder and then go to the Domain project and then you will see a class with the name of “Class1.cs”. Now, delete this class (Class1.cs) and then create a new class with the name of Book with some properties as you do see below in the code file.

Create a DataContext Class:

Now, in this step, we will create a DataContext class. Before going to create a DataContext class, we need to add some nuget packages. So, go to the BookStoreDb folder and then go to .csproj file and then add these below three packages as you do see below in the code file.

=> Microsoft.EntityFrameworkCore

=> Microsoft.EntityFrameworkCore.Sqlite

=> Microsoft.EntityFrameworkCore.Design

Now, run this below command to restore packages.

=> dotnet restore

Now, you will see the file with the name of “Class1.cs” within the BookStoreDb project. Just delete this (Class1.cs) file and then create a new class with the name of “DataContext.cs” and then add some code as you do see below in the file.

Now, go to the API project folder and then go to Startup.cs file and then add the service as you do see below in the code file’s line # 27 to line # 29.

Note: – Don’t forget to add references.

Now, go to appsettings.json file in the API project and then add the connection string as you do see below in the code file’s line # 2 to line # 4.

Add Migration:

Now, in this step, we will see how to add migration. So, go to the terminal and then run this below command as you do see below in the screenshot.

=> dotnet ef migrations add  Initial -p BookStoreDb/ -s API/

Now, go to the BookStoreDb project folder and then there you will see a new folder with the name of Migrations. Go to the Migrations folder and then you will see that the above command has created the initial migration.

Update Database:

Now, run the below command to update the database as you do see below in the screenshot.

=> dotnet ef database update -p BookStoreDb/ -s API

Now, the above command has updated the database. To verify the database, just press ctrl+shift+p and then you will see a search box at the top of vs code. Now, write the text SQLite within the textbox as you do see below in the screenshot.

Now, click on the “SQLite: Open Database” and then you will see the output as you do see below in the screenshot.

Now, go to Explorer and then go to SQLITE EXPLORER and then you will see the bookstore.db and then you will see a Books table inside the bookstore.db as you do see below in the screenshot.

Seed Data using Entity Framework:

Now, in this step, we will seed data to the bookstore database. So, go to the BookStoreDb project and then go to DataContext class and then add OnModelCreating() method as you do see below in the code file’s line # 14 to line # 26.

Now, go to the terminal and then run the below command to add migration as you do see below in the screenshot.

=> dotnet ef migrations add SeeData -p BookStoreDb/ -s API/

Now, run the below command to update the database as you do see below in the screenshot.

=> dotnet ef database update -p BookStoreDb/ -s API/

Now, go to the database and then you will see the above command has updated the database table as you do see below in the screenshot.

Step # 4: How to test API using Postman?

Now, in this step, we will create an API and then we will test our API using Postman. So, go to the API project folder and then go to Controllers folder and then create a new file with the name of BookController.cs and then write some code as you do see below in the code file.

Let’s understand the above code.

Line # 14 to 18: here we are injecting the DataContext into the BookController.

Line # 20 to 25: here we are creating a Get method which will fetch all the books from the database and then return all the books records.

Now, run the project using the below command.

=> dotnet run -p API/

Now, go to Postman and then enter the API URL (E.g. http://localhost:5000/api/Book) and then click on the send button and then you will see the output as you do see below in the screenshot.

Now, our API part has completed.

Step # 5: How to Create a Client side project?

Now, in this step, we will see how to create a react app within our project. So, go to the terminal and then run the below command and it will take some time to complete this command as you do see below in the screenshot.

=> npx create-react-app client-app –use-npm –typescript

After some time, it will create a new folder (client-app) within the project folder directory as you do see below in the screenshot.

Now, we will run the client application. So, go to the terminal and then go inside the client-app folder using the below command.

=> cd client-app/

Now, run the below command to run the client app and then you will see the output in your browser as you do see below in the screenshot.

=> npm start

Step # 6: How to fetch data from the API?

In this step, we will see how to fetch data from API. So, to get data from the API, we will use Axios library for http requests. So, go to the terminal, and then go inside the client-app folder by running the below command.

=> cd client-app

Now,run the below command to install the Axios as you do see below in the screenshot.

=> npm install axios

Now, go to the src folder which is inside the client-app folder and then open the App.tsx file and then write the code as you do see below in the code file.

Let’s understand the above code.

Line # 4: here in this line we are importing the axios.

Line # 10 to 16: here we are fetching the record from the database using axios and then passing the record to the books variable.

Line # 17 to 31: here we are rendering the html code. And displaying all the books using the unordered list.

Now, run the client app using below command and then you will see the output as you do see below in the screenshot.

=> npm start

Note: – Make sure your API project is up and running.

Congratulations! We have successfully created the React and Asp.Net Core 3.1 application using SQLite with the help of Entity Framework Core.