Learn React JS and .NET Core API by Creating a Full Stack Web App from Scratch

welcome to this course on full stack web development using react js for frontend.net core api for backend and microsoft sql server for the database you will learn how to add navigation menu with routing in react display data in bootstrap table add modal pop-up window with dropdowns and datepickers also learn how to upload photo and store it in the backend server let's install sql server which is needed to create databases and objects needed to store our app data just type install sql server and open the official download link download the developer version which is free to download and use run the installable file [Music] choose custom install click on installation and new sql server standalone installation let's choose database engine only for now and proceed with defaults choose mixed mode set the desired password also add the current user and make sure that the user is also admin now let's click on install now let's install the sql server management studio which is nothing but the user interface to work with databases just keep the defaults and install it now let's open sql management studio and check if everything is fine to open a local database just type dot in the server name and click on connect we can see some default system databases let's write a simple select query on one of the existing tables we have now successfully installed sql server and management studio now let's install visual studio which we will be using to create the api project just type download visual studio and follow the official website let's download the community version which is free to install run the installer file we need asp.net web development dot net desktop development let's also choose.net core development we have now installed visual studio now let's install visual studio code visual studio code as a popular lightweight open source code editor developed by microsoft just type install visual studio code and follow the official website download and install it with default settings we have successfully installed visual studio code now let's install postman which will be used to test the api methods just type install postman and go to official link download and install it with default settings you don't have to create an account just click on skip we have now successfully installed postman now let's install node.js which we will be using to create and run the angular project just type install node.js and go to official link download and install it with default settings you can open node.js command prompt to check the version and verify the installation we have now successfully installed node.js hello everyone in this video we are going to create the database and the tables required for our application let's first open up sql server management studio let's connect to local database to do that just type dot in the server name and click on connect we see that currently we don't have any user-created databases let's start creating the database and tables needed for our app just click on new query to open up a query editor to create a database just type create space database space the database name in our case the name of our database is employeedb once the query is written just select it and click on execute button the database is now created we can verify it by refreshing the databases now let's start creating the tables required for our app our app has mainly two screens a department screen and an employee screen so we need to create two tables let's start with department table the table will an integer id column with identity one comma one which basically means we don't have to pass values to this column it will start with value one and increments it each time a new record is inserted we will also add a column which stores department name let's execute this query let's write a select query on this table we see that we don't have any records in this table yet let's insert one by writing an insert statement we don't have to pass the value for department id since it will be inserted automatically after executing select query we can see that a row is now available with id equal to one now let's add another department we can see that the id of new department is two now let's start creating the employee table we need employee id column employee name column the department to which the employee belongs to the date of joining whose data type is a date and finally we will also store the uploaded profile photo name the actual photo will be stowed in the api app server let's write an insert query and a select query we have now successfully created the database and the required tables to build our application let's start creating the.net core web api project open visual studio click on create new project let's choose asp.net core web application let's rename it choose the preferred folder to save the project choose api we don't need https configuration for now now let's take a look at some of the important project files all the dependencies or the packages needed for our project can be found in the dependencies folder launch settings json file contains details of how the project should be started controllers folder is where we write all our api endpoint methods we will create separate controller files here as per requirement we generally keep our configuration values such as database details in appsettings.json the program.cs contains the main program which is the entry point of our project also it creates web host which basically helps the app to listen to http requests the startup class configures all the services needed for our app services are basically reusable components that can be used across our app using dependency injection it also contains the configure method which creates our app's request processing pipeline we need to make a couple of changes in startup class one is to enable the course by default all web api projects come with a security which blocks requests coming from different domains we are basically writing instructions now to disable that security and allow the requests to be served we are also making one more change to the serializer class to keep the json serializer as our default we might need to install a nuget package to do this let's import the namespace now let's simply run our project and check if everything works fine we see that the project works as expected and we are getting json result from one of the sample method now let's create the models needed for our app let's create a folder add a class file let's name it department.cs now let's add properties since department table has two columns we will add two properties similarly let's create the employee model now let's add our database connection in app settings file now let's add a controller to add api methods for department table to access the configuration from app settings file we need to make use of the dependency injection now let's add an api method to get all department details i am writing raw queries to keep the tutorial simple please avoid following the same you can use stored procedures with parameters or maybe even entity framework to connect to database to work with database we need to install a nuget package called system.data.sql client let's define a variable to store the database connection string using the sql connection and the sql command we will execute our query and fill the results into a data table and then return the data table as json result let's test this method using postman the get method seems to be working now let's add the post method to insert data we are writing an insert query to insert data the post method seems to be working now let's add put method to update data we will be using update query for this let's test the put method and update one of the department names the put method works fine as expected let's finally implement the delete method delete api method will receive the id of department as input bye since we are sending the id in the url we need to add it in the root parameter the delete method also works as expected let's add the api methods for employee screen we can just reuse the methods written in department controller and make changes to it bye let's now test all our employee api methods bye bye bye let's now write an api to store the uploaded photos let's create a folder to store photos to be able to use this folder in our app we need to add some instructions in startup class now let's create the api method i am giving a custom root name for this method we will simply extract the first file which is attached in the request body we need to again use dependency injection to get the application path to folder let's save this file in our photos folder once saved we will simply return the file name if there is any exception we will simply return the default anonymous photo file name bye we may also need a method to get all department names in the drop-down menu let's finish writing that as well let's now start creating the front end part using react js open up command prompt in the folder that you would like to create the project type npx create react app space the name of the app once command is executed it creates a folder with the given project name let's see the contents using visual studio code the package.json file contains details of all the packages being used by this project the node module folders is where all the packages are installed index.html file is the final file that gets rendered we see that it only has one div tag with id root let's see where this id is being used if we open index js file we see that the contents of app component is being injected into the div with id root now let's see what are the contents of app component let's just run the project and check how it looks just type the command npm start let's delete all the contents of app component and just add an h3 tag we see the h3 tag text but the styling is not reflecting this is because we have not installed react bootstrap let's install it just copy and run the install command also we need to copy the stylesheet link reference and paste it in index.html looks like the installation failed let's try again it's now successfully installed let's check if it works we see that the styling works as expected now now let's create the basic landing pages and navigation component create a new file and let name it home.js we need to import couple of modules to create a react component we are creating a class which returns the html view let's write a simple div tag with a simple text similarly let's create a department component and also employee component let's also create a navigation component and add the navigation menu we will have three menus in navigation bar one for home one for department and one for employee component now let's add our navigation component and other landing pages in the root component we need to import all those components here we need to import couple of modules from react router dom to configure the routing settings let's add the navigation menu we need to define the routing configurations inside the switch tag looks like we need to install the module react router dom let's install it we see that the navigation menu now works as expected now let's add our api url create a file with name.env let's store the api url with a variable name let's also store the photos url also add the file name in git ignore let's add a constructor to our component we need to write super props so that the component's constructor may get called we can define our variables inside the state of this component we are creating a variable to store department table data let's write a function to refresh departments array we are writing fetch method to get data from the department api once the data is available we update the department's array using setstate method we need to call the refresh method on a lifecycle method called as componentdidmount we will also refresh the array on component did update lifecycle method as well now let's add the bootstrap table to display all departments we display department id and department name columns also one more column for edit and delete options we now see department data in bootstrap table now let's create a screen to add department this screen will be a modal pop-up window now let's add form with text box for department name let's add a button to save the department the footer will have a close button to close the modal window we will define the on hide function in department landing page let's define the handle submit method to save the department name using api the body will have department name in json format once saved we will display the message in alert box if failed we will display failed message in alert box now let's make changes in department landing screen to show or hide the modal pop-up window let's define a variable to show or hide the modal let's add button toolbar for showing add department modal window we need to also bind the handle submit function in the constructor now let's add new department we see that we are now able to add new department let's complete edit department screen let's copy the contents of add department screen and make changes to it the api will be put instead of post we need to send the department id for update let's add one disabled form to display department id also we need to send the value from first screen and bind it using default value attribute let's add one variable to display or hide edit modal window let's add edit button and pass the department id and department name aim to the modal window we see that the update method works as expected let's finally add delete method as well delete department will be a function which calls the delete api with the department id we will ask for confirmation before delete we see that delete method also works as expected now let's complete the employee screens bye we need to change api from department to employee we may need additional variables for department photo file name and date of joining bye we see that landing screen for employee details is working fine as expected now let's complete the add new employee screen we need to declare departments array to show values in drop down we may need some variables to store profile picture details and photo paths let's populate the drop down array value and component did mount lifecycle method bye let's add a method to save the uploaded photo we make use of form data and append the uploaded file to it then send this photo to the save file api method once successful we update the image source the department field will be a drop down we will be mapping the department names using the array the date of joining will be a date picker we may also need to display the uploaded profile picture and also a button to upload new photo which we'll call the save file api also we need to bind the upload method and constructor let's try adding a new employee we see that add new employee works as expected let's now complete the edit employee screen let's change the post method to put let's display read-only employee id we need to pass the default values from employee landing screen bye we see that update works as expected with this we have completed all the basic functionalities of our employee management app

Channel: Art of Engineer

Views: 96,641

Rating: 4.8715367 out of 5

Keywords: react js, .net core, react js and .net core api, crud app, crud app with react js and .net core api

Id: gpfP60KjmZU

Length: 63min 28sec (3808 seconds)

Published: Sun Dec 27 2020