Learn React JS with Project in 2 Hours | React Tutorial for Beginners | React Project Crash Course

hey what's going on guys welcome back to another video so this is a two hours long react crash course for beginners and in this video we are going to build a react project from scratch let me show you the topics that we are going to learn in this video so we are going to learn about the basics of react how we create the react application then we will learn about the components the class components and the functional components then we are also going to know that how we write the jsx in our components then we will learn about the props and states after that we are going to learn about the use state and use effect react hooks and we will see how the component life cycle works then we will see about the conditional rendering and we will see how we can form the list and keys then we will learn about the basic form handling after that we will see about the project structure what is a good project structure for a react application then we are going to include the react routing so that we can navigate among the pages and we will also see how to navigate from one page to another page programmatically then we are going to set up a json server and that is going to give us the fake apis we can use these fake apis and we will use the axios package to call the apis in our react project we are going to learn about the crud operations and we are going to build a small functionality of a search filter in our application that will filter out the results and we are going to cover a lot of react hooks so there's a ton of topics that we are going to learn in this video you can also use the timeline in the description below so that you can jump to any topic directly so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started the first thing what we need is we need to have node.js installed on our machine so if you don't have node.js installed quickly install the node.js on the official website so this is the official website of the node.js you can click on the current version and you can download the installer and you just need to click next next next and you will be able to install node.js on your machine so if you need any help in the installation part then i have a video on it you can click on the card above and jump to it directly so once you have installed the node.js you can go to the terminal so right now i'm going to my terminal and i can simply type node hyphen v and it's going to give me the version of the node.js that is installed all right so now we have installed the node.js the next thing we need to do is we need to create a react app and to create the react app let's go to the github page of react app so this is the github page of the react app and if we scroll down then we will see that how we can actually create the react app so we are going to use npx create react app and the app name so let's create a react app so what i'm going to do i'm going to write npx create react app and i'm going to name as contact app and hit enter and this is going to take some time to initialize and download all the dependencies so we'll take a pause here all right so now our app is created and let's see actually what all happens when we run the npx create react app so when we actually run the create react app it actually downloads a lot of dependencies and we can see here that 1904 packages have been added as a dependencies for this project and it also gives you in the last that what all the commands you can use directly so to start the development server we can use npm start and in order to build our application for a production deployment we can run the npm run build and that is going to minify all our files and if we want to run the test cases then we can use the npm then we have the npm run eject which we don't use generally much and now let's start this application so to start the application we are going to go to the directory so i am in the contact app directory and then i am going to write nbm start and this is going to start our development environment on a localhost port 3000 by default so let's wait for it meanwhile let's see the folder structure of the application so we have the node modules where all our dependencies are then we have a public folder then we have a source folder this source folder is the folder where we are going to write all our application code we have a get ignore file to ignore the files and folders then we have the package.json this package.json is containing all the dependencies and you can also see the scripts which you can run so you can run the npm start build test eject then this is the readme file of the project let's go to the public folder so in the public folder we have the fair icon the index.html and in the index.html you will see that we have only one div with an id of root so all our application which we are going to create through react is going to be in this root div then we have some images which we got by default with the project we have a manifest file and robots.txt which we don't want for this project in the source file if we see that we have the app.js we the main is the index.js which is the starting point of this application so in the index.js you will see that we have a react and react dom library imported and here the react dome dot render which is actually going to render our application in the root div which we saw in the index.html so if you see that we are very familiar with this code get element by id so we have took that root element reference and in that root element reference we are actually embedding this app component next we have the app.js which is the default functional component this is a functional component which is created from the react project and we have the css for the css file all right so our development server is started now let's go to the development server and this is the initial app component which we are seeing on the screen so this is how we can run the application now let's go and delete all the default stuffs because we are going to create everything from scratch so i will go to the public folder i'm going to remove all these files we don't want so i'm gonna delete them okay and here we don't want this app test we don't because we are not doing anything with the tests at the moment and then we are going to remove all these files all right so let's delete them and let's go to app.js we don't want all this stuff let's remove these we don't have css file anymore all right and then what we are going to do is we are going to create our own folder structure so what we have we are going to create multiple components so lets create a directory of components that will contain all our components all right and we are also going to have some images so i'm going to create one more directory for images so that will have images all right and all our components will be in this component file so let's go and create some components so we have the header component so i'm going to go here and first create the header component so i'm going to go here i'm going to write a header dot js so this is our header component and then we need a add contact dot js then we need the contact list so i'm going to create the contact list dot js then i'm going to create the contact card so i'm going to create this contact card dot js all right and we already have the app.js so let's move this app.js into our component and also move the css into our component all right so this is how our folder structure now looks like we have an index.js file and then we have the app in our component file so let's go to the app.js all right and we are going to remove this logo we don't want the logo and we are going to remove all this stuff let's go and return it to and i'm going to say hello wall all right and let's save this okay and now let's see how it looks so if i refresh this page we can see a hello world so for this project we are not going to focus on the css so for the css i'm going to use semantic ui library so let's go to the semantic ui so this is the semantic ui official website you can explore it later on and i'm going to copy this because i'm going to use the css so i'm going to copy this and we are going to add it in the index.html so in the index.html i'm going to remove this manifest and i'm going to add my all right let's save it and let's see how it looks now all right so the font size is and font family is changed so that means our semantic ui is working properly so let me minimize this screen all right so we don't want this index.js now to be open so let's close this let's close this as well and let's close all other components also so let's understand first what is this components and all about so a component is a piece of reusable code which you can be reused at any point and it's an individual piece of code which has its own inputs which has its own outputs and it has its own functionality so this is the app component and we are returning from the app component it there of hello world and this looks like an html but it's not an html it is called the jsx which is a combination of a javascript and html because you cannot write an html in a javascript file which looks like this and you can do all this is because we are using the react library so let me import the react library here so you can import a react library simply like this go that react all right and then what we are going to do that our application has three components in it so the first one is the header component so let's go and import the header so i'm going to import the header from header so we have the header next we are going to import the add contact so let's import the add contact so i'm gonna do add contact from add contact and the last one we need is the contact list from contact list so we have imported all these three components but right now there is nothing in those component files so what we can do is we are going to actually return so if we want to return more than one div or more than one element then we can use this parenthesis and then we can actually add a div here all right and this day will return all those components so first it's going to return the header component and you can use this header components as a custom html elements because right now if you see that header it similarly looks like an html element so you can use it either the self closing part or if you want to add some data in it like this then you can actually do the closing of the element tag so right now i'm just going to do a self closing and then i need to have an ad contact so i'm going to add the add contact and in the last we will have the contact list so let's add the contact list and you're not going to see anything on the screen at the moment because we don't have anything on them so let's go and write some code in our header contact list and contact so i'm going to go here and i'm going to open my header js my add contact.js and my contact list all right and first we are going to do the same import react from react all right and we are going to create an another functional component so i'm going to do a constant header this will be and function expression i'm going to use a arrow function and this is going to return so let's return the header from so i'm going to use the semantic ui so i'm going to use some classes of the semantic ui so let's create a div with a class name so you will notice that you cannot use class as is selected here because class in javascript are the classes for the object-oriented programming so that's why you need to use a class name so this is a difference between writing a simple html and writing a jsx so i'm going to use some classes here ui fixed menu all right and inside them i'm going to create an another class and this is going to contain the ui container center all right and then i'm going to do an h2 and this h2 will be having my contact manager all right so now we have created this functional component and we are getting an error and that is because we haven't exported this header and we are using this header in our app.js so we need to export this so how we can export this we can do the export default and the header all right so now we have exported the header and if i refresh my page then i'm going to see an error and this is obvious because i don't have these components yet so i'm going to comment this out for the moment so if i comment this out now we can see that we have the header so the next thing we are going to do is we are going to create the add contact which will have the contact form so let's go and create the add contact form so i'm going to go to the add contact and this time i'm not going to create a functional component i'm going to create a class component so you can create the component in both the ways so either you can use the function or you can use the class so let me show you how you can do the class component so i'm going to add the react here all right then in order to create a class component you just write the class at contact extends react dot component and this is our class component and in the end we are going to export this so i'm going to write export default add contact all right and while writing the class component you cannot simply just write a return and you have you need to use a render method so i'm going to use this render method and then i'm going to return what i want to return from this render method so what we want from this render method is we are going to create a form with the name and email id so let's create the form i'm going to use a div with a class name of ui main so you don't need to worry about all these css and the classes they are coming from the semantic ui which is actually not relevant for this video then we are going to have the add contact and after this we need to create a form so let's create a form with a class name of ui form all right and then we need to create a class name of filled filled inside the field we are going to create a label and this label will be named then i'm going to create an input of type text name will be named to it then let's create a placeholder so i'm adding a placeholder of name all right and then we are going to create an another input file so what i'm going to do i'm just going to copy this and paste this so let's copy this and let's add it all right so now we have both the fills and let's go and check here so i'm going to uncomment this out again and now let's comment on this one all right and if i save it then we we can see that we have the at contact name email so now we need to have an add button so let's add the button so in the end i'm going to go to the div and here i'm going to add the button all right and for the button i'm going to use the class name ui button blue and i'm going to add add here all right so now we have the button as well and the next thing we are going to do is we will just create a functional component this time again in the contact list so let's add the import react from yeah so i'm going to write a constant contact list is equals to an arrow function and then we can export this default contact list at least and for now we are just going to return a div with a class name ui cell list and then i'm going to write here contact list all right and now let's uncomment this as well so now we have the contact list as well so we have created all the components which we needed and what we are going to do is we are going to style this app component a little bit so i'm going to add a class name and let's add a class name of ui space container all right so now we will see that how we can actually render a list in react so in order to render a list in react what i'm going to do i'm going to create a list here so let's have a list of contacts and this is going to be an array and it's going to have the filled as id and i'm going to name as id1 then it's going to have a name i'm going to give name as the page then it's going to have an email i'm going to give at email as malvia gmail.com all right and let's create one more list so i'm going to copy this and i'm going to add this let's make this two make this as nikesh and let's make this as nyx all right so now we have two contacts so in order to pass this contacts in the contact list so we can use props so in order to use the props i'm going to write here as contacts as a property name and i'm going to pass the prop which i want to pass so i want to pass my contacts array so let me add the contacts array all right so now i have passed this contact list with a contact as a property and a contact array and this contacts can be accessed in the context list via props so if you want to access the props you have a default parameter here called props and if i actually do a console.log of this props then you should be able to see the props so if i inspect it all right and if i expand this then you can see that we actually get the contacts and now once we have the context object we can do anything with the context object so let's go to the contact list and let's render the list i'm going to create a function here so you can create a function and you can do a render contact list and this function is going to take the props of contacts and we are going to map them this is going to have a contact and then we are going to have an arrow function and inside the contact we are going to return a jsx blocks so i'm going to create a div with a class name of item inside the item i want a div with a class name content inside the content i'm going to create a div with the class name of header and this is going to have the name so we have two properties name and the email id sorry this should be contact dot name so i'm going to do a contact dot name and the other one is div with a contact dot email so this is going to give us the email address as well all right and then we also want the trash icon so let's go and add the trash icon so i'm going to add the icon here class name as trash alternate outline icon so now we have created this render list function and now we actually want to render this so i'm going to copy this and i am actually going to return this from here so if i hit enter and i add this so in order to reference this we are going to add this so i am not actually adding this parenthesis because i don't want to execute this function at the moment so i'm just going to reference the render list all right now if i save it then you can actually see that we get the list so this is how you can actually create the list and render the list in react the next thing we are going to do is it seems that this part is being repeating we can actually remove this part and we can create a component of this part so i'm going to go here and so i already have the contact card and we are going to move this piece of jsx into our contact card so let's go and create the contact card first so i'm going to do an import react from react constant card contact this is going to be an arrow function all right and then we are going to export the default contact card and this function is going to return the jsx of this card component so let's add that jsx so i'm going to do a return here and inside the return i'm going to copy this block and i'm going to add this block here so i have added copied this as well all right so now we have this contact card and if we want to add the inline styles so i'm going to add a style here and to add the style you will have the curly braces and inside the curly braces you are going to have another curly braces which will contain our css properties so i'm going to give a color of red to my trash icon and i'm also going to give a margin top so usually when we write the css we write margin hyphen top but we we don't use hyphens while doing the while writing it in the jsx so we use usually the camel case so i'm going to write the top and the stop will be 7 pixel all right but we don't have this contact name and contact email address so we have to get these from the contact list and we are going to use the props again so i'm going to add the props here so let me add the props all right so i will have to pass the props from the contact list so let's go to the contacts list let's remove this we don't want this now and instead of this we are going to pass the contact card all right and let's import the contact card here so i'm going to import the contact card from contact card and we need to pass the contact here so i'm going to pass the contact let's pass the contact all right and now we have passed the contact and we will use this contact in our contact cards so here we will do one thing we are going to use a destructuring so we don't have to repeat every time your props dot contact dot name props dot contact dot email so what i'm going to do i'm going to write a constant here and then i'm going to add the id the name and the email and this will be equals to props dot contact all right and now we can use this name here directly so we can use the name here and we can use the email here all right so we are getting an error that contact card is not defined so let's see what we have done oops i have actually returned wrong it should be contact card and let's copy this and let's add this okay let's go back here contact card contact card all right so now we actually render the contact list properly so now we have the contact card here and we will do one thing we have an image here so let's add the image so if you want to add the images in the react so i already have the image here so let me show you the image so in the images folder i have the user.png so in order to add the user.png here we are going to import the image first so let me import the image user from images slash user dot png all right and now i'm going to add an image here so i'm going to add an image tag with a class name and this image tag will have a class name of ui avatar a mage and the source will be the user which we are adding source will be the user and let's give the alt tag of user and then let's close the tag all right and if i save it then you will see that you have a proper image now and our list properly and we have the the trash icon as well so the next thing we are going to do is we are now going to build the functionality right now we have only set the components and placed all the components now we are going to actually build the functionality so what we are going to do first we are not going to use these two static lists so we will go to the app component all right and in the app component i will actually going to remove this and instead of this we are going to make use of a state so if we are using a functional component then we are going to make use of react hooks i am going to add here use state so this is a react hook in order to use the states in our functional component we use the react hook so in the react hook how you can do is i'm going to create a constant i will have the contacts and set context and this will be equals to use state and this will be the what will be the initial value of your contact so initially the contacts will be an empty array so let me add an empty array here so now we have created the state of this contacts and what we want is if we add anything the name and the email and if we click on the ad we actually want to add the contacts in the contacts so what we are going to do we are going to go to the add contacts and in the add context we are actually going to create the state and this state will be the class state we are not going to use any react hook in the class component we can actually create a state directly and we are going to have an object and this state will have the name so we have two fields name and email so i'm going to add the name and email and in the input what we can do is that we are going to write an event on change so let me add an on change and this on change we have an arrow function so this is going to return an event and i'm going to update the state do the set state so if you want to update the state you use the set state and inside the set state i'm going to have the name and the value of name will be the event dot target dot value all right and we are going to use same state as a value in the input so i'm going to use a value here and this value will be this dot state dot name all right and we're going to do the same thing in our email as well so let's go to the email and add the same thing here and we are just going to change the state as email and this will be get changed as email and now when we actually click on the ad we need to submit this form so for the form let's go to here and so i'm going to write a on submit and on submit i'm going to call a function this dot add so right now we don't have this add functions so i'm going to create a function add an arrow function all right and i'm going to use event dot prevent default because i'm using a button and i don't want my page to get refresh so i'm using a prevent default and i'm going to do that if this dot state dot name is equal to equals if it's empty and this dot state dot email if this is equals to empty then i'm going to do an alert and this alert will say all the fills are mandatory and we are going to return this function but if it's not let me console.log so if i do a console.log of this dot state let's see what we have so i'm going to do an inspect here all right so if i write the page here and i'm going to add a the page at the rate gmail.com and if i click on the add then i actually get the object here but i need to pass this object to my app component because my app component is the one which will actually going to add this contact into the contacts area so we saw that we if we want to pass a data from a parent to a child we use the props but if we want to pass something from a child to the parent we can actually use the prop so we are actually going to pass a handler here so i can pass a function as and prop so what i'm going to do i'm going to do a add contact handler will be equals to add contact handler so let me add the add contact handler and once i have the handler i need to define this function so i'm going to write constant handler is equals to and this is going to get a contact from the add contact component this will be an arrow function and i'm just going to do a console dot log contact all right and now let's go and add this in here now the handler which we pass from the app component we can use that handler as prop so this dot prop dot add contact handler and we can pass the state here because our state contains the name and email id so now if i add the page here and test and if i click then i can see that i can get my object in the app.js as well so this is what we wanted but what we want that once we actually click on the add we want to clear this fields so to clear the field what we will do we are going to set the state so this dot set state and we are going to clear the name and email so let's clear the name and email and save it and let's remove this console log as well all right and now if i pass the page and test the page and if i click then all right so i added the name as empty and it still got submitted so this should become or we don't want any of the fill to be empty so now if i add the page and if i add test and if i click then i get the object in the app.js and my fields are also cleared so this is what we wanted now we have passed the fills now we need to add this fills into our contact state so if i go here i get the contacts here and i'm going to do a set contacts and when you do a set contacts you never directly manipulate the contacts you always use set contacts to update the state so you never directly update the state with this contact you have to use the set contact so what i'm going to do i'm going to take all the previous state which i was there in the context so i'm going to use a rest so i'm going to use contacts and then i want to add the new contacts so to add the new contact what i'm going to do i'm going to simply write the contacts all right so now we have set the state so this is an array so i have to add the array all right and now let's add the page and test and if i click it then i can see that i can actually add it so if i add an another one then i can actually add it but if i refresh it then you will see that these list gets we are not processing the data so in order to process the data we are actually going to use the local storage so for using the local storage i'm going to use one more react hook which is the use effect and what this use effect do is actually whenever the value actually changes the use effect help us to render the component again so i'm going to use the you use effect and inside the use effect it actually takes a arrow function and here you are going to add the dependency for us it's the contacts so i'm going to add the contacts here all right oops i added a use effect yep all right and inside this what i'm going to do we are actually going to add this in the local storage so i'm going to use local storage dot set item and inside the set item i need to have a key so let me add a key here constant local underscore storage underscore key and this key will be equals to so let's add the contacts here all right so i'm going to use the key now here so i'm going to add the local storage key contact and i'm going to do the json.stringify the contacts all right so now we have stored it in the local storage and now let's go and inspect that whether we are able to store it in the local storage or not so i'm going to go to the application tab and inside the application i'm going to go to the contacts so right now i can see the contacts is empty so let's add the page here and click so as soon as i click it then you will be able to see that the data is being entered into the local storage now we also want that when we actually refresh the page we want grab the information from the local storage and display it so for that we are going to use one more use effect so let me copy this and i'm going to add the one more use effect and this will become the get item and we are only going to get the item of the contacts and after getting the data from the local storage i need to store it into a variable so let me store it into a variable so i'm going to do a contacts okay and i need to pass this string so let me add a json.parse and this is going to pass the string all right so now i have retrieved the data back from the local storage now i have to set the state of set context so let me add the set contacts and inside the set context i'm going to use the retrieve contacts and i only want to do this if the retrieve contract is available so i'm going to add here retrieve contacts this will be an empty array all right so now let's refresh it and let's go to the console all right we don't have anything and now let's add it so i'm going to add the page test and i click it gets added let me add the other one if i click it's get added and let me refresh it so when i refresh it i still able to retrieve it so that means our use effects for storing and retrieving is working very well all right so we have done the addition we have done this now the only thing we need is we want to delete the contact so if i want to delete the contact what i want i want the id of the contact and right now our contact is not having any id so let's go and inspect at each child in the list should have a unique key and we don't have the unique key because right now we are only having name and email which is not the unique so what we are going to do we are going to use a package to generate the uuid so i'm going to do cd contact app and i'm going to install the npm install uuid v4 and this is going to give us the unique id for each of our contact right so our package is installed and now let's add the let's import the uuid so i'm going to do an import and we are going to use the uuid from uuid version 4 and we are going to use it we actually add the data so this is here what we are going to do we are going to create an object and inside the object i will have the uuid right and then i need the name and the email so i'm just going to use the rest operator and i'm going to use the contacts all right and now if i refresh it everything is still works the same so now we are actually going to delete the contact based on this id so let's write the delete function so i'm going to write here constant remove contact handler and this is actually going to get an id and then based on the id we are going to create the copy of the contacts first so let me create the copy of contact list and then once we get the copy we are going to filter out the contacts so i'm going to do contacts dot filter and this is going to have a individual contact all right and then we are going to do a return contact dot id is not equals to id all right and now i have the new contact list and now i'm going to change the contacts state so let's do the set state new contact list all right and now i have to pass this handler to the contact list so i'm going to pass the handler here so i'm going to give a property name as get contact contact id and this contact id will take my handler all right so in the contact list we are going to create the function so i'm going to use the delete contact handler so in order to get the id the id is available inside the contact card so inside the contact card we have this icon and on this icon we can actually write a click handler so i'm going to do on click so when you actually click what you are going to do you are going to run an arrow function and this arrow function is going to take a prop of click handler and with the prop it's going to pass the id because it has the access to the id now we have to pass this click handler and this click handler can be passed from the contacts so let's go here and add the handler so click handler will be equals to the we need to pass this here so now we are passing the click handler from the inner child to the its parent and then from parent to its parent which is the contact card it will give the id to the contact list from the contact list is going to give the id to the app js so there is a better way of doing it but for now let's let's stick to the basic part how we can do these stops let me write this contact handler so this is going to get the id from the contact card all right and once we get the id what we are going to do we are actually going to use the props dot get contact id and pass the id all right so on the app.js we have passed the contact id as a property so this contact id as a property is going to get the id from the delete contact handler and this delete contact handler we have actually passed to the click handler which is go to the contact id all right and now if i save it then if i click here then i should be able to get it and it's actually deleting everything so let me refresh it all right and let me add a new so there is something wrong and let's go and inspect it right so if i go here and i see then yeah one thing we need to do is we actually need to add the key here so let's add the key and this key will be equals to contact dot id all right and let's refresh it and let's try it again so i'm going to add the page so something is wrong with the structure so let's go here and make this structure correct so this should be contact all right and now if i refresh it then let's add an another one test and if i click it i'm able to add let's add one more mike mike at the rate gmail.com so if i click it then it's going to add and another one and if we click on it we can actually going to delete and if we refresh it we can going to retrieve it so this app was actually simple in terms of the functionality but the concepts which we have used is is is very important we have used a lot of react concepts we have used hooks we have used states we have used function component class component style the react jsx we know how to use the local storages how to retrieve the data back all right guys so this is the application which we built in our last video which was the react fundamentals and we can see that we have all the components are listed on the same page which is on the local host 3000 we have the header component we have the add contact component and we have the contact list component but now what we want that we don't want all the components to be listed on the same route which is the localhost 3000 we want different routes and different urls for our different components i want that when i go to localhost 3000 slash ad then i should be able to see my ad component and when i visit just the localhost 3000 i should only be able to see the contact list where i should have a button called add contact and when i click on the add contact i should be able to go to the localhost 3000 slash ad to the add contact page so for this we need to use the react router and the react router actually helps us to navigate between different components helps us to change the browser url modifies the browser history and maintains our page ui state without refreshing the browser so to do this routing we need to use a package called react router dome so to install the react router dome package i will go to the terminal and open new terminal then i'm going to go to my contact app and i'm going to write npm install react router hyphen dome hyphen hyphen save and let's hit enter and this is going to install the react router dome package so meanwhile let's go to our application code and what we had we have a components folder inside the components folder we had the app.js and if we go to the app.js then let's minimize this then we can see that here we have all the components one after the another and this is where we are going to apply the routing all right so now our react router dome package is installed successfully so if we go to the package.json then we can actually see that we have the react router dome dependency and now what we are going to do we will go to our app js and we are going to import the react router dome so from the react router dome i need the browser router so i'm going to write browser router and i'm going to give an alias as router so i'm going to give an alias as router the next thing i will need is the switch i'm going to explain you each why we are importing this router switch and the last thing we need is the route so let's go and import the route and all this are coming from react router dome all right so now we have imported whatever we needed and the next thing we need to do is first we are going to set the router so in order to set the router you just use the router all right and now inside this router you need to add your components which you want to be route so i'm going to add all the three components first so i'm going to cut this paste this here all right now i have all the three components inside the router but we i don't want my header to be have a different route my header should be constant throughout the application so i'm going to exclude this header and then i'm going to add the routes so to add the route i will do the route and the route has a prop which is called the path where we can specify that what url we want so if i want to go to the add component my url should be the localhost 3000 slash add and when i actually go to this path what component you want to load so for me i want to load my ad contact component so let me add the add contact component and for time being what i'm going to do i'm actually going to just comment this out and i will comment this as well and then i will going to add one more route which will be the slash which will be by default the home and when i go to the home i just need to have the contact list all right and as soon as i add the contact list i'm actually going to get an error because this contactless component is expecting some props so for that what we can do for now if i go here and this function the map is not able to find the contacts so for now what we can do i'm just going to remove this and i'm going to add a constant as contacts and this is going to have the id so let me have an id as one then i'm going to have a name so this is going to be the page and then i'm going to have an email and this is going to be cs at the rate gmail.com and we are doing this just for now so now as soon as i save it you can see that on the home page i only have the contact list now and if i want to go to the ad then i can actually change this ad and this is going to give me the add contact but one thing you will be noticing here that when i go to the slash add why i am seeing the contact list so how it works so first it checks this path so in the add contact also you will see that there is a slash path so first it will look for the slash add and it will take you to the contact add contact but then in the next part also it will search for the slash and you will see that there is a slash so it just matches the slash and it gives me the contact list but if you want to do that it should only go as soon as it matches a path it should not go and look for the other parts so for that what we can do we can actually write the switch so the switch will do one thing that it's only going to find the match as soon as it finds the match it will not go and search for the other routes so i'm going to copy this and i'm going to add this here all right and now if i save it then i actually misspell the switch switch all right and let me change this switch here all right and now if i save it then you will see that i am not able to see the contact list on my ad contact and if i just go on the slash then i will be see the contact list but there is a problem the problem is that if i just remove this and if i added above then you will see that the contact list works fine but if i go to the ad then in slash add also i'm able to see the contact list so in both the cases i am seeing the contact list and this is because the switch will match only the first route if it matches the first route it will not go and check for the other route so that's the reason is if we go to the slash add it actually matches this slash and on the slash we have the contact list so to solve this problem we can actually add a crop and which is called the exact and this exact will match the exact path so now if i save it then you will see that it will match the exact path that does it has the only slash no but it doesn't have only slash it has slash ad so that's why i get the ad contact and if i go to my home page then it's going to give me the contact list so that's how it actually works so the next thing we are going to do is that on the contact list i need a button to go to the add contact because i don't want to go to my url and manipulate the url and go to that component so let's add a button here so i'm going to go to the contact list and inside the contact list i'm going to add a button here and i'm going to add a button and this button will say add contact and let's add a class name so i'm going to add a class of ui button blue right all right and if i save it then you can see that i have a add contact but now what i want if i click on it i should be able to go to the slash ad so in order to do that we need to import one thing and that is the link from the react router dome so so i'm going to click here import and from the import i'm going to do the import of a link and this will be from the react router dome so we add this brackets here and that is because that this link component is not a default exported component when there is a component which is a export default component name in that case you don't need to add the mustache or the brackets and that is where you can see that for the contact card we did not add any uh curly braces but for the link we need to add the curly braces because the link is not a default export date component so what we can do we have imported the link and we can actually add this link component here and i will add this inside the link component so i'm going to cut this and i'm going to add this here all right and inside the link you can actually pass the prop which is the two and for the two i can give the value as slash ad that it want to go to the slash add route and if i save it then you will be able to see that if i click on the add contact i can go to the ad contact component so now we can actually go back here and we can go back and forth so if i go to the add contact and now let's try to add a contact so i'm going to add a contact as test and this will be test gmail.com and if i click on the add then you will notice that we get an error and that is because we are not actually passing the props from our route so if i go back on app.js and you will notice that right now we only have the component but the real was we need to have a prop of add contact handler so now the question here is how do we add the props when we actually have a component in the route so the one way of passing the props in the routed component is that inside this component we are going to have an arrow function so i'm going to add an arrow function and inside the arrow function i'm going to make this changes and now i can actually pass the prop the prop name was add contact handler so i'm going to copy this and i'm going to add this here all right so this is one of the way and we can do the same thing for the other one so let me add the same thing for the contact list so for the contact list i'm going to have this arrow function and inside the contact list i'm actually going to pass this information so i'm going to copy this and i'm going to add this here all right and now we can see that we have the contact list component and we are able to pass the props as well so i will go here and i will remove this because we don't want this now we are able to pass and this will become back the props dot contact all right and now let's give a try so if i go back then you will see that i can see my contact list which is coming from the local storage if i click on the add contact and let's add one new contact so i'm going to write a new contact and this will be new at the gmail.com and if i click on the ad then something is happening the contact is being stored in the local storage but the ideal case should be that we should be redirected back to our contact list so that we can see that the newly added contact we are able to see it on the list or not but if i go back then you will see that my contact is being added but there is one problem with this approach and the problem is this what happens when you actually add a component name inside the component and react internally uses react dot create element in order to create the component but what happens when you pass it inside an anonymous function so each time when we visit the route or the url then each time the anonymous function will get executed and each time we will be creating the create element and that is actually going to do a performance issue because we just want to update the component which is created once we don't want to recreate the component every time so that's why we are not going to use this approach to pass the props instead of this there is an another prop which is the render and we are going to use the render in the route so let me show you what actually i'm trying to say here so i'm going to remove this first so let's remove this all right and instead of adding the component i'm going to add an another prop which is called the render prop so inside the render so the syntax is a little bit weird but you will be able to get along if if you write more and more code so the first thing is we need to have the props so i'm going to add here props and this props will be a arrow function and then here i can actually do the add contact all right and inside the add contact we are going to destructure the props we have so let's restructure the props and after destructuring the props we can actually add the props which we want to pass so i'm sorry we need to pass this one so let me copy this and i also made a small mistake i need to have a contact list here so let's add a contact list all right so now this is a correct approach when you actually want to pass props in your route so now if i refresh it then i still see the same results so that's that's fine so we need to change this as well because we are not going to use this approach to pass the props so let me remove this and here i'm going to add the render all right and inside the render we need to have the props and inside the props i'm going to add the add contact all right and inside this add contract we are going to destructure the props so let's destructure the props and the past the props which we want so i'm going to copy this and i'm going to paste this all right and now let's remove this because we have the routes properly configured all right now if i refresh it and if i click on the add contact i'm able to see the add contact and let's add the add contact so the new contact will be max and it will be max at the gmail.com but i'm not going to click on the ad and that is because when i click on the ad i want my contact to be persisted in the local storage but at the same time i want to be back on my contact list page so what we are going to do we are going to add a programmatically route the route will happen uh programmatically when some event is triggered the route will happen so let's go to the add contacts so let's go to the add contact i'm on the add contact and where is my okay on submit all right and here what i'm going to do is here after we clear the fills we actually need to go back to our contact list page so one thing i want to show you before i write any code i want to console and i want to do console log this dot props let's go to the console log so i'm going to click on the inspect i will go to the console log and inside the console log if i add something so let me add max again so i'm going to add max and i'm going to click max at the rate gmail.com and if i click on the ad then you will see that i have some additional information in my props so i have a history and if i use this history dot push i will be able to add a route where actually i want to go so what i'm going to do is i'm going to remove this now all right and we are actually going to do this dot props dot history dot push and we can actually add the route which we want to go so we want to go to the home page so which is the slash all right and now if i save it then let's do a test free test at the gmail.com and now if i click on the ad we should be able to add the new contact and we also should be able to navigate to the contact list or the home so if i click it then boom we are able to come to the contact list so this is how you can actually do a programmatically navigation from one component to other component the other thing in the route i want to show you is the when actually i click on any of the contact i need to go to that particular contact page where i can see the details of the contact so for that what we will do let's go first to the contact card so i'm going to go to the contact card so i am inside the contact card and in the contact card we can see that we have the name and we have the email and on name and the email when we actually click on it we should be able to redirect it to the contact detail page of a particular contact so what we can do first we will be importing the link so let's go and import the link all right and this link will be from the react router dome all right so the next thing we will do that we are going to make this name and the email address clickable so i will come here and i'm going to add a link here all right and then i'm going to add the two prop so inside the two what i need to have is i'm going to do m equal all right and here i'm going to add the link so let me cut this let me add it below here all right so when i click on a particular contact i need to go to the contact detail page so for that i will have a route so i'm going to use a backtick and i need to go to a contact slash the id of a particular contact so we have the id so i'm going to do an id here so we already have the id for each contact so all right now if i save it then if i hover it then you will see that if i click on any one then you will see that we actually have a url so if i let me maximize this little bit so you will see that we have a url which is the contact and there is the id but right now we we haven't specified that when actually it goes to that route what component should get load so we are going to create a new component called contact details but for now if i click on this contact then you will see that we have a different route if i click on this we have a different route so we have different route for each of our contacts and now we need to create a contact detail page where we can actually see the detail of the particular contact so this is how you can actually add the id so now let's create a new component so i'm going to go here i'm going to create new and i'm going to add the contact detail dot js all right and inside the contact detail.js uh i will just going to do a copy paste of this so that we don't waste time all right and here i am going to remove all this all right and we don't have any props at the moment so let me remove this prop and we will have an image so if i go to the image then we are using the jpg image so let me change this to jpg so this will become j b g all right and what we are going to return from here is a jsx so let me add a jsx quickly so we have a div with the class name of main and all these classes are coming from the semantic ui so we are using the semantic ui if in case you have forgot so i'm going to add a div with the class name of ui card centered all right and we are going to create a card then i'm going to have a class name and we are going to use an image so let's add an image inside this i'm going to add an image src and that will contain an alt tag of a user so let me add a user here and we have already imported the image so after the image i need to have a div with a class name of content all right inside the content i need a there with the class name of header and this is going to have the name as the page let's give a hard coded value inside that i need in another div and that will contain the description and i'm going to give as cs dot the page at the rate gmail.com all right and now let's save it and now we have added this component so we need to add this component into our route so let's go to the app.js and inside the app.js we are going to add this as a route so before adding the route we need to import the component so let's go and import our contact detail so i guess we haven't exported the contact details so let's go and export the contact detail so let's change this to detail and change this to detail all right and now we can actually export it so let's go here and expose it from contact detail all right and now we can use it in the route so if this is the route then adding a new route here which is the route the path will be slash contact slash and we are passing the id so if i go to the contact card then you will see that we have an id here so we can actually refer this id as colon id all right and when we go to that particular path we need to have our route and this route will be the contact details so let me copy this and let me add this all right and now let's try and if i click on the page then i can see that i have a contact detail but if i go back and if i click on daniel mentor then you will see that the name is still the page which is incorrect so what we need to do actually is we need to pass the information of a contact to the contact detail page so right now we are in the contact card which is this from here we need to pass the information of the contact so that we can show this information in the contact details so how we can actually pass the information so what we can do is inside this link what we will do is right now we will i will remove this first or i will just cut it all right so this is r2 and here we need to pass two things first we need to pass the path and the next thing we need to part the data as well so what we will do we are going to create an object inside this and we have the couple of properties which we can use the first one we will use is the path name so inside the path name i can actually give the path name which is the contact slash id but apart from the path name i can actually give the state as a property and inside the state what we can do is we can actually pass the information which we want to pass to the contact detail page so i need to pass a contact and this value will be the props dot contact because this props dot contact contains the name id and email of my contacts so i can pass this props dot contact to this contact all right and if i save it then now let's go to the contact details and we have a props here so what i'm going to do is the first thing i want to show you that what information we are getting in this props so let's go and do a console.log and let's write it props all right and if i go and inspect then let's go back first all right go to the inspect element and now if i click on this daniel then we have a object and this object is printed from the line 6 which is the console.log.props so if we go here and if we see that inside the location inside the location you can see that there is a key called states so if you can't see i will just zoom it out there is a key called states all right and in this state we can actually see the contact which we actually passed and this is what we wanted in order to display the information of a contact so we can make use of this information and we can display it so let's go back here and now we know that we get the information in this prop and let's destructure the information which we want we want the name we want the email and we can get this both information from props dot location location dot state dot contact all right and now let's copy this and add the name here okay and we can actually add the email here so let's add the email all right i have saved it and we will do one more thing we will be creating a button here so that from the contact detail page we can go back to our contact list so let's go and create a button so i'm going to create a div with a class name and the class name will be the center there all right and inside that i'm going to create a button and the button will be having back to contact list and let's give a classes to the button so i'm going to give a class name of ui button blue [Music] center all right and now if i save it then you can see i can get the back to contact list but if we click it nothing is going to happen and we know what to do here we are going to make use of this link again so i'm going to add the link here link and inside this link we are going to have the button so let me cut this let me add this button here and we can do the two and inside the two we want to go to the slash all right and let's save it so now if i click on the back to contact list i should be able to go back to the contact list and if i click on mic i can see here mike and and his email id if i click on max i can see max and max email id if i want to delete it i can delete it if i want to add a new contact let's add a new contact as max again and this will become max at the gmail.com if i click on add i can see the new is added so you can see that this is how easy it is we are navigating between different components and it's so quick and so fast because the page is not getting refreshed and i have a little assignment for you that when you click on the delete you should actually go to a new page which should be slash delete and there you can show a message that are you sure you want to delete a page okay or no if you click on the ok then the contact should get deleted because delete functionality is already working you just need to move that piece and take it to the new page when you click on the ok you should be able to delete it and you should be able to get back to the contact list page so all this information is already there in this tutorial and you just need to do a little bit of a new create a new component for delete and then do the functionality so this is an assignment for you but don't worry if you get any problem or you get stuck anywhere you can put it in the comments i'm going to help you immediately all right guys so i am using the same application code which we have built in our previous videos the react fundamentals and react router if you are new and you have missed the previous videos then i recommend you to watch that first so what we are going to do first we are going to set up a json server so that we can have our fake apis so let me take you the github page of the json server so this is the github page of the json server and here you can see that the json server follows the restful api conventions so i'm going to explain you what the restful api convention is a little bit so that you can have a good idea and then you can see that my json server from here you can actually uh they have the steps to create the json server so we need to do an npm install of a json server and then we need to just create a db.json file and the resource which we want so let's go to our visual studio code and let's do the setup so i am in the visual studio code and first we will create a new folder and i'm going to name it as server api and then let's go to the terminal and from the terminal i'm going to go to the server api and we will do an npm init hyphen hyphen yes to create the packet.json file so this is going to create the packet.json file and now if we see in the package.json file we have the default information about the package.json so let's install the json server so i'm going to do npm install hyphen hyphen save json hyphen server and this is going to take some while so meanwhile let's understand the rest api convention so let me show you a slide that will help you to understand the rest convention very easily so we are going to create a resource with the name of contacts and on this resource we can actually do the crud operations we can create a new resource we can update a resource we can delete a resource or we can fetch the resources so this is what the json server follows the restful api convention all right so now our json server is installed and next thing we will do is we are going to create a file called db.json so inside the db json we are going to create our resource which will be a json object so if you don't know about jason i have a complete crash course on jason i will add the link in the description or you can click on the card above and jump to it directly so the name of our resource will be contacts so let's go and add the contacts and this will be an array so what we are going to do let's start our application first let's go to the terminal and i have already started i guess so yeah my application is already started so let's go and visit the application on the browser alright so this is our application and let me adjust the screens all right so now i have adjusted the screen and right now what we are doing is uh if we are adding any of the uh contact then the contact is being stored in the local storage so we will go to inspect it and we are going to go to the application and from the application i'm just going to copy this and then i'm going to use this in the json server so if i want to use it here i'm going to add this here and i will just remove this and i'm going to remove this all right so we have initially added some data in our contacts array which we can use it in the uh react application so we need to do one more thing we actually want to go to the scripts and we are going to remove this and instead of this we are going to add a start here and the value of the start will be json server hyphen p and then we are going to give a port number and we will write hyphen w so that we can watch our db json file whenever there is a changes all right now i have saved it and we need to do one thing we need to start our json server so let's go here and let's go to cd server api and now we are going to do npm start and this is going to start our json server so let the json server get start so it's already started at localhost 3006. and let's go and visit it uh all right so we can see the json server is started and if i click on the contacts i can see my two records so now what we need to do is we need to make changes in our react application so that we can fetch the data from the json server and not from the local storage so i'm going to go to the app.js so this is the app.js i'm going to minimize this all right so now we are in the app.js and we can see that here we we actually retrieve the contacts from the local storage so before we make any changes we need to install the axios so let's go to the terminal and install the axios cd contact app and i'm going to do npm install hyphen hyphen save axios so this is going to install the axios and after that we can use the axia so so meanwhile it gets installed i'm going to create a new directory here and i'm going to name the directory as api and inside this i'm going to create a new file and i'm going to name it as contacts.js so this file will be our axios base file so i'm going to import axios from axios all right and here we are going to do an export default axios dot create and this create will take an object and inside the object we are going to define our base url so our base url we can get it from this localhost 3006. so i'm going to copy this and i'm going to add this here all right and now our axios is installed so now we can make changes in our application so i will go to the app.js and inside the app.js this is the code where we actually retrieve our data from the local storage so i'm going to comment this out and instead of this what i will do i will first create a function which will be actually used for the fetching of the data so i will write here before that let's import the api so i'm going to import api from slash api slash contacts all right so now we have imported the apis and let's write the retrieve contacts so this function will actually retrieve the contacts i'm going to write constant retrieve contacts this will be equals to an arrow function and then i'm going to do a constant this is going to give me a response and i'm going to use the api dot get and this will be a get call so for the get call i'm gonna do the slash contacts and we are going to use the async and await because we want this to be an asynchronous mode and it should be returning a promise so if you don't know about async await and how to use them then i have a video on it i'm going to add the link in the description or you can click on the card above so i'm going to add an async keyword here and i'm going to add a weight here all right and this we are going to return the response from here so let's return the response from here all right and this will get the data in the response dot data and i will remove this because we are going to use it in the use effect so now let's go to the use effect and in this use effect we are going to write the so we have actually returned the retrieve contact function outside the use effect so that it can be reusable for other purposes as well so now here what i will do i'm going to create a constant and i'm going to write get all contacts and this will be and a sync and arrow function and this is going to return all contacts and these contacts will be equal to a weight retrieve i'm going to call the retrieve contact function here and then if this has the contacts then i need to update the state so we are going we are doing the same thing but in this case we are fetching the data from the server and not from the local storage so similarly we are going to do the set contacts and we are going to add the all contacts all right and now if i save it then i should be able to fetch the data but i'm not able to fetch the data because i need to call this function so let's call this function all right and now if i save it then i should be able to get the data so now this data we are fetching it from the uh from the api and not from the local storage so if i go and i delete the local storage all right now i have deleted the local storage but i still able to fetch the data because because we are getting this data from the api and we still see the data here and that is because that we are using the set item so if i comment this out then we will no longer be able to see it so i will remove this and now if i refresh it then we don't have any data in our local storage so let's go to the network tab and see the api all right so now if i refresh it then we see that we have the contacts now let's do and write the code for the add contact so that we can make a create operation so i will go to the add context and inside the ad contact i already get the contact and here what i'm going to do i am simply going to create a new request first so i'm going to create a request and inside the request i'm going to have the id so i will have the id which will be generated from the uuid utility all right and then we are going to have the contact so let's have the contact here so i'm doing the destructuring of the contact so this is the same thing i am doing it but i'm keeping this in a separate constant variable which is a request and after that i will create the api call so i'm going to do a constant which will give me a response and i'm going to write the api dot post so this is the axios post call and we know the url so the url will still be the contacts as it's a rest convention so we have the same resource and the second parameter will be the request body which you want to send so i'm going to add the request here and we will be using the async await so i'm going to add a sync here and i will add the await here all right and once we receive the data which is the response we have to set this response in our state because our state will get changed so i'm going to copy this and i will add the state here so this response will be the new state so now let's save it and let's try to add something so i'm going to add a myth and here i'm going to add amy that the gmail and if i click on add then i am not getting the data so that means something is wrong so if we see here all right so we we actually made a mistake so this should be data here response dot data and if i do the response dot data so let's add a new one so i'm going to add this time as mike and mike and if i click and i will be able to see the mic john and why we added this response response.data we can see actually do a console.log and we can log the response here so let's log the response go here and do the inspect element in the console let's clear the console and i'm going to add as max and this will be max and if i click on add then oops i i made a mistake this response should be after the response is being initialized so now let's go back and go to the add contact do the inspect element and now add here max i'm going to add the max and let's click on add so we can see that the actual response is this and we get the data which is in the response dot data so this is our data so we need to add here as response dot data all right so now we have created two operations the one is the fetch all the data which is the get call and other one is the adding a new contact which is a post call let's do the delete one so for the delete we have already doing this part here the remove contact handler and we just need to do a small slide change to call the api here do the async first so this will be an async and inside this we are going to create an await because when we delete it we are not getting any response we are just going to get a status code so i'm going to do api dot delete this time and this delete method i'm going to do the backticks and this will have the contacts and we will have the id we need to pass the id which we want to delete so let me add the id all right and the rest thing will be the same so if i refresh it and if i do an inspect element i will go to the network tab all right and i'm going to delete the max so if i click on the max then you will see that we don't get anything back but in the status code we get the status code as 200 and the request method is delete so our max is deleted if i want to delete mike mike will get deleted if i want to delete amit amit will get deleted and for the the last one which is the update one so for that we don't have at the moment any functionality to the edit so let's create the functionality quickly so the edit will be very similar to the add context so i'm going to copy this and i'm going to paste this again and i will just rename this and this will become edit i will remove this all right and inside this we are going to change this to edit so this will become edit and this will become edit all right and then we will change this to update and we are going to change this to update all right we also need to go to the contact card and inside the contact card we need to add the edit icon so i'm going to copy this and i will add this again here and i will change this to edit outline icon and i will add here a margin so that we can get a space left of 10 pixel so we want to change the color so this color will be blue and when we click on the edit we need to add a link here and we are going to pass the same information because while doing the edit we actually need the id of the contact which we want to edit okay so we have the and the path will we will change the path to edit so this will be the edit and we will still need the props so that we can have the id so now let's go to the edit contact and make the changes on the edit contact what i will do i'm going to create a constructor and this constructor will have the props and inside the props we are going to add the super props all right so i want that when my added component get initialized i need to add the state i need to change the state so for that the data which i passed from this state will be uh i can use that as a props so these props will help us to update the state so i'm gonna do a constant and i will do the destructuring of id name and email and this we will get it from the props dot location dot state dot contact so if if you don't know what i am doing then i would recommend you to watch the prerequisite video of this which is the react router because all this part is a part of react router let's initialize the state so the initial value of the state will be this id will be equal to the id which i am getting from the props the name should be the name which i am getting from the props the email should be the value which i'm getting from the props and as the es6 we have the key and the value as same we can actually eliminate this we don't want to add this all right and let's save this so now we have added this and we don't have a route actually so let's go to the app.js and let's add a route here so i'm going to add a route here so i'm going to copy this and i'm going to add a route with then edit and this will become edit contact and we are going to pass a handler which will be the update contact so i'm going to change this to update contact and this will become update contact all right we have the update contact handler but we need to define the update contact function so let's go and write the update contact function so this is the add contact and here we are going to write the update contact so i'm going to do constant update contact handler will be equals to an arrow function all right so now we have it and now if i click on the edit i should be able to go to the edit so if i click on back again then if i click on edit then i should be able to edit but something is wrong and everything is getting deleted so let's go back to the contact card and inside the contact card we can see that we have this function which we just copy paste it from the trash icon so i don't need to do this one so i will remove this all right and let's save it and we need to add more contacts so i'm going to add the contact as nice nikesh and and add so we get this now if i click on edit i can see this if i go back and i can see this so we need to add two buttons here first the button for the added this should not be add this should be update so let's change this to update and the second thing we need to do is we need to make this as edit contact so i'm going to do an edit contact all right so now we have the edit and we have the update so if i click on the update we are going to get an error because this is the contact handler so we have to change this contact handler to the one which we passed so the contact handler which we passed is the update contact handler so let's copy this and let's add this here all right and now we have the update contact handler this is going to give the state which will contain the id name and email address all the three fills and then once we are done with it we are going to clear the fills and then we are going to go back to our contact list so if i click on the update now then it should be able to call this function which is the update contact handler so let's write this update contact handler so this update contact handler will get the state which is the contact and let's do it as a sync all right and then this will do a response of a wait and then we are going to do a put call so this will be a put string literal so i'm going to write the contact slash and we need to pass the id so this id will be the contact which we received and i'm going to do the dot id all right and then what will be the new values the new values will be in the contact which we have passed so this will be the new value so we have taken the id of this contact here and we have added the contact here which will be the new values so once we make the update the next thing we need to do is we need to actually update the state with the new value because if i do a console log i will do a console log of the response dot data all right i'll save it and let's go to the inspect element let's clear the console and now if i click on the update you will actually see that we make an api call in network request and this is a put call with the 200 so the successful and in the console we see that we get the new updated value which we have updated in the database so what we are going to do we need to update our state with this new value so to update the state we are going to do a manipulation on the current state so to the manipulation on the current state we are going to use the set contacts and whenever you want to manipulate the data in the array you can actually use a map function so i'm going to take the contacts and then i'm going to map the contacts and this is going to give me a contact all right and this will be an arrow function and let's do the destructuring of the data that we are receiving from the response so i'm going to do a destructure of id name and email and these values will come from response dot data all right and the next thing we'll do is we are actually going to return the first we will make a check that if the contact which we have the id of it is equal to equal to the id which we have it here if it's equal equal to id then we are going to manipulate that object so i'm going to use the response dot data so this is the new object but if it doesn't matches then i want to return the old contact whatever it was all right and now if i save it then i should be able to see so now everything is okay and what i'm going to do i'm going to click on edit and i'm going to edit it as the cache sync all right and now if i click on update then it should update it immediately and we have made the api call so let's go and add a new contact so i'm going to do a mic john and this will become mic if i click on add then i'm able to add a new contact so that's how you can use axios and you can do the crud operations in react so if i want to delete it i can delete it if i want to edit it i can actually edit it immediately and everything is happening fine all right so i hope this video was very useful and because this is what you actually do when you are working on a real project you just need to do one thing if you have the real apis you are going to go to the contacts and here you need to change your base url once you change the base url your this code will be able to adapt the apis and the data from the actual server and will be able to do the crud operations all right guys so i am using the same application code which we built in our last video react axios crud operations with json server so in this video we need to build the search functionality so we need to have a search bar here in the contact list component so let's go to the contactless component and add a search bar so i will go to the contactless component and inside the contactless component after this h2 tag we need to add a search bar so i'm going to add a div with a class name of ui search and if you have forgot that we are using semantic ui for this project so all the classes are coming from the semantic ui and now i'm going to create an another div and i'm going to give a class of ui icon and input all right then i'm going to create an input with type of text i'm going to give a placeholder of search contact and i'm going to give a class name so last name of prompt all right so now we have the search and we need to have the icon here so for the icon i'm going to add a icon here so i will add the i tag and i'm going to give a class name of search icon so this is going to give us a icon all right so we have made the changes in the jsx and what we will do is we need to create the state first so we are using the functional components so we cannot use directly this dot state or the state we need to use a react hook so we will be using a use state so what i will do i will click here and i will go to the app.js and inside the app.js we have our contact state which is actually the list of contacts we are managing so here i'm going to create a state so i'm going to add a constant so i'm going to add a search term and i'm going to add the set search term so this will be a use state and i will give the value as empty all right and then i'm going to pass the search in my contact list component so i'm going to copy this search and i will go to my component so this is my contact component and inside this contact component i'm going to add a prop as term and i'm going to give the value as search term and along with this search term i will also pass a click handler so whenever you type something in the search bar i need the value of the search term inside my app.js component so that i can make a filter on the contacts so for that i'm going to write a search keyword and this search keyword will have the search handler so i'm going to add a search handler here and we will get an errors so i need to define a search handler first so let's go here and add the search handler so i'm going to write a constant this search handler and this search handler is added so now we will not get the error all right so now we have added the two props here the term and the keyword let's go and access these props in our contact list and inside the contact list we already have the props so we can get all the props here so if i save it and if we go to the inspect element and let's go to the console and if i clear the console so here if i expand this then i can see the prop so i have the search keyword here and i also have the term so now we can make use of these props in our contact list now we have the props the next thing we need to do is we need to go to the input and inside the input we need to add the value so the value will be the props which we are adding dot the term and we will also add the on change so i'm going to add an on change event and on change event will have the function of get search term so okay so let's go and write the get search term now so i have a get search term and here i'm going to write the function of get search term this will be an arrow function and what we will do we are going to make use of use ref so i want to demonstrate how you can use the use ref so it's not required you can actually do it here you can directly write the event.target.value to get the value but we will make use of the userf so i'm going to import the use ref so i will add the use ref and we need to initialize this user f so i'm going to do the constant input element and this element is equals to use ref and the initial value will be the empty value and now you need to bind this user f to the input tag so if we want to bind that what we can do we can come here and we can add the ref and this ref will be equals to the input element all right so now we have bind the user f hook with our input tag and let's see now if we type anything something happens or not so i will go to the search term here and inside the search term i'm going to do a console.log and i will add the input element all right and let me inspect and let's see what actually happens so i go to the console i clear my console and if i type anything here let me type the page so if i type anything then you will see that we get an input where we actually added the user f element so we get all the information here so i can actually do the current dot value and this is actually going to give me the value of whatever i am typing in my input box i'm again saying that this can also be done with the event.target.value but we are doing this way it's just to demonstrate the use of userf so now if i refresh it and i clear the console and now if i type the page then i should be able to see that whatever i am typing so now we need to pass whatever we are typing in the search bar to the app.js so for that i will just remove this for now and if i go to app.js we have added the search keyword as a prop so let's go and add this prop so i'm going to use props dot search keyword and inside the search keyword i'm going to add the input dot current dot value so whatever value i am typing all right so now we have the value and if i go to the app.js and in the app.js we already have the handler so this handler will actually have a search term as a argument and then we are going to do a console.log of the search term so let's see what we get here in the search term so if i clear this out i made a mistake so i'm going to do a console all right if i clear this out and now if i type the page then i'm getting the value as the page so what i'm going to do we will take the search term and we will actually set the state so we have already taken a state of search term and set system so we need to set this state so i'm going to remove this and i'm going to do a set search term and inside this i'm going to add the search term all right so now we have got our search term and now we actually need to filter the results based on this search term so let me add one more state so i'm going to add one more state and this will state will be the search results and it will be set search results and the initial value of this state will be an empty array so i'm going to add an empty array here and here what we will do is we will make a check so if our search term is not equal to equal to empty then what we are going to do we are actually going to filter out the results so i'm going to take the filtered result into a new constant so i'm going to add a constant here and this will be the new contact list and i'm going to filter the contacts dot filter and on the filters i'm going to get my contact back all right this will be an arrow function and we need to return the contact with actually matches the criteria so each of our contact is a javascript object so if i go to a network tab and if i click on any of the contact if i click on this preview then you will see that each of our contact is a javascript object and we need to make a search only on the values of these object like i want to make a search on contact.name and i want to make a search on contact.email so for that what i'm going to do i'm actually going to use a object dot values and this is going to give me the values of the contacts so if i actually do a console log here so let me do a console dot log so that so that we can see what we are getting here so i'm going to save this and i'm going to go to the console and i will clear this out so let me remove a console log from here so that we don't get all the locks all right so now i have removed it and now if i actually type something so i'm going to type something and you will see that what we actually get so we get this object dot values and these values are only the values not the key of the object so now we need to make a search on this values so this is an array so what i'm going to do i am actually going to add a join here so we can join all the values so if i now type the page then i get this complete value and now this is like a string so we can make a search on this string so i'm going to remove this now and on this join uh let's change it to lower so that all the values first will be converted to a lowest case and then we are going to do and includes so if i do includes and we will make and include on the search term that the search term is included in this string or not so i'm going to add here the search term dot and we will make a lower case here as well so i made a mistake here so this will become two lower all right and now this string becomes object dot values we get the contact we make the join on the contact we make it to a lower case and then we check that this is included in the search term or not if it's included then it's going to return a true so let me return this so i'm going to return this so once we get this new contact list we need to update the state of the search results so now we have filtered out the results and let's set the state set state of search results and this state will be the new contact list but if the search term is actually equals to empty then in that case what we are going to do we are going to set this search results with our actual contacts so this will be the actual contacts all right and now we have made the search now the next thing we need to do is we need to apply this search results in our contact list so let's go to the contact list so where is the contact so this is our contact list and in our contact list initially we were passing the contacts but now we have to make a condition and that condition will be that if my search term so search term and the length of the search term is less than one then i need to pass the contacts but if it's not less than one that means i am typing something in my search bar and in that case i need to pass my search results so this will become search results all right and now let's give a try so i'm going to remove this and i'm going to refresh the page and now if i want to search something i'm going to type the page and it's i'm able to search if i type in caps lock then i'm still able to search if i type the outlook to check that anyone has an outlook email then i can still search and if i type some gibberish then there is no result so there is no results for that what we can do we can actually go to the contact list and inside the contact list we have this render so here we can actually do that if the render dot length is greater than zero if it's true then it should have the render contact list but if it's false then we need to show that no contacts available all right we have saved it and now we can try if we type some gibberish we can see no contacts available and if we have the contacts we can actually do the contacts and the rest of the functionality which we built the ad contacts so let me add a new contact at brad b and this will be the rate test dot com and if i click on the ad then i should be able to see the bread if i want to update it from brad bay one two three then i should be able to update it if i want to delete it i can delete it all this functionality is working so that's all i have in this video i know it's a long video but we learned a lot of react so i hope you liked the video a thumbs up is appreciated you can also connect with me via facebook or instagram i will add links in the description below and before you go don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one and thank you thanks for watching

Channel: Dipesh Malvia

Views: 247,279

Rating: 4.9482832 out of 5

Keywords: react tutorial, react tutorial for beginners, react js tutorial, learn react in one video, react props tutorial, learn react, reactjs tutorial for beginners, learn react for beginners, react for beginners, reactjs for beginners, javascript, javascript library, javascript framework, learn react in 30 minutes, react crash course 2021, react crash course tutorial, react, function component in reactjs, states in react js, react projects for beginners

Id: 0riHps91AzE

Length: 116min 18sec (6978 seconds)

Published: Fri May 14 2021