The main objective of the article are:
- .Net 6 Web API And React (V18) Application Communication
- Install SQL Server And SQL Management Studio
- Create A SQL Database
- Create A SQL Database Table
.Net6 Web API And React(V18) Application Communication:
- User requests the React JS application(single page application) then js files are downloaded and then runs the app on the browser.
- Since React JS is a single-page application, it depends on API for data to display.
- API runs at the server that gives JSON response. API communicates with the database for fetching the data.
Install The SQL Server And SQL Management Studio:
First, install the SQL server on our local machine. So go to "https://www.microsoft.com/en-in/sql-server/sql-server-downloads" and then install the developer version which is accessible and fully functional.
Next, install the SSMS(SQL Server Management Studio) IDE at "https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver16"
CREATE DATABASE ReactJSDemo
- Here 'ReactJSDemo' is the name of my database.
Create A Sample Table:
Let's run the following SQL script to create a new table. While running the below script make sure to select your active database under which our has to be created.
CREATE TABLE SuperVillain ( Id INT IDENTITY(1,1) NOT NULL, VillainName VARCHAR(200) NULL, Franchise VARCHAR(100) NULL, Powers VARCHAR(1200) NULL, ImageUrl VARCHAR(2000) NULL CONSTRAINT PK_SuperVillain PRIMARY KEY (Id) )
- Here we creates a sample table like 'SuperVillian' that has columns like 'Id', 'VillainName', 'Franchise', 'Powers', 'ImageUrl'.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on the .NET 6 Web API and React JS(v18). using I love to have your feedback, suggestions, and better techniques in the comment section below.
Refer:
Part-2 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-3 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-4 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-3 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-4 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-6 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-7 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Part-7 | .NET 6 Web API | SQL Database | React JS(v18) | CRUD Example
Comments
Post a Comment