Build app using React JS, .NET Core Web API and Microsoft SQL Server

hello everyone in this tutorial we will learn how to build a simple to do application from scratch using react.js as frontend.net core web API as backend and Microsoft SQL Server as the database here is a demo of the web application we will first install all the prerequisites then we will create the database and objects required for our app next we will create the backend project using.net core web API and finally we will start creating the react.js project let us now install node.js first let us download the installer file let's install let's verify the installation by checking the node and npm version we have successfully installed node.js let's install SQL Server management Studio which we will be using to create database objects in SQL Server ssms is installed successfully let's install Visual Studio which we will be using to develop the app which is needed for this project we will be installing the community version which is free for learning purposes let us run the installer file let me choose asp.net and net desktop development let me put a shortcut in the desktop we can skip the sign in and choose a theme Visual Studio is now ready to be used let's install Visual Studio code I have a Windows 64-bit system so we'll download accordingly let's install it Visual Studio code is now installed successfully let us now set up an SQL Server database using azure let's login to Azure portal please note that you need to have a valid subscription to create resources in azure now let's create the SQL database let's create a new Resource Group next we need to enter the database and server names next we need to add credentials for login let's choose development version as it costs less and also reduce the data Max size let's choose public endpoint since I do not have any private Network and let's keep others as default the database server is now ready we can use it in our app with the help of connection strings let's connect to the database using the SQL Server management Studio looks like we need to provide access to our IP address let's add it in the Azure portal now let's connect let's add the table required for our app to store the notes details it will have two Fields one is an auto-generated ID and another one to store the notes description let's add some records into it our database table is now ready to be used let's start creating the API project open Visual Studio let's choose asp.net core web API we don't need https now we need to add a couple of changes to the project open program.cs file we need to add Json serializer as default so let's install newtonsoft Json package looks like the latest version is not compatible let's use the older version now let's configure this in program.cs file next we need to enable course so that we can consume the services from the front end project generally this is not recommended in production you should only whitelist the servers accordingly now let's add a controller to add our API methods we need to First add SQL server connection settings in app setting Json file let's get the SQL connection strings from Azure portal now let's write the method to get all the notes data let's write the select query to get the data we need to get the connection details we can make use of dependency injection to access connection details let's complete our get notes method once data is available in data table we will return this as Json result Let's test if this works we see that it works now let's complete the ADD and delete notes methods as well Let's test if they were work as expected we see that we are able to add new notes let's check the delete method delete method also works our API project is now ready let's create the react.js project just open up the command prompt and type the command npx create react app and the name of our project let's open the project in Visual Studio code let's simply run the project and see how it looks we see a default template let's remove all this and put a simple header tag upon saving the page refreshes automatically let us now add the HTML and the methods required for our app we need to make few modifications to the app.js file we need to modify it as a component so that we can add the methods let us now add the Constructor for this class super props will basically help initialize the parent Constructor as well in the state we can include the variables to be accessed in HTML we just need one array variable to display the notes let's create a variable to store the API URL next let us write method to get data from the API into the notes array we will use the fetch method to call the API to get notes data once the response is received we will update the notes array variable by setting the state we have a lifecycle method call component did Mount which will execute once page is loaded we will be calling the refresh notes method here let's use the notes variable to display results in HTML we need to First declare the state variables in render method now let's display the data in HTML let's check if this works we see that the data is displayed as expected now let's add the text box and button to add new notes let's also add a button to delete a particular note we need to pass the ID of the note to be deleted now let's complete the method to add notes let's first capture the input data from text box next we need to create the form data to send to the post API method once done we will alert the message and also refresh the notes array similarly let's implement the delete method we need to pass the ID to be deleted we will be passing it as a query string now let's check if everything works as expected let's try to add new notes it works as expected let's try deleting it the delete also works as expected our to-do app is now completed

Channel: Art of Engineer

Views: 10,950

Keywords: react, react js, .net core web api, .net core, full stack, front end, backend, sql server

Id: O5hKoBV3vaU

Length: 29min 49sec (1789 seconds)

Published: Sun Jun 18 2023