React with Spring Boot Full Stack Project | Full Course [2022] | React Hooks | REST API | MySQL

hey there everyone ramesh here today i'm going to start a new brand series on react hooks spring boot full stack application development well this course is going to be a very interesting guys and you will learn a lot about react hooks in this course so what you will learn in this course you will learn how to build a crew rest api using latest version of spring boot spring data jpi in my sequence most importantly we are going to use intellij idea to build a rest apis okay and you will learn how to build crude react application and you will learn these important react hooks use state hook use effect hook use params use history and there are few more hooks all right and you will learn how to connect your react application with spring boot all right so the bottom line is you will build a complete application using react and springboard and we are going to use latest version of all the libraries and frameworks okay great you might already know that i have published react.js spring boot crew full stack application course on my youtube channel well in this course i haven't used react hooks i have used plain react.js for react application development so if you are completely new to reactors then highly suggest you guys to first go through this course in this course you will learn how to use react.js uh you know to build a react application all right at a beginner level i have explained everything about react.js in this course okay and i have used class component in this course all right so if you are new to react.js then i highly strongly suggest you guys to go through this course first and then you can take this react hook spring boot full stack application development course so before kick starting this series let's first understand what we are going to build in this course we are going to build a simple employee management application well this is the least employees page it contains a list of employees and here we have add employ button so once user click on add employee it will navigate to add employee page and from here user can able to add a new employee let's say first name last name and email id and hit submit and there we go user is successfully employee successfully added to the list similarly let's go ahead and let's add one more empty let's say john and last name cena and john gmail.com hit submit and there we go all right and user can also be able to edit the employee for example let's say we're going to edit a remis employee let me change and name post name from ramesh to ram and let me change the email id from remiss to ram at the gmail.com hit submit and there we go i employee is successfully updated and user can able to you know delete the employee for example here click on just delete button employee successfully deleted let me delete one more employee yeah so this is the crew operations that we are going to implement in this course well if you guys for you know find this course useful then i will plan to add a few more feature for this application for example i will add a search box here so user can able to search the employees and i will also add one more button like view so user can able to view the employee details individual employee details all right let me know in the comment section if you find this course useful then i will plan to add a few more features for this project alright and i highly suggest you guys to start coding with me in this course okay this is the best way to learn code along with me so you will get a hands-on experience on you know coding all right great well what we'll build in this course we are going to build two projects springboard backend up application which exposes the rest apis react hooks front end which consumes the rest apis and what is the free cases for this course well you need to know about html css and javascript basics and you should have you know basic understanding of react.js and you should have a basic understanding of springboard basics and make sure that you have installed no dynpm on your machine well what are the tools and technologies that we'll be using in this course at the server side we are going to use english idea for building spring boot application we will use java 8 plus spring boot latest version spring data jpa mysql database marvin and we use postman client to test the rest apis and at the service client side we're going to use react.js that is latest version of react.js react hooks visual studio code id for building react application and we're going to use latest version of bootstrap css framework and we are going to use axios http library so these are the very important guys uh you know client time server side frameworks and technologies well let's quickly take a look into react springboard full stack application architecture well as we know that react is a javascript library for building user interfaces and react hooks basically allows us to you know use state in a functional component not only state but we can also use other react features using react hooks all right and as we know that springboard is a very popular java framework for building rest apis and micro services all right so the combination of react.js and springboot is very popular nowadays for developing a full stack application guys so here you can see at the server side we have spring boot uh you know back end application and here we have react application at the front end and well react is not concerned with http library we have to use third party http library to make a ajax call or rest api call in a react application so in this course we are going to use axios http library to make our sdpi call in a react application and you can see here springboard application uses mysql database okay well this is a you know typical architecture of react and springboard application at the back end we have spring boot up application which exposes the rest apis at the front end we have you know react application which consumes the rest apis and at a database level we are using mysql database to store and retrieve the data all right guys let's go ahead and let's create spring boot application in order to create a spring boot application we are going to use being initializer well let's head over to your pivot browser i am in a chrome browser and in a new tab just type start dot spin dot io this will bring some spring initializer website okay so spring initializer is basically a website which we can use to create spring boot application okay well here we have a project types like maven project and gradle project let's keep marvin project selected as it is and language java spring boot version 2.5.5 so don't choose snapshot or other releases just keep default selected one that is 2.5.5 so this is the latest and stable version of springboard now go ahead and enter the project metadata over here so let's give group id as net dot java guides and artifact id as spring boot backend and description something like demo project for spring boot rest apis all right and package name net dot java dot spring boot perfect packaging keep jar and java version 11 you can choose 17 or 8 as per the jdk installation on your machine okay so go ahead and click on add dependencies over here and here we are going to choose the dependencies let's go ahead and let's choose spring web dependency well we want to build a rest apis guys that's why we are going to choose spring web dependency well spring web dependency we use to build rest apis as well as spring game uc applications and spring web dependency internally provides apache tomcat as a default embedded container so go ahead and pick up this dependency apart from that we are going to use spring data jpa well in order to talk with the database we are going to use spring data gpa and spring data jp internally uses hibernate as a default jpi provider okay so spring data jp is very uh useful module guys it reduces a lot of while update code that is required to develop the dowel layer or repository so we are going to use spring data gpa so apart from that we are going to use a mysql database at the back end so in order to connect mysql database from our springboot application we are going to use mysql jdbc driver all right so apart from that we need a longbow dependency to reduce a boilerplate code okay so these are the dependencies that are enough to create our screen boot application and exposing crude arrest apis okay so next you can explore this project by using explore option over here for example you can see what are the dependencies you have added to springboat application you can explore the project structure okay so just go ahead and close it and click on generate to generate this project as a zip file on your file system so go ahead and click on generate so look at here this springboot application is downloaded as a zip file now let's go ahead and open in a folder and just extract this zip file okay now open english idea and import this spring boot application in inclusion idea so i have open intj idea and here you can see open button so you can click on open button to open existing project so go ahead and click on open and go to the directory where your project is downloaded so my project is downloaded under downloads folder so i go to download folder and just select springboot backend project and open in a integer idea okay so this will take a couple of seconds to import springboot project properly in english idea all right our springboot application is properly imported in integer idea next what we're going to do is we're going to create project structure for our springboot application well just expand expandable project go to root package right click on it new and then choose package let's queue package name as model so within the model package we keep all our jp entities so let's go and let's create one more package right click new one package and let's give package name as controller so within a controller package we keep all ours being a music controller so let's go ahead let's create one more package and let's call it as a repository so within a repository we keep all our spring data jp repositories so right click on root package new and then choose package and let's create one more package something like exception all right once we have created a packaging structure for our spring boot application next we're gonna configure mysql database in our springboot application we'll go to a resource folder within resource folder you can see application dot properties file so all the application level configuration we keep within our application.properties file so before configuring mysql database in sprintbot application first we need to create a database in mysql server so let me go to the terminal over here and let me connect to mysql server by using a terminal or command prompt if we are using mysql workbench then you can also create a database using mysql workbench okay so i have connected to mysql cell and here i'm going to create a database just exhibit the query create database and let's say any of the databases ems that is employee management system hit enter and there we go we have created create database and we have created ems database if you want to see the database just type the command show databases and you can able to see here ems databases listed in a mysql database server all right now let's get back to intellij idea and here we want to configure mysql database configuration in springboot application so within application.properties file just type these properties spring.datasource.url and jdbc mysql localhost 3306 the port of mysql server ems is the database name just we have created and we have a disabled ssl and username root and this is a password for my uh mysql installation so make sure that you have you know replaced this username and password as per your mysql installation okay i have seen that many of you guys don't replace and uh don't replace this username and password as per your mysql installation and you cannot able to connect your supreme boot application to mysql database so make sure that you will replace my sequel username and password as per your mysql installation in your machine and then we need to specify the hibernate dilate for my sql database okay so hyphen it internally uses this dialect to create a sql and execute sql as per the database so in our case we are using mysql database and here we are using update value for ddl auto property because this property is very useful while development guys so this property i know will update the existing tables if tables are not existing database and if tables are not existing database then it will create a fresh tables okay so it won't delete the existing tables let's say if we add a new column to the existing table then it will simply alter the table it won't delete the table okay so very useful property but if you are deploying your application on production then make sure that you use the property value as validate or create okay create or drop for development i'm going to use update okay so these properties we can you can copy from my github repo okay i will host source code of this project after completing this course and you can get this code from the github repo or i will give a link in the video description for the same and you can also copy this code from my blog post okay i will i will provide a link in the video description all right guys now we have configured my sql database in springboot application let's run our springboot application let's see whether our springboot application is able to connect to my sql database or not okay go to springboard management class and here we can run this class as a as a java main class okay because this class has a main method so we can run this application as a standalone and if you can see in a console springboot application is up and running in embedded template server on port 802 and there is no error in a console it means that our springboard application is successfully connected to mysql database previous video we have created a springboard application and we have created a packaging structure in our springboot application and we have configured mysql database and we ran our springboot application and we were successfully able to connect our springboot application with mysql database in this video what we'll do will create jp entity spring data jp repository and one custom exception okay let me stop the server let's go to model package right click on modern package new and then choose java class and let's give class name as employee hit enter and let's define few instance variables private long id so this will you know become a primary key for employees table and then private string first name first name of the employee similarly let's have a last name of the employee let's create one more field something like email id okay great let's use lumbar connotation to reduce a bilateral code so when i use add add getter number connotation to create a getter methods for these private keys and i'm gonna use add setter number connotation to create a set of methods for this private fields and we're gonna use no arrangement constructor and also we're gonna use all argument constructor okay great so instead of these two dependencies you can also use add data lumbar connotation for example additional lumbar connotation but add data lumbar connotation internally provides so many things like it internally generates two string method hashcode method equals method okay so we don't want all those methods so we're gonna simply use add getter and add setter methods here set your annotations over here okay great now i'm gonna use jp annotation to make this class as a jp entity let's add at ltd jpi notation to make this class as a jp entity and when i use add table annotation to provide a table details over here so let's give table name as replies you can also specify schema and other details okay to keep it simple we just give table name to this class and apart from that we're gonna use at id jpi rotation to make this id as a primary key and also gonna specify at generated value annotation here because we need to provide primary key generation strategy right so let's do identity as a primary generation strategy and here when i use add column annotation to map a column name or to create a column name for this field let's give column name something like first underscore name and you can also specify another label here if you specify null label equal to false then this column becomes not null okay so go ahead and remove this similarly let's give column name for last name as well name equals to last underscore name okay and here we're gonna specify name for email email underscore id okay perfect if you don't specify add column annotation then jpa internally you know by default pick up this this property name as a column name okay if you don't specify at column annotation like this then jp is smart enough to give a column name as name of this field okay so we want column name as email underscore id hence we need to specify this annotation now what we will do will run our springboard application and we'll see whether this employs table will get created in a database or not let me go to spring main entry point class and let me run this springboard project and our spring boot application is up and running in embedded drum cad server in port 8080 now let's head over to terminal if you have my secure workbench then you can go ahead and you can just open ems database okay i say use ems here database changed and i'll say show tables and there we go employees table is successfully created in ems database it means that our jp entity created successfully okay next what i'm going to do is we're going to create spring data jpeg repository go to repository package right click new and then choose java class and choose interface here and just you interface name as employee a repository hit enter and this repository should extend jpi repository and jpeg repository interface expect two parameters first is type up the jp entity second type of the primary key so we have given type as long to the primary key hence we have specified employee as a long as a type here as a second parameter and this is the employee gp entity type okay and here we don't have to add a repository annotation here because spring data jp internally take care of adding add repository annotation to to jpeg repository implementation class okay great now we have created employee repository which extends jp repository now this employee repository will get all the crude database methods okay all crude database methods to interact with the database all right once we create employee repository next we're gonna create one custom exception that is resource not found exception so whenever a required not existing database table then our application should throw the exception uh that exception will be again sent back to the client right so for that go to the exception package right click on it new and choose java class and let's your class name is resource not phone exception and hit enter and this exception should extend runtime exception okay and go ahead and create one constructor over here public resource not found and here we're gonna pass message and this constructor takes a parameter as a message okay great now what i'm gonna do is we're gonna annotate this exception with one very important annotation that is add response status annotation so we can also annotate this uh we can also use this annotation in rest api but instead of repeating this annotation in each and every rest api which throws this exception we can simply add this annotation in a common place okay in this custom exception itself we no need to repeat this annotation in all the rest apis which throw this exception okay so whenever a rest api is through this exception the rest api should return this exception message to the client right with status code not form for that we're gonna define a value here status value is not not found right http status dot not found okay great all right we have created one custom exception and we have created jp entity and we have created spring data jp repositories in this video in previous video we have created a jp entity spring data jpeg repository and resource not from custom exception in this video we will create get all employees rest api okay so we are going to build get all employees rest api well go to controller package right click on controller package new and then choose java class and let's give class name as employee controller let's annotate this class with add rest controller annotation and attached controller annotation internally annotated with add controller and at response body or rotation so once we add this annotation that is a rest controller notation to this class this class becomes spring mvc rest controller and capable to handle the http request and all the rest api that we are going to build that we will define within this class okay so now go ahead and add wire employee repository private employee repository and employees positive great now let's create a method public with written a list of employees so you list up type employee let's give method name as get all employees okay and we don't have to pass any argument to this method so this method simply returns list of employees so we need to fetch a list of employees from the database for that we're going to use employee positive dot final method so look at your find out method returns a list of objects in our case list of employees all right now let's annotate this method with at get mapping annotation okay now what we're gonna do is we're gonna define a common base url for this rest apis for that we're gonna use add request mapping annotation here and here give a base url for all these rest apis that is api slash v1 slash employees okay great now this api will return a list of employees to the client okay great now before you know testing this rest api what we're going to do is we're going to insert few records to the database so that whenever we test this rest api this rest api will return those records from the database so go to main entry point class and here just implement command line render interface this will provide a run method and this run method basically executes whenever his premod application starts first time okay before writing any code within a run method first we're gonna add wire employee repository perfect now within a main method create object of employee and just set value to the employee employee dot set first name let's say ramesh employee dot set last name and employee dot set email id remis gmail.com and i'm gonna call employee repository dot save method to save this employee object to the database similarly let me copy this code and let me i know insert one more required copy this paste it here and just rename the object employ one employee one okay and just change the values let's say john cena and email as seen at the gmail.com okay great now what i'm going to do is win a runner's premium application and we'll test get all employees rest api so go to main entry point class again and from here we can run our springboot application well our spring boot application is up and running in embedded tomcat server on port 8080 let's head over to postman client so i'm in a postman client i will create a new request over here and choose http get method and type http colon localhost localhost colon8080 slash api slash v1 slash employees and go ahead and click on send button and there we go return a list of employee objects okay we have successfully got a response of the rest api as a list of employees it means that we have created get all employees html successfully okay great in next video what we'll do we'll create a react application and we'll consume this rest api in this video we are going to create a react application well before creating a react application make sure that you have installed node.js and npm on your machine if you haven't installed node.js and npm then head over to node.js official website download page and download node.js as per your operating system and install in your machine okay so npm come along with node.js so you don't have to install npm separately next we are going to use a text editor so that is visual studio code id okay so in order to develop a react application we are going to use vs code id so make sure that you have installed visual studio code id on your machine okay guys if you haven't installed visual studio code id yet you can go ahead and visit official website of vs code and you can go ahead and download vs code that is visual studio code id as for your operating system well once the setup is ready then create a folder called react underscore.js on your file system and open visual studio code id within this folder okay great now what we will do we will open a terminal in vs code id and from the terminal we are going to create a react application all right so one more important thing is we are going to use create react app cli tool create react app cli tool so this is kind of a popular tool that we can use to create a react application with no configuration okay so we can use couple of commands here you can see npx create react app command followed by name of the react application and npm start so these are the couple of commands that we can use to quickly create react application and quickly run the react application we'll head over to vs code again and in a terminal just type node hyphen v in order to check node version and just type npm hyphen v to check npm version all right so let's go ahead and let's use npx npx followed by create react app this is the command followed by name of the react application let's say react hooks front end something like that hit enter so this will take couple of minutes uh to you know to create a react application and set up the react application all right guys react application is successfully created and you can see here react hooks front end project is created we'll go to terminal again and you can see these are the couple of commands that we need to use so just type cd and then react hugs front end so before i know before starting our application using npm start we need to move into project okay now let's go and let's type the command npm start to start react application so look at here a react application is running on a development server on port 3000 so let's head over to chrome browser and let's access react application with port 3000 okay so let me go to chrome browser in a new tab just type localhost colon 3000 and there we go all right our react application is up and running now let's go back to vs code id and let's quickly explore the project structure of our react application let's begin with package.json file well package.json file basically contains all the dependencies that we are using in our direct application for instance react library we are using with the latest version 17 plus we are using react dom reacts scripts okay and here you can see couple of scripts that we need to use to start the react application to build the react application and to test the react application okay and you can see at the bottom these are the few browser specific settings all right guys so package.json basically contains a dependencies and its version and scripts that needs to execute okay and name of the project version of the project etc okay so whatever the dependencies that we install by using npm that will be updated in package.json that we will see once we install bootstrap and other libraries all right next go to public folder within the public folder we have index.html file so this is a very important file guys in react application you can find only one html file that is index.html file because it is a single page application and if you can go inside a body section you can find a new element over here new element with id root so whatever the component that we are going to uh you know build in our react application that will be dynamically will get updated within this due okay great and this id that we are going to use uh in you know in one of the file that is index.js so look at here so basically we get our due by using this uh document.getelementbyid method and we render a component within this div with id root okay great and most of the time we don't change index.html page sometime we may change a header section like we may add some scripts links external links or css links but definitely we don't change a body of this html file so next we have node underscore modules folder well whatever the packages and libraries that we install using npm that will go inside node underscore modules folder so this is for only development purpose next move to src folder so within src folder you can see index.js file so this is the entry point of our react application guys and you can see this is the main very important method reactdom dot render so this render method basically render app component app component is basically our root component in our react application okay and reactdown.net method will render this root component called app component so this component will be rendered within this dom element okay so we have seen a due in index.html page right here and this duo contains id root all right so this due will be i know retrieve here by using document dot get element by id and then this app component will be rendered within this view with id root okay next we have app.js so this is the app component and it's a root component basically so whatever the component that we create in our react application that we will import within this component all right all right guys these are the few important files and folders in our react application okay so let me recap what we have done in this video we have created a react application using create react app cli tool and we have started react application and we have gone through some of the important folders and files in our react application okay so in next video what we'll do we'll install bootshrap css library in our react application in previous video we have created a react application we ran the react application and we gone through few of the important folders and files in the react application in this video we are going to install bootstrap css library in our react application all right so bootstrap is a very popular css framework guys to you know to develop a responsive website applications etc okay so we're gonna use bootstrap css library in our react application well in order to install bootstrap css library i'm gonna use npm command okay so go ahead and open one more terminal so you can see here plus icon to go and click on it now i have opened one more terminal all right so before typing any command make sure that you are in a folder you are in a project folder okay just type cd react hooks front end hit enter and you can see we are in a react hooks full front end project now we can type the command npm install you can also give i shortcut for install and library name that is bootstrap and hypernation save so don't forget to mention hyphen hyphen save because whenever bootstrap library install then one entry will be added in a package.json file so if you can see here in a package.json in a dependency section you cannot find bootstrap here because we haven't installed bootstrap yet okay so once we install bootstrap then bootstrap entry will be added in a dependency section okay so let me install the bootstrap okay so here is a small typo this should be install okay so go ahead and hit enter and you can see here bootstrap library is installing and there we go once bootstrap installs successfully you can check package.json file and within a package.json file within a dependent section you can see bootstrap 5.1.1 okay bootstrap entry is added all right great it means that we have installed bootstrap library by using npm command now what we'll do we'll import a bootstrap in our react application so go to index.js index.js is our starting point so at the top we are going to import a bootstrap file import bootstrap dist css slash bootstrap dot min dot css okay that's it only two steps guys we need to install bootstrap using npm command and we need to import a bootstrap file in index.js file all right now we are good to use bootstrap css well this is the first method you can use alternative methods like you can directly you know go to go to google and just type bootstrap for you cdn okay you can directly give cdn links for example you can just copy the cdn link from the official website and you can go to index.html in the public folder we have index.html and go to address section and here you can paste this link okay and once you add this link in a header then you are good to use bootstrap css lab classes okay this is the second uh approach so i suggest you to install the bootstrap and use the bootstrap css you know file in your react application so don't go for this cdn links okay great all right guys let me recap what we have done in this video we have installed bootstrap using npm and we have imported bootstrap you know library in index.js file in next video what we'll do we'll create a react component and we'll start using react hooks we are going to create list employee component okay so head over to src folder within src folder we are going to create a new folder let's call it as components all right and within the components folder we are going to create a list employee stateless component okay so just right click on components folder new and then let's give component name something like list employee component dot js okay hit enter so as we know that in react we have two types of components right class component and functional component well in class component we can define the state but in functional component we cannot define the state okay and class component is also called stateful component because we can define a state in a class component but in a functional component we cannot define a state hence functional component is also called stateless component all right and in order to you know use state in a functional component we can use react hook okay so we have use state hook okay so we have use state hook so we can use this hook to have a state variable in a functional component okay so very important hook guys whenever you want to use state in a function component then go ahead and use use state hoop use state hook is basically a hook or a function that allows you to use state variable in a function component okay great now let's go ahead and let's first install a very important extension that allows you to quickly create a snippets okay for example we can quickly create a class component functional component arrow functional component etc so go to extensions section in visual studio code id here and just type react snippet and here you can see is s7 react redux and react need to snippet so go ahead and install this extension now let's head over to list employee component.js file within this file we are going to create a stateless component or a functional component we'll just type the command react functional or react arrow function component and you can see here react arrow functional component react arrow function export component so go ahead and choose this one react arrow function export component okay so i prefer using es6 arrow functions over a plain javascript functions hence i am using arrow functions over here so you can of course use plain javascript function for example you can just type react functional component rfc you can able to create a react function component okay so this is the plain javascript function all right so i prefer using arrow function so i am going to use es6 have function okay great so once we create stateless component then we can use use state hook to define a state within this stateless component within a list employee component we are going to use use state hook so just type use state all right and hit enter and you can see here this is the syntax of use state hook so this is the initial value for the state and this is the state name and this is a function to change the state value so basically this is the function guys use state hook is nothing but a function it return the current value along with that the function that we can use to change the state value and this is the initial value of the state okay and whenever you use use state in a component make sure that you import use state hook at the top okay so within a curly braces use state use state from react library well here we are going to give state name as employees okay and the function name is set employees and initial value for this employee state is mtre okay i hope you clear i know how to use use state hook so use state hook is nothing but a function it returns the current value of the state along with that function that we can use to change the state value and this is the initial value for the state okay great and one more thing is in functional component or stateless component you cannot find a render method so in class component you can find a rendered method right so go to just a return here and here we are going to use jsx to design a page so within a due we are going to write a jsx code to design a list employee page so in a due just use a class name attribute to give a class css class for the due we're going to use container bootstrap css class so in a react we need to use uh you know class name like this in order to provide a class css class to html element we need to use class name okay so this is basically a jsx attribute you can read the description over here all right within the due we are going to have a header header for our page let's use h2 and let's say list employees is the header of our page and when i align our you know uh heading at a center for that let's add a bootslab css class that is text center all right after that when i use a table here html table to display a list of employees in a table perfect now let's apply some css classes to the table let's say table and then table hyphen border and table hyphen strip or something like that and within a table we're going to have a table table header okay within a table header we're going to have a table columns so let's view column name as employee id similarly let's create one more table column here let's say employee first name and similarly let's create one more table header here i mean table column employee last name and last one employee email employee email id all right now we have created table header let's go and let's define a table body for this table we have a table body html element okay so now very important guys uh here we need to write a jsx code so we have employees array we need to iterate our array and we need to display the table for that we are going to write a jsx code and here is a syntax within a current basis let's you know call employees state variable or we can say employees array that we're gonna use map function to uh you know iterate over employees array and then create alias for each employee and we're going to use arrow function and let's use table root tag here perfect and we need to provide a unique key for each row for that let's use key attribute and then let's you know get employee within a curly basis employee dot id so this is the syntax to you know get a javascript variable i mean to access the javascript variable all right great now let's go ahead and let's have a table data here and within a curly braces we imply first name and similarly let's access employee last name within the current basis employee dot last name and we have employee dot email id so make sure that you give a field name same as i know the json you you will get in a response okay first name last name email id and here we have four table column and here we have defined three right so let's go and let me copy this and let me add one more table data here and let's call it as id okay id first name last name email id here we have table column id first name last name and email perfect all right save the file now we have designed list employee component now we are going to import this component in app.js so here go to app.js file and get rid of this code and also get rid of the css class and within this we're gonna import list employee component and close it and make sure that list employee component is imported at the top okay great now just save the file and go to node terminal and you can see here there is no compilation error and it's it gives a warning like logo is defined but never used so let me remove this logo is not important for us now just remove it and no more compilation errors so let's head over to browser in a browser is just refresh and you can able to see here list employees page with html table so we haven't you know connected uh with the server yet we haven't made a rest api call from the react application to get the list of employees so we have just designed the least templar component in this video in next video we are going to connect our react application to a server i mean we are going to connect our react application to rest api and you will get a response from the rest api and will populate that response on the web page okay great in next video we'll connect our react application to the rest api and we'll get a list of employees in a response and will populate that list of employees in this page previous video we have created a list employee stateless component and we have designed list employees page in this video what we are going to do is we are going to make a rest api call and will populate the response of the rest api on this page okay so let's go ahead and let's see how we can connect our react application to a rest api and how we can get the response and how we can populate that response in a web page so let's head over to visual studio code ie all right and go to src folder within src folder we are going to create a new folder let's call it as services within our services we are going to create a file let's call it as employee service dot js okay so as we know that react is not concerned with http library we have to use third party http library in order to make a jax call or sk call in a react application so we are going to use axios http library to make our sdp call in our react application so in order to use axios library what we need to do is we need to install axios library so go to the terminal let me clear the terminal here and make sure that you are in a project that is react hooks front and here we are going to use npn command npm install followed by the library name that is axios and hypen open save so don't forget to add hyperlink and save because this will add entry in package.json file so go ahead and hit enter and let's wait couple of seconds and there we go axios library is successfully installed just verify go to package.json and here you can see axios you know library is installed and added in a dependency section all right now we are good to use axios library okay head over to employservice.js and within this file we are going to import our from axios okay great and here we want to define one constant with a base url of rest api let's call it as const employee base rest api url something like that so this is going to be constant so you can give naming convention like this and value should be http localhost colon eduard0 slash api slash v1 slash employees all right so this is the rest api that we have already developed to get you know list of employees in a response perfect now let's go ahead and let's create a javascript class here let's call it as employee service perfect now let's create a method let's say get all employees and within this method we're gonna use rgios dot get method okay so in order to make a get http call we're gonna use get method here and we need to simply pass the url that is employee base url let's say sdp url that's it guys so objects internally make a sdp call and it provide a promise object to the respective components where this service will be used okay now we are going to use this service you know list employee component so just go ahead and save it and one more important point here is we are going to export this class object okay so here just type export default new and then employ service so look at here we are going to export object up employee service so that we can directly use object in a component we don't have to you know instantiate this class object okay go ahead and save it now let's head over to list employee component and within this component we are going to call employee service well in react we have one more hook that is use effect hook so you use effect hook is very uh useful guys uh and it it it provides some side effects uh you know in a functional component okay so probably you know about component in mount component did update methods right in class component so use epec hook is similar to component did mount component did update okay life cycle methods all right so in class component we use component did mount method to make a api call or make a jack square right similarly in functional component we can use use impact hook to make ajax call or epa one okay so go ahead and just use use effect hook and here is the syntax guys so here we need to first a function and here we need to define the dependencies for this hook so as of now we don't have any dependencies let's keep empty okay and just remove it all right so make sure that you import use effect hook at the top okay you should import use effect hook at the top from the react library all right now within our user facebook we are going to use employee service and it's called get employees method and it it returns a promise object so called then method and let's first response okay let's get a response from the promise object and here we are going to use arrow function perfect and we need to set a response data to employees already right for that we're going to use the employees method so let's call set employees okay and response dot data perfect we can also log log the response data to the console console.log and response dot data we can also have a catch method here and we can just print the error error let's use arrow function and just log the error console.log and then just print the year perfect now what we need to do is we're gonna we're gonna test this whether it is working or not so go to node all right there are no compilation error let's head over to chrome browser and let's test this functionality whether our react application will connect to a rest api and display the response of the rest api and there we go we are not able to get the response of the html let me inspect and in a console you can able to see that cause policy issue so this is the you know common issue that we get because our spring boot application is running on port 800 and our react application is running on port 3000 so both applications are running on different different ports that's the reason browser will give this kind of cause policy issue so in order to solve this issue we can use add origin i mean cross origin annotation in our spring boot application so let me jump into english idea and let me first stop the server go to employee controller and here at the top we can add one more annotation that is cross origin annotation and here we can pass a value star so if we pass star here then any client can able to access the resting points okay uh if you are developing angular application then you are angular application can call these htp if you are developing react application then your react application can you know access this rest api if you are developing a view application then your view application can access this rest api okay so either you can make a star here in order to provide access to all the clients or you can you know define the specific uh origin for example it has origins and you can just define an origin in array okay something like localhost colon 3000 so let me copy this and paste it here okay so i want to give access of sda page to all the kind so what i will do i will give star here okay just save it all right let's head over to springboot entry point class and here you can see this is the code we have written to add or two records in employees table right so if records are already added in a database just comment it out otherwise duplicate records will be inserted in a database table so let me comment out this code save it and go ahead and run our springboot application and our spring boot application is up and running let's head over to chrome browser and let's try to access the rest api and there we go once i refresh the browser i can able to get a response of the rest api and that will be populated in a web page all right guys it means that we have successfully made our sdp call from our react application and we have populated at least type employees in a table okay great in next video what we'll do we'll add a header and footer to our react application and then we'll see how we can use a routing in react application and going forward we will be creating a lot of components guys and we are going to use a lot of react works all right in previous video we have connected our react application with get all employees rest api and we have populated the response of their sdp on our web page in this video we are going to create a header and footer for our react application okay and we are going to use react function component to create header and footer well let's head over to visual studio code id and go to components folder and just create a file named header component dot js and within this file we are going to create a stateless functional component well i am going to use arrow function so again we are going to use a react snippet here to quickly create a function component well just type the command react arrow functional component and export okay export so go ahead and choose this one so here i'm using arrow function but you can use a javascript function to create a function component perfect now go to do within a due just create a header html header and within header just have one navigation bar okay and then add a bootstrap css class to just make this nav bar you know stylish and we are going to have a dark color at the background and then within our navigation bar we will have one due okay and within it you only have an anchor tag and we have a hrap attribute and i'm going to give a link to my blog website but you can give any link that you want java guides.net okay and just have a css class something like nail bar brand okay and here i'm going to give application name something like employee management application perfect so okay we have created a simple header component now now i want to create a footer component well go to components folder again and let's give file name as footer component dot js and again we are going to use react snippet here just type the command react arrow function component export export and just hit enter and within a due we are going to write uh you know code to design the putter in a due just have one quota html element okay and just view css class name something like porter and within a portal html element just create one spam html element saying like all rights reserved to zero to one jargons okay so typically in porter we mention the copyright details right great now we have created one custom css so we're gonna add a custom css code in app.css file so go to app.css file and this code we are not using so let me remove it and let me quickly write a custom css here so this is a putter custom css class with position bottom with height and backlog background color text align and color okay so you can just type line by line or you can just copy this code from my github or repository i will provide a link in the video description well just save it now we have created a header component and put a component we want to import these two components in a app.js file go to app.js js file and here we have a list component already at the top of the list component we are going to have a header component and make sure that header component is imported at the top and after released employee component we're gonna just simply call porter employee putter component and make sure that booter component is imported at the top okay great now let's save the file and there are no compilation error let's head over to chrome browser and let's see how our application looks like and there we go header is successfully added with application name employee management application and footer is also added here footer is fixed fixed one okay all right now we have added header and putter to our react application in next video what we'll do we will add a routing in our react application we will see how we can configure routing in react application and how we can provide routes for different react components previous video we have added header and putter to our react application in this video we are going to configure routing in our react application well let's head over to zoo studio id and go to terminal and first we are going to install react router dom library just type the command npm installed followed by name of the library that is react router dom open up and save and hit enter uh this will take couple of seconds and there we go well let's go to package.json and let's verify whether it is added or not yeah there we go react router down is successfully added in a package.json now we are good to use this library go to app.js file and here we need to configure routing because app component is root component and we need to configure routing in a root component okay go at the top and here we are going to import few react elements from react router dom library react router down and let's import few of the elements here within the curly braces browser router adds a router let's give alias here and we are going to use route after that we also use switch okay so make sure that you import browse router browser router route switch attacked off before using them all right now go to view here and browser router should be at half in hierarchy so here we are going to use browser router so we have a router as alias to browser router so we can use a router over here and just close this router after putter component perfect now after header component we are going to create one view with the css class as a container okay and just go ahead and close this due before putter component all right now with an idea what we'll do we'll add a switch switch element so basically this switch element uh you know ensures that only one component will be rendered at a time okay and then we're gonna use route here to configure a route for component okay so basically route provides a path attribute to add a path over here just view path as slash and then it also provides component we can configure corresponding component using component attribute so within a curly braces just you know just import list employee component okay so whenever we hit a link in a browser something like localhost colon 3000 slash then this component will be rendered okay so similarly let me copy this and let me configure one more route something like slash employee so whenever we hit a link in a browser something like this this component will be rendered okay pretty simple guys okay let me remove this all right we have configured two routes in a switch and here you can see list employee component so get rid of this lineup code we are not using that anymore because we have already added a route for it okay now you can save the file and go to node terminal over here there's no compilation here let's go back to chrome browser and let's refresh and there we go okay and here i want to enter slash yeah routing is working for slash and here i'm going to enter employees hit enter and there we go okay slash employees employees are out also working and one more important here is we need to add exact pattern here okay otherwise switch will you know route i mean switch will render all the components we need to map exact exact url for that we need exact here okay that's it let me go back to the browser and there we go let me test for slash yeah we have successfully configured routing in our react application so let me recap what we have done we have installed react uh you know router down library and we have used browse router route switch elements from react router dom to configure routing in our react application in this video we are going to build create employee rest api so create employees api basically handle http post request and it will get a employee json object from the request and it will convert it into employee java object and it will save employee java object in a database and it will return the employee saved object to the client all right go to employee controller and here let me write the comment build create employee rest api okay and just create a method public and the written type of the method is employee and give method name something like create employee and just pass method argument as employee object okay and this method returns the saved employee object okay just call employee repository and call the same method so same method takes entity object so just pass the empire object and that's it so co method basically returns the saved object in our case it's employee object okay let's annotate this method with add post mapping annotation to handle http post request and we no need to give a url something like slash employees over here okay because employees already added a net and a base url okay let me remove this perfect and here you can see method argument employee so we have annotation in spring that is at request body annotation so this annotation will basically convert a json into java object okay great now let me save the file and let me start the springboot application and then we'll test this rest api using postman rest client all right our spring boot application is up and running let's head over to postman client and create a new request and make sure that you choose http post here and just type here http localhost employees okay and go to body and go to raw and here choose content type as a json because we are passing json in request body and here we need to prepare the json well if you can see the employee object that we have passed to this create employee method it has first name last name and email id so we need to prepare json such a way that we need to pass key as a first name last name and email id so key should be same as first name last name and email id all right so go ahead and in a body section just add first name okay and value as let's say ramesh and let's say last name so we have a record already with the name ramesh so let me add different record here something like okay and your last name is the first array and email id email id let's do something like further at the rate gmail.com okay and go ahead and click on send button and there we go we have already two records in our database table now third record is inserted and let's take a return third record with id3 okay it means that our create employee http is working as expected in next video we'll create a react component and we'll consume this rest api okay previous video we have created create employee rest api in this video we are going to create a react function component called add employee function component and we are going to add a button over here that is add employee button so once user click on add employee button it should navigate to add employee page so let's head over to head over to vs code id and go to components folder within a components photo we want to create a file let's call it as add employee component view extension.js and again we are going to use react snippet here just type the command react arrow function component export all right great and here i'm just going to add some header here something like add employee component called something like this so here we just wanted to make sure that whether this component will render or not okay so in this video just we will create this component and we create a route for this component and we create a button to call this component in next video we are going to design add employee form so once we create add employee component then go to list employee component and in h2 header just after h2 header we are going to add a button so let's use react inbuilt element that is link so link internal uses hyperlink it has a two attribute we can use it to attribute to define the link here add employee okay and let's add a css class okay button and then button let's say primary okay and bottom margin let's say two okay and then let's give name to this link or button that is add employee great so link internal uses hyperlink and we are using bootstrap css class to make this hyperlink as a button so this should looks like a button now now what we do will configure out for this url so go to app.js file okay and here let's use again a route and then path and just paste add employee so make sure that your ppx slash and then component so after calling this url which component should render here add employee component perfect let me close this great so what we have done we have created an employee component and then we have added a button in list employee component and we have created a route for ad employee component perfect now save all the files and go back to browser and just refresh and just click on add and play button and there we go we can able to navigate to add employee component in previous video we have added add employ button and once user click on add employee button it is navigating to add employee page in this video we are going to design add employee page so we are going to basically create a form with employee first name last name and email all right so let's check out obs code id and go to add employee component okay and within add employee component we are going to we are going to first create employee first name last name and email state so let's use use state hook to have a first name last name and email state is statehook and let's give state name as first name all right and initial value give empty okay so look at your first name is string so initial value let's give empty okay and if you can see here set first name is a function which changes the state value here the state variable is first name and make sure that you import use state at a top so let me import that quickly within a curly braces use state okay use state from a react library all right so similarly let's let's use use state for last name and employ email id fields let's call use state and let's have a state variable name as last employee and initial value empty as it is a string so we can give initial value as empty similarly let's use use state hook for email id email id and give initial value as emt again perfect now we have first name last name email id state and whenever you know users submit the form the form data will be stored in these three fields that's why we have just declared here by using state hook okay just we have declared these state variables empty using use state hook okay now go to here within a return we have a due so let me get rid of this h1 header and here we are going to first have a due with a class name container okay so within this video we have one more due with the class css class row okay so within this due we are going to create a one more view and let's use css classes something like card and then offset okay so what we are going to do is we are going to add a box to the form that's the reason here i'm using card css class name okay and within this duo we are going to use h2 header and let's use enter something like add employee and do i want to align at the center for that let's go and let's add a bootstrap css class that is text centered okay and uh after that we are going to create one more deal let's use css class name something like card body perfect now within this view we are going to create a form within a form let's create a due and bootstrap css class something like form group okay and bottom margin something like margin button that's u2 okay and within this view let's have a label and we have standard bootstrap css class for label that is form label okay and let's give label name something like first name this is employee first name so after label let's use input control element to take the form input okay and input has attributes like type let's say text and then we have placeholder let's give placeholder something like enter first name okay and we have a name so let's give name something like first name and we have css class for input here something like form form control okay and we have value so value let's let's give first name so make sure that you you give post name from the from the use date so here we have post name as a state variable name right that we can access by using curly braces and we have on change function within the curly braces let's have a row function i'm going to pass a form event and then arrow function and you wanna use set first name method to you know to add this text data to the first name okay so here we have a set first name right this function we use to change the value of the state and here we are using same function to change the state of the the value of the state okay and how we can get the value we can get the value by using this event e dot target dot value so this is how we get a value from the event and that value will be assigned to first name state variable by using set first name method all right we have done for first name now similarly let me quickly copy this and let's have an input field for last name let me change accordingly last name and here placeholder let's say enter last name and name should be last name and value should be last name and here we want to use set last name method to set the last name value to last name state variable perfect now similarly let's do it for email field let me copy this and let me paste it here and this should be email id and type you can do email enter email id okay and name should be email id and value should be email id state variable and here we are going to use set email id method to change the value of email id state variable perfect now we have defined three input fields first name last name and email now gonna create a button to submit the form so just after do here before closing form we're gonna add a button button and just close the button here and within a button we're going to add a bootstrap css class let's say button button success okay and then we have on click on click function and within a curly braces we are going to again use the arrow function let me pass the form event arrow function and we are going to call function name something like save employee and i am going to pass event to the same employee method now let's go ahead and let's create a save employee method so let me go at the top just top of the return statement we are going to have a save employee function again here i am going to use arrow function guys all right and we have password the event so we can pass e here he stands for event and then we're going to prevent default so basically whenever we submit the form we are not going to refresh the page okay so in order to prevent refresh the page so we just have a prevent default method okay now what we're gonna do is we're gonna create the variable something like let's say uh const okay employee we're going to define object here and we get all the state variable data that is first name last name and email id okay and here i'm just putting a console to just see whether data will be available here or not i'm going to just print employee object perfect now what i'm going to do is we're going to test whether this save employee method able to get these data from the form or not okay just save the file and head over to browser all right so look at here we haven't given name to the button that's why this looks like this let me quickly fix that so go to button here and here just give button name something like save or submit and save the file and go back to browser and you can able to see here we've got a submit button and at the top you can see the box is touched to header right so in order to fix this one we're gonna add some break statement here so let's say br and let's say one more br and save the file and go back to browser and you can able to see now it looks good right perfect now let me inspect and go to console and uh just add first name ramesh last name further a email id imagehead.gmail.com hit submit and there we go we got first name last name email id right so we have printed this employee data from employee data to the console by using console.log right great it means that we have successfully created a react form and we successfully able to get first name last name email id from the employee form in save employee method in next video what we do we will uh we'll make our sdpa call and we'll send this form data to the rest area and restart internally save this form data into database in previous video we have designed add employee form right and we were able to get a form data in a save employee method for example if you go back to this page and click on add apply button we are getting add employee page with this form and let's say if i enter first name last name and email and if i hit submit then there we go we are getting the form data or you know save employee method right now what we will do we will make a rest api call and we'll send this form data to the rest api and sdp internally store this data to the database all right so let's jump into visual studio code id so let's head over to employee service class and within this class we are going to create one more method just go after get all employees and create one more method let's say create employee and let's pass one one object that is employee object as a method argument okay and just return the promise object of axios method so we're going to call here object and we are making a post http request so let's call post method here and just pass post argument as a stp url second argument as employee object so basically employ object contains a form data okay great so this will make our sdp call and it will send employee from data to the rest api or sdp internally store this form data into a database perfect now we are going to use this create employee method in add employee component so head over to employee component header to save employee method and here let me just remove this console.log and here just call employee service and call create employee method and just pass employee object to it and then it returns promise so call then method and then have a response object here okay and here we are going to use arrow function to handle the response perfect and here we can also use catch to catch the error okay this one here and here use arrow function and i'm going to just log there here okay perfect all right so after submitting the form users should be able to navigate to least employees page right for that we need a navigator over here so in react we can use a history object for navigation purpose okay as we are using react hooks so there is one more hook called use history hook so we can use use history book to get an instance of history object and once we get a history object we can use history object for navigation purpose okay so let me import first the use history hook here at the top import from so we can get a use history hook from react router dom okay import within a curly basis we're going to call use history hook so here i just have a constant and then i have a variable history and then i can use here use history hook so i use this to hook return this object now i have a history object i can use this history object to navigate to the list employees page so just call push method and then just push the url that is employees and refresh one more time and just add first name range last name email id remember gmail.com hit submit and there we go ramesh employee is successfully added so there is already existing uh employee with the same name so let me add a different name like this let's say john cena and then john at the rate gmail.com okay and hit submit button and there you go john employee successfully added so let me add one more employee let's say thumb kurus and let's say thumb at the gmail.com and you can able to see thumb employee successfully added to the employee list page all right and here you can see if user don't want to submit the form then user should have here a cancel button right we should have a cancel button here and user once click on cancel he should navigate to list employee page so for that what i will do i will add a cancel button to this form quickly so let me head over to his code id and just go down and just after the button submit button we're going to have a link here let's say link and then 2 and we should navigate to list employees page for that this is the router link and then let's have a css class something like button button danger and let's give name to this button like cancel and save the file and let's go back to browser and here you can see cancel button okay so once user click on cancel it should navigate to the list employees page all right guys we have successfully uh you know implemented ad employee functionality in next video we'll create a couple of rest apis and then we'll implement update employee functionality in this video let's go ahead and let's build get employed by idiots api so head over to empire controller and within employee controller we are going to write the get employed id rest api so let me write the comment over here build get employee by the rest api well let's go ahead and let's create a method public and the written type of method let's go ahead and let's use response entity so response entity is very useful class that we can use to construct the response of the rest api so go ahead and choose response entity and this is a generic class so we need to pass the type in our case we need to pass employee let's give method name as get employee by id okay and we need to pass the method argument for this method let's say id up type long now we need to fetch ample object from the database for that what i'm going to do is we're going to use employee repository to get the ample object from the database so let me first declare our object over here and let's use employee depository and it provides a method called find by id so find variety method takes id of type long i need to it it returns optional class subtype employee so go ahead and choose this method and just pass the id well find by id method returns optional class and option class provides some method or else throw method well if record is not exist with a given id then our sd pass should throw the exception and our html should return or your response to the client right in order to uh you know handle this use case what you want to do is we're going to use oreos throw method uh to create a custom exception and throw the custom exception okay so go ahead and choose or else throw method and if you can see here or also method takes supplier as a you know argument supplier is nothing but a function interface and we need to provide uh you know lambda expression implementation for this interface so go ahead and choose this method and we are going to write a lambda expression and here is the syntax new and then create object of not found exception and throw this object okay let me break this sentence here and we need to pass the custom error message something like employee not exist with id and just pass the id over here okay great that's it now we got ample object from the database now this method should return response entity and just call ok method here so we're going to call ok method because it internally provides 200 status code we don't have to manually specify 200 status code as a response of this you know response entity class we simply call okay method and we need to pass a body in our case we need to pass the employee object in a body that's right now we have created a method which returns a employee object let's make this method as a rest api by using spring provided annotation so let's go ahead and let's add aggregate mapping or notation at the top of this method okay and we need to pass id so within a current basis provider id and we need to you know bind the value of this id to the method argument for that i'm going to use add path variable annotation that's it pretty simple isn't it now save this class and go ahead and run springboot application again well our springboard application is up and running let's head over to personal client and let's test this rest api so in a prospect client create a new request to test this rest api and make sure that you choose http get method over here and just enter the url http localhost 8080 api slash v1 employees and just pass the id here we are passing id one uh we need to get a employee with id one right that's the reason i'm passing one here and go ahead and click on send button and you can able to see here rest api return the response with the you know id one okay we got a response as an employee object with id1 if you want to retrieve employee with id2 then go ahead and pass id2 over here and there we go rest tape are you done i apply object with id2 if you want to get a employee with id3 you can just pass id3 and hit send button and there we go rest api return or employee with id3 it means that get employee id rest api working as expected alright in next video we will create update employee rest api in this video let's go ahead and let's build update employee rest api so head over to employee controller again and within employee controller we're gonna write update employee rest api so let me quickly write the comment over here build update employee rest api okay great now quickly write the method public and the response type we are going to choose here response entity well response entity is very useful class to construct the response object so go ahead and choose response entity response entity is a generic class we need to provide a type let's go and let's provide a type as an employee and go ahead and give method name as update employee all right i need to pass first argument as id and second argument as the type of the employee object update details let's say employee details okay so employee details uh basically this object we are getting from the client so client call this rest api that is update employees dpi and it send updated employee information in the request right and that uh information we are going to bind to this employee object all right great now what we're gonna do is we're gonna get the employee object from the database and we need to update the employee object and we need to again save that employee object to the database for that let's go and let's first fetch employable from the database so in order to do that let me declare object here employee and let's say update employee and when i use employee repository to get a object from the database so employee repository provides a method that is defined by item method defined by d and find id method takes id as a method argument and it returns optional class of type employee so go ahead and choose this method and we need to pass id all right let's say a object with given id is not existing database then our stpi should throw a resource not found exception right for that we're going to use oracle's 2 method and this method internally takes supplier as a function argument and we need to provide a lambda expression implementation for this supplier interface all right so go ahead and call this method and just throw the exception and so we're going to provide lambda expression right so here's the syntax we're going to create object of the resource node from exception and this method will simply throw this exception object so let me break this sentence and let's give a custom error message something like employee not exist with id and just pass the id okay perfect now we retrieved empire object from the database okay and here in the method argument we have one more employee object right and this employee object contains all the updated information now we need to you know set all the information from this object to update employee object for that what we're going to do is we're going to simply call get sector methods to set first name last name and email here we're gonna use empire update employee dot set post name let's get first name from the employee details object similarly last name okay update employee dot set last name and get last name from employee details similarly get email from employee details and set to update template object name for details dot get employee get email id all right it means that user can update employee first name last woman email okay now update employee contains all the updated information now we want to send we want to save this employee object in database for that again we need to use employee a repository and let's call it save method to save this object now once we save updated employee object to the database we're gonna simply return the updated information to the client all right again we're gonna use the response entity dot ok method and then pass update employee object in a body that's it pretty simple isn't it so what we have done we have retrieved employee object from the database and we have set all the updated information to update employee object and we have saved that employee object to the database and we have simply returned the updated employee object to the client now we have created a method now let's make this method hdpi by using annotations so let's go ahead and let's use at put mapping annotation so whenever you have you know requirement to update the resource then you have to use output mapping annotation okay just try to understand the difference between post and put so post is used for creating a resource port is used for updating the resource well now we need to pass the method argument that is id so we can pass id as a path variable in a url and we need to bind the value of this id in the method argument for that we're going to use add path variable annotation we have a second argument that is employee details well we have one more annotation that is request body annotation so this add request body integration internally convert json into this employee details object all right so this completes our update employee rest api implementation now let's go ahead and let's start springboard application and let us test this update employee rest api using postman dash client so let me go ahead and let me restart the server so our springboard application is up and running now let's go ahead and let's test this rest api using post manage client so let's head over to personalized client and create a new request to test this rest api and make sure that you choose put http method over here and here just type http colon localhost h0 slash api slash v1 slash employees okay and we are going to update uh employee with id 1 so i am going to pass one id in the url itself okay and go to body and in a body we need to pass the employee information okay and here i choose content type json and in a body we just need to update employee first name last name and email okay so let me go to get request here and here i will just pass one to get a employee object with id 1 to just check employee first name last name and email so you can see here employee first name ramesh last name email id remember gmail.com okay so notice here the id one now we want to update this employee first name last name email id okay right now we have a rematch for the remix at the gmail.com so let's go let's use this put request to update this information so let me simply uh update first name from ramesh to ram from parathyroid to jado and email id ramadree gmail.com okay so go ahead and hit send button and there we go the employee id with one is successfully updated okay what are the fields updated first name last name and email id okay and if you can make a get request to get an employee with id one you will get updated information for example let me hit a send button here and there we go first name last name email id is successfully updated for the employee one it means that our update employee htp is working as expected okay great in next video we are going to consume get employed by idea sdp and update employee rest api in react application in previous couple of videos we have created get employee and update employee released apis in this video what we will do will add update functionality in our direct application well basically we are going to add one more button over here in front of each and every employee so that user can click on update update button to update the corresponding employee all right well let's head over to visual studio id and let's add update employ button so let me switch to vs code id and go ahead and open list employee component and this is the html table and in a column section when i add one more column let's call it as actions okay and go at a row and here when i add a button so td [Music] and let's use link for button okay and this link internally provides anchor tag with a hyperlink so again we need uh we need to add bootstrap css class to make this link as a button so when i add a bootstrap css class let's say button button info all right and but link element provides two attributes to define the link for this button so go ahead and just add two and the link is edit employee and then we just need to pass employee here dynamically now can just give a link name here something like update perfect if we can save this file and go back to browser and you can able to see here update button is successfully added in front of each and every every employee alright great and one more important here is we're gonna use add employee component to perform both save employee and update employee functionality we are not going to create a separate component for update employee all right we are going to reuse your single component to perform save and update functionality well now we have added a button so next step is we need we need to configure routing for the link so go to app.js and here we need to create one more route for update employee so go ahead and use route here and path okay and just add a link something like eddie type an employee and here we need to provide id so this is the syntax to pass the id dynamically and then component and we want to reuse the same component that is add employee component and then close the route that's it pretty simple all right so this is the second step next step is we're gonna write a code to make our sdp call so go to employee service within employee service we're gonna create a method let's say get employee by d all right and we're gonna pass employee id as a method argument for this method the employee id okay and uh within this method let's call axios object and i'm gonna call get method because we are making a get http request and just pass the url that is employee sdp base url and then we need to pass the id for this url slash and then we have employee d perfect now this method returns a employee object okay great now head over to add employee component again in this component we need to retrieve id from the url right for that we're going to use one more hook that is use param hook let's say use params hook so this hook basically provides a object that contains key value pair from the url so go ahead and here just type const okay and just get id from use patterns hook well once we get id then we can you know use id to check whether we are going to perform save employee functionality or update m5 functionality well once we get the employee id what we can do is we can make our sdp call and we pass this id and we will get employee object and we populate the template object in a form so for that in order to make a html call we're going to use usb cook okay and get rid of this code and get rid of this and here we are just passing empty because uh we don't have uh you know dependencies for this user package so keep empty and within this hook we're going to call employee service dot get employee id and pass id to this method and simply handle the response the response okay and we're gonna use again arrow function this is the syntax and within this method what we'll do will get all the details like first name last name email from the response and will set to the variable state variables so in order to set the value to variables we're going to use methods right that is set force name to set first name state variable value so go ahead and use response here response dot data dot first name similarly set last name response [Music] the data dot last name similarly set email okay set email id response dot data dot email id perfect now we have set post name last name email id from response object to state variables all right here we can also have a catch block to handle the error if there are any error while making a sdp call that that that we can handle in the catch block all right now what we have done we have made a restfa call and we have retrieved a object and we have set first name last name email id to the state variable and again make sure that here you are we are using user petrol and it should be imported at the top so go here and import use effect from react library and save here okay next is here we're going to create one more method so if you can see here in a form we have add employee text right header so we need to change this uh dynamically let's say in case of update we need to show update employee in case of say employee we need to show add employee right here i'm going to create one more method let's say title something like that and i'm going to use here arrow function again okay and inside that i want to simply return i'm going to check whether a id is exist i mean if id contains some value then we simply return we simply return h2 uh with the header update employee and you're gonna pass css class here let's say text center okay and in an l and pls part we simply written ad employee okay add employee well if you can see here in a console title is not defined right so we're gonna provide a constant const here now this becomes an arrow function now what we're gonna do is we're gonna use title method here so get rid of this h2 tag here and within a curly braces just call titan method so title method will basically dynamically return my h2 header tag so if i is id contains some value then it returns h2 header with adding update employee otherwise it will just return add employee header now let's go back to a chrome browser and let us test how it works so if you can see here update button so go ahead and click on update button for first employee so click on update and there we go our information will be populated in the form okay now we can go ahead and we can update this employee details like first name last name and email id so in this video we just made a get employed id rest api and we have populated that employee details in update employee page in next video we'll make a rest api call to send update details to the update employer hdpa and update employer hdpa store that updated information into database in previous video we have added actions column to the employees table and we have also added update employ button once user click on update button users should be able to navigate to update employee page and we have made get employee by id rest api call and we have populated a employee information in update employee page now in this video what we'll do will make update employee http call from react application and we'll send updated employee information to update employee http and update employer http internally store information into a database okay so let's head out to zoo studio code id and let's write a code to make our sdpa call so when you use code id go to emperor service and let's go let's create a method update employee and let's pass first argument as employee id second argument as employee object so employee object basically contains employee updated information and here again we are going to use as use object and we are going to call put method here because we are making a put http request and post argument we need to pass a url in our case we have employee base http url and we need to pass id in a base url right so go ahead and append the id okay and next second parameter employee object perfect now let's head over to add employee component and within add employer component we have save employee method so within the save employee method we are going to write a logic to perform both save employee and update employee we'll first of all rename to this method because this method does two functionalities one is to save employee and another is update employee so let me rename this method save or update employee and let me copy this and go to go to bottom and here you can see button so here i'm going to paste it all right now what we're going to do is we're going to add a condition over here if id id contains some value then we are going to make update employee http equal right or else we're gonna simply copy this code and put it in a else part okay now go to your condition and here we're going to making a call to update employee method post argument we're going to pass id second argument we're going to pass employee object so this is example object we're going to pass and then call then method and just handle the response over here response and just use arrow function okay we can use it catch here to just you know handle the error and just lock the error console.log that's it now once user update the employee user should be able to navigate to you know the employees list page for that what i'm gonna do is we're gonna use the history object for the navigation history dot push and then we're gonna use slash employees that's it well let's save all the files and let's go back to chrome browser and let's verify whether our update employee functionality is working or not so go to chrome browser and let me refresh and we are going to update first employee with the name ram so go ahead and click on update now let me update first name from ram to rom one two three let me update last name java one two three ram one two three at gmail.com click on submit and they go ram employee successfully updated okay let me update one more employee let me update second employee first name let me update from john to john one two three from cnn to cena one two three see now on to the actor at gmail.com hit submit there we go [Music] all right it means that our update employee function is working as expected okay in next video we will create delete employee rest api and then we will consume delete employer http in our react application in this video let's go and let's build delete employee rest api let's go to employee controller within employer controller let me quickly write the comment over here build delete employee rest api let's write public and let's use response entity as a return type and this is generic class so let's pass http status as a type let's view method name as delete employee and just pass a method argument id all right now we want to check whether a employee record is exist in a database with this given id or not for that let me declare employee object here and let's call employee repository and then find our id method just pass the id all right and just call or else throw method well or else the method internally uses supplier functional interface so we're gonna use lambda expression to implement supplier interface so go ahead and use lambda expression now new and then just create object of resource not for an exception and just pass a custom error message over here employee not exist with id and just pass the id as argument perfect now we have just added a condition just to check whether employee is exist with a given id or not if employee does not exist then this will throw a resource not for an exception well now go ahead and use employee repository dot it provides the delete and delete id method so now we have employee object so we can call delete method and we can pass the employee object to this delete method so that the delete method will delete a record from the database and look at here the return type it doesn't return anything okay why it is a return type so go ahead and choose this method and just pass employee object to it so this will delete my employee record from the database all right now go ahead and just return status code new and then response entity and here in a body we pass http status dot no content all right so we're not returning anything to client hence we're just passing http status as no content all right now we have created a method that is delete employee method let's make this method as a rest api by adding annotation so let's go ahead and let's use add delete mapping annotation and we need to pass id as a template variable and we need to bind the value of this id to method argument for that let's go ahead and let's use add path variable annotation okay now we have completed delete employee rest api let's go ahead and let's test this rest api using postman client let me start the springboot application all right our spring boot application is up and running let's head over to postmodernist client and let's create a new request to test this rest api and here make sure that you choose delete http method over here and we're gonna use the url http localhost eight zero zero api slash v1 slash employees and we need to pass the id in the url for example here i am passing id one to delete a employee with id1 okay so go ahead and click on send and there we go we got a status code 204 it means that i employee with id one is deleted successfully in order to verify this we can make or get employed by id http equal so i am going to hit the send button and there we go not font it means that employ one is not exist in database because we have just deleted it right let me delete one more employee let me pass two and hit send button and there we go we got a status quo 204 and let me verify it by using get employee by id rest api so this is the get so i am going to pass id 2 and hit send button there there we go not found okay it means that our delete employee http is working as expected in next video we are going to see how we can consume this delete employee http in our react application previous video we have implemented delete employee rest api in this video we are going to see how to consume the delete employee rest api in our react application and at a ui level we are going to add delete you know button in front of every employee so that user can able to delete a corresponding employee okay so in actions column we are going to add a delete button well first let's head over to visual studio called id and let's write a code to make a delete employee rest api called in our react application let's head over to visual studio for id and let's head over to employee service and within employee service class just write the method over here delete employee and just pass employ id as a method argument okay and again call the axios object and call its method delete we are making a delete http request so call the digit method and pass the url that is employee base rest url and we need to pass you know id in the url so slash and then append the id that is employee employee perfect and save the file and let's go back to list employee component and along with update button we are going to also add delete button so let me add a button here along with update we need to add a button so button and then just close the button and here just add book flap css class button button danger all right and we are going to have on click or click event here so once user click on delete button you should be able to call a method okay so let's have one click function within a curly basis let's have a arrow function and the method name something like delete employee and we need to pass the employee to this method all right make sure that the syntax is correct and just pass delete as a button name now let's go ahead and let's define delete employee method just go up and here let's have our function construct and then delete employee all right and just pass employee as a method argument perfect and just lock the id here console dot log and the employee perfect now let's save the file and go back to browser and you can able to see here delete button is visible but update and delete button both are you know touched here so let's have some word margin between these two tables so let me fix that so go to button again and let's write some css to give a margin to this button so let me give style here style within the curly braces object and then margin left let's view 10 pixel save the file and let's go back to browser and you can able to see here we have given margin between these two buttons and now both buttons are looks good perfect so and again we want to check whether this id is available in delete employee method or not for that let me inspect okay go to console and clear the console and click on delete and there we go the employee 4 is available all right now we can pass this id and we can delete the employee so go to delete employee method again and here get rid of this console.log and here we are going to call into our service and delete employee and we'll pass employee okay and then we're going to call them method to handle the promise object response arrow function and we can also have a catch block to just print the error console.log and just print the error object perfect now once user delete the employee user should able to navigate to the list of employees or table right so after deleting employee we need to call get all employees method so if you can see here within a use effect hook we have written this code and similar code we want within this within this method so instead of writing the same code let me you know write the common code so for that i'm going to write here one method const okay and let's say method name get employees and it should be arrow function okay and let me quickly copy this code okay and let me copy this code and let me paste within this and just call this method within a use effect hook okay perfect now same method we can call here in a response of delete employee method looks good isn't it great now save the file now let's go back to browser and let's see whether our delete employee functionality is working or not go to browser refresh and let's say we want to delete employee 8 now go ahead and click on delete and there we go employee with id8 is deleted now let's go and let's try to delete employee 10 employee with id10 and there we go let's delete one more employee there we go it means that we have successfully implemented delete employee functionality

Channel: Java Guides

Views: 6,680

Keywords: react, spring boot, react hooks, spring framework, java

Id: IxYa6cKimZc

Length: 146min 31sec (8791 seconds)

Published: Sat Oct 30 2021