Let’s import list employee component and make sure that list employer component is imported at the top but if just save this file and go back to the browser and let us see the changes in a browser you can able to see the list okay so what we have done we have created a list employee component and we have added a JSX code to display a table in a web page okay in the next video we’ll make our spa call we will get our data from the rest API and will populate in a table great in the previous video we have created a list employee component to display a list of employees on a web page.
What we’ll do will make a rest API call and we will populate a data on a web page so to make a call to the rest API in react application we have to use a third-party HTTP library, for example, we are going to use azure HTTP library in our video tutorial series but you can use browser fetch API to make a rest API call so there is plenty of HTTP library, uh you know are there out there but Axios HTTP library is popular and it provides a very uh you know flexible APIs to work with you know HTTP calls.
I am going to use the Axios HTTP library to make our sd pay call so what we will do we will install the Axios library in our react application and we will write the rest-client code to call dpi to let’s go ahead and let’s add Axios HTTP library in our react application go to the integrated terminal and just type the command npm install and then hyphen save so make sure that you have added hyphen iPhone save at the end so this will add I entry in package.json hit enter so this will take a couple of seconds to install Axios library in our react application all right now you can see the command completes.
This is our base rest API URL localhost 8080 API slash v1 employees let’s create a method to get employees and this method returns a response of get method okay so Axios basically provides a get method let’s call get and here we pass a base URL, okay so we are simply returning a response of get method and now what we do will simply export this class object export default new and the employee so this is important notice here we are not going to export a class in fact we are going to export object of this class so we can directly use object of this class inside a component all right we have successfully you know written arrest client code using Axios to make an SDP call.
Now what we’ll do, we’ll use employee service uh object in a component let’s go back to the list employee component here and here just type component did mount method so look at here component lead amount method is called immediately after a comma component is mounted so this is the best place to call a rest API so whenever you want to make ajax calls or stp calls always use component amount because this method will get immediately called after a component is mounted so inside this method we are going to use employee service dot get employee so this method returns a promise so let’s use then method, okay and it has a response so here just set response to the employee’s array.
To set the data to the state of the component, we are going to use the set state method set state inside curly and close braces just use employees and response dot data alright guys we have successfully you know stored our response data into employees array now save the file and go back to the browser and let us see the data is populated on a page or not let’s open our developer tools in chrome browser and let us see the network tab refresh here go to the console and you can able to see here.
We got a course policy issue so to avoid this issue what we will do we will add cross annotation on top of the employee controller in the spring boot application go back to the spring boot project open employee controller and here what we’ll do we’ll add annotation called cross-origin annotation and it has origin attributes and save the controller and spring boot project is restarted now let us see let’s go to the browser and let’s refresh the URL and here we go we have successfully got a response of a rest API and the same response is populated on a page alright guys in this video we’ll add header and footer to our react application.
Let’s create a react component to add header and putter to our react application let’s go back to vs code and go to the components folder within components folder create a new file let’s call it as header component dot jsx and let’s use RCC react snippet command to quickly create react component go to the components folder create a new file let’s call it as footer component dot j6 hit enter and let’s use RCC to create a component all right go to the header component here basically we write a code to design a header part of our web page let’s type header tag inside a header tag let’s create a navigation tag and let’s add a CSS class to the navigation HTML element and then add a title of the header let’s say employee management application.
Now save the file and go to the putter component let’s add some code to the footer let’s say put our HTML element and let’s add a CSS class like a putter and just create a spam HTML element with content all rights reserved to add java guides so this is my website so I have specified over here all right so we have created header and putter now let’s add some CSS to our app.css class all right.
Now, what we’ll do once we create a footer and header let’s go to the app.js file so inside app.js file we are going to import these two components so here uh creator do and inside of you let’s create a let’s import a header component make sure that header component is imported at the top and then let’s copy this and let’s paste here let me make alignment okay after that let’s import a portal component here so make sure that Twitter component is imported at the top so save all the files and one more important thing here is so to look at here we have added dot JSX extension to the files.