CRUD Application Using React JS, .NET Core & SQL Server

Part 1: Migration & Installation

Welcome to the first article in our series on building a CRUD (Create, Read, Update, Delete) application using React JS, .NET Core, and SQL Server. In this article, we will focus on the migration and installation steps required to set up our project.

Step 1: Set Up Your Development Environment

Before we begin, make sure you have the following tools installed on your system:

• Node.js
• Visual Studio Code or any preferred code editor
• .NET Core SDK
• SQL Server Management Studio

Step 2: Create a New React App

Open your terminal and run the following command to create a new React app:

npx create-react-app my-crud-app

This will generate a new React project with the name ‘my-crud-app’.

Step 3: Set Up .NET Core Web API

Open Visual Studio Code and create a new folder for your .NET Core project. In the terminal, navigate to this folder and run the following command to create a new Web API project:

dotnet new webapi -n MyCrudApi

This will create a new .NET Core Web API project with the name ‘MyCrudApi’.

Step 4: Set Up SQL Server Database

Open SQL Server Management Studio and create a new database with the name ‘CrudDb’. You can also create a new table to store data for our CRUD operations.

Step 5: Install Required Dependencies

Go back to your React project folder and run the following command to install Axios, a library for making HTTP requests:

npm install axios

Next, open your .NET Core project folder and run the following command to add Entity Framework Core packages:

dotnet add package Microsoft.EntityFrameworkCore.SqlServer

dotnet add package Microsoft.EntityFrameworkCore.Design

Step 6: Configure Connection Strings

In your .NET Core project, open the ‘appsettings.json’ file and add the connection string to your SQL Server database:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=.;Database=CrudDb;Trusted_Connection=True;"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Congratulations! You have successfully completed the migration and installation steps for setting up our CRUD application using React JS, .NET Core, and SQL Server. Stay tuned for the next article where we will start implementing the CRUD operations.