React Contact Manager App | CRUD | React JS Tutorial 2022 | NAVEEN SAGGAM

hey guys welcome back this is naveen from ui brains technologies and today i came with a new video and new example on react.js so this is actually called as a contact manager application so here you can create a new contact and you can edit the contact you can view the contact you can delete the contact like you can completely maintain uh all of your contacts in this application okay so this application will help you to maintain all your contacts okay it can be n number of contacts it's keep storing of it and you can maintain them it's like you can change the mobile number you can change the picture and you can delete the contact if you don't want and also you can categorize it okay there are some group options there if if the contact is of colleague or a contact of a office or the your family or friends or social media friend like that okay so there are even categorizers like that okay so let's have a look about uh this application and then we're gonna start developing of it okay so when you see this is the outline guys um so here i'll be using bootstrap as a front-end okay so because last video we understand about bootstrap 5 crash course right the same bootstrap file i'm using here as a front-end with react.js okay and here i'm using react.js with the javascript language okay so this is the first page and if you want to create a new contact you can just click on a new button okay here is a new button and uh you know search for anybody this is the search button and then all contacts will display like this so we already have four contacts uh you want to create a new contact just click on new button and i say something called rajan uh one second we have rajan already i think it's not that yeah so i'll say rajan and the photo url so generally photo url uh it's simple you just need to get your facebook profile or anything okay some url of your photo and you can upload so let me just take a copy image address and i'll paste it and okay and his some mobile number and then his email rajan gmail.com and company hcl technology something like that and what is his title some software engineer and which group you wanted to him he is actually colleen okay so he's a colleague or friend or family you can categorize like that he's a colleague and click on create so as soon as you click on create see the contact has been added with the photo which you have uploaded okay rajan and all this so you want to see this raja's data uh there are three options here view edit and delete so uh if you want to view because uh here in this uh main home page you can see only few details like name email and uh mobile number but if you want to see the complete details like is uh uh like his company and uh full details like who is that relationship and all just click on a view so if i click on view you can also see the nice spinner okay and his photo and his details like name mobile number company and group is colleague okay and uh this is like you can view his contact and click on back button so it back to this page again and if you want to update this rajan's mobile number you can just click on edit one if i click on edit so this is edit contact or update contact so here you can change the picture also for example you want to change the rajan's picture to something else you can choose it from online for example this one i want to change so i can copy the address and i can simply paste it here so image has been uh changed so let's change this number some nine zero eight nine one eight something something like that okay and then click on update so it's been updated you can see rajan's picture has changed and mobile number also has changed okay this call updater and also you can delete a contact okay if you don't want this contact anymore you can delete as well so as soon as i click on delete that contact has been gone okay so this is it means you can create a contact you can view the contact you can upgrade the contact and you can also delete the contact you can completely maintain and also as of now we have just four contacts here and in future you will be having more more number of contacts and for those contacts you want to have a search so how you can make a searches we have made a search box so for this i'll say some a d like this see if i say a d so brad is having a d and this guy also have a d we got it okay so a d e i say so vladim has come here okay if i delete we get everybody okay so br is a brad and a is my name okay like that so you can even have a search so this is a a simple application uh which is having complete uh back end also we'll be using json server as a back-end and where you will bend in a data okay so here you will learn almost every concept like how to make the routing and how to make a search and here we'll be using the react functional components and front-end is bootstrap we use okay and also how to handle the form data and how to redirect between the pages okay and how to maintain the application state and everything okay so we're gonna start uh these things now okay so let's start actual setup and then we'll start one by one okay so thank you so much all right so let's create a folder structure and then we'll start with the application so where do i create a folder structure is uh i go to either you can create on a desktop or else you can go inside any of your dietary structure so let me create inside ui branch youtube yeah here i wanna create it uh so how you create this there is a command npx create react app and your application name okay this is your application name so i'll create my application name as something called contact hyphen manager okay this is my application name and this is the package and this is to install so let's copy this part and we have to execute this particular command exactly where you want to create a project so let's copy the path let me open a command line so this is in c drive but i want to go to i drive so i say cd space space my address enter now again in c drive so i colon enter so now it's went to this location cls for clear screen and then let's paste my command the command is this one contact manager so before you proceed i hope you know this right so before you proceed with the creation you must have installed node.js in your system okay so just go to node.js official website and try to start using uh i mean install node.js and then you can make this setup okay so this requires node.js to be installed in your system so let's copy the path and go here and then i'll paste it and okay so now it is trying to download all the required things from online and try to install in your system okay so it is now creating your react.js application so make sure you have a proper internet connection so that it will download all the required files for the basic react.js setup okay from online so make sure you have a proper internet connection i have connected so now it's going on so you to wait for a few seconds for make this setup to happen okay okay so now the folder structure and all has created and uh so it finally you get this one success and you got created so now what i do is let me load this to the editor and then we'll start the server and see okay so when i go to the folder section now so here it is contact manager and we have everything ready and let me load this on my editor you can choose any of the editor i'll be using webstorm and you can use vs code or anything else okay um come on i think it's still loading um okay so when you see this cone okay so it's been loaded uh to editor and just for time being let me start my server npm start okay so that it will start on the port number 3000. so let's see how is that really successfully created or not okay um so let's wait for this to [Music] start yeah it been started okay i think successful yeah so it is started so i got uh the basic react.js project ready okay so now what i do is uh so i want to remove this content i don't need this one because i have to make my own application like this uh this is a design document okay with all the screenshots okay so i have to clear this uh let me go to src app.js yeah in the app.js i have all this first let me change this yes disable okay fine so now i remove this header okay and save it so now when i refresh i have it and let's change this to something called h2 app component okay i got the app component and i don't need to have this center uh because styles applied from app.css i don't need any of the style applied let me delete everything from app.css let's clean up and i don't need to use any logo i deleted okay so that's fine and now okay uh it says that jsx without importing react oh okay so i have to import react.js from react library okay that's fine yeah so i got uh app component and that's fine but still there are some font it is using okay but not in app.css this may be index.css yes they're using some this one i don't need any of this font i delete from ikea the index.css also so this will be your global style sheet okay uh fine so application cleanup is done now the next step is we are going to install bootstrap okay so how we install bootstrap is using npm so let me go to google and search for bootstrap npm okay so the bootstrap npm yeah this one this is the current version 5.1.3 as of today so this is the command let me copy so where do you execute that is you can go to the terminal window let's open a new terminal so exactly in a project location just just make the command npm install our i okay so bootstrap enter so this will install the bootstrap because we don't want to write a complete css by ourselves because we'll be start using push up library for this okay so that's i'm installing now uh yeah it's done so boost 5.1.3 has come along with that along with the bootstrap i want to use the font awesome icons okay okay uh the command of bootstrap is this one npm install bootstrap okay upon awesome there is a another npm you can search for it for awesome npm come on yeah so at fort awesome quanta some free 5.1.1 yeah this is the commander copy i'll make it here and also let's install uh back to our editor and paste it enter okay so this will install the font.some icons you may use the bootstrap icons or you can your choice okay so here i'll be using a font awesome icons okay because uh here these icons right the eye symbol and all these are all icons so i'll be using the quant awesome for that okay so phone doesn't also has been installed uh one last step you need to have is you need to first connect font awesome font awesome cdn link to html page okay so you need to connect the cdn link uh you will get the cdn link online there is something a website called you type yeah this is one cdnjs.com is a website where you can find all the links so i'm looking for 5.1 okay so you got this one all dot min dot css let me copy the link tag and way to add the link tag is you go to um in public there is a index.html uh somewhere somewhere in the link you can add this one okay yeah so once awesome link is added and after that you have to configure bootstrap and quantus microns okay so how you configure bootstrap is you need to connect because bootstrap means you need to connect one css file and one javascript file and for font awesome also you need to connect one css file so i'll show you the path where we have it and where you have to connect so simply you have to connect these files in a index dot js this is the startup file for a react project so i go to index.js yeah in this in this i'll add a comment for font awesome icons okay so import from where node underscore modules i think it's third slash oh no this one oh where is this index of this index.js in src right so but node is outside okay okay so you said dot slash node modules slash uh where is that font awesome so it port awesome slash font awesome slash css slash all dot css that is your font awesome css and also let's connect a bootstrap files so i'll be using bootstrap 5.1 okay so import again dot slash node underscore modules slash uh bootstrap slash dist slash css slash bootstrap dot you have bootstrap.css okay and also you can connect with javascript so import uh dot slash node modules slash bootstrap slash dist slash javascript slash bootstrap.bundle.js okay and dot j is not required just a bootstrap done bundle okay so this is the setup i repeat again you need to install bootstrap with this command this command and install font awesome with this command after that you connect the cdn link in html page that is in uh our integrated html this cdn link i have added and after that index.js you connect you connect fontasmicons and also you connect the boot shaft so that's it so bootstrap and contoso icon setup is ready uh if you want to test it go to app.js because this content is coming from here okay so to test i'll do one thing i'll i'll make a button i'll make a button with the class name uh something called btnbdn minus success and let's say hello okay so i written a button with the class name hello now when i refresh i get the hello button okay so it means it means bootstrap has configured but one last thing is the button doesn't have any space between them uh you may add mr like mmy something like that m y uh sorry m r i'll take um no m and okay okay it is yes sorry it is boot shaft five right so m e and okay so bootstrap configured because we got the styles and also you can check for icons for example here i say i tag okay with the class name uh say something called f e minus f a minus so home okay i got a home icon so it means bootstrap and font awesome has successfully contributed so now let's start with the actual project setup okay so i don't need this okay so once you're done with this the next step is we have to install two other packages one is axios and also react router dom okay uh why we need axios setup is uh because we have to call the backend server for fetching data right so to to to make the backend connection with react application we want this axios and uh we need react router dom also to make the routing happen like back and forth links and all we need this package so these two are extra libraries you have to install so how you install axios is for server connections they say npm install axios okay and after that react router dom so this is again npm install react router dom that's all okay so let's install them so i go to the another terminal let's say npm install axios okay so axios has been installed so next step is cls npm install react router down okay so this is for making the routing system in enable and and react.js okay so so we got react router 6 so previously it was react router 5 and from now it is react router 6. uh small changes are there in router configuration but when we start actually doing router configuration i'll tell you the differences right so react router down six it is okay so fine now we are done with i guess uh all the setup of installation okay that's fine so now uh what we do is uh this installation nothing no configuration for them so once it is done uh you you can confirm in package.json in package.json you confirm c axios is there bootstrap is there quantosome is there and react.dom is also there okay these four packages have successfully installed in your system or in application okay so now let's focus on i mean components creation services creation okay all right so i will start with the folder structures now so the plan is let's delete them yeah so we need few components and services okay what components required is uh we need one now bar okay because when you see here we have a navbar and we have contact list okay and then view contact and then we need edit contact edit contact and also um create contact okay or just say add contact okay this is to display the list of all the contacts and to view the contact information edit and add contact and this is just navbar okay that's all and uh for services they say some contact service okay to make server calls and all okay so let's go to the folder structure src i will create a new folder called components and i create another folder called services okay so in components i create a folder called navbar okay and i create another folder called uh contact contactless or you can do one thing so i create a folder called contacts a contact app right so contacts folder it's like your module so in that i'll say contact list okay you can keep all the things in one fold okay so contactless and add contact and then edit contact and then view contact okay fine now let's create uh the react component so in navbar i'll start with uh javascript just say now bar dot jsx okay so i'll be using a functional components here so let's import react.js from react and let now bar is equal to a function okay so it returns something that is uh i use react dot fragment uh some people use empty brackets also but i just use like this and export default navbar sorry never and let's have a heading uh this make for confirmation this is navbar okay so now our component is ready uh let's make all the components with the basic setup so let's copy this guy and paste in add contact name is add contact so i replace in the nav bar with the add contact okay fine and next i'll paste it in contactless contactless and i'll change this to contactless okay all right next i'll paste an edit contact edit contact and i replace the name with edit contact okay now lastly i paste it this is for view contact and i'll change this to view contact okay done so all this components has been ready so now let's starts with a router configuration okay the video start router configuration is in your app.js okay here so generally what happens is uh here we are using uh react router 6 right once again see we are using react router dom 6 version so slight different for router configuration of react router so the very first step is you go to app no you go to index.js index.js you have to surround the browser router in the app okay it means here import import browser router from react router dom and you have to keep this browser router to be surrounded with app okay so this is the first step index.js the browser router you have to surround with this and then jump into app.js so here you make all the router's configuration okay so first of all i don't need h2 and i just make this as react dot fragment and this is also react fragment i don't need this normal application it is going to be i mean this is normal function so i'll say let app is equal to i just converted to arrow function because i'm using all arrow functions okay yeah that's fine and uh let's check no issue okay so here i'll configure so how i configure is let's import the router things import something from react router dom yeah here previously we were importing switch and root right but there is no switch from react router 6 there is a root roots roots and root okay and now here i'll say first i'll connect the navbar because now but doesn't require any routing uh in that roots previously it was switch okay in the in router 5 version yeah in that root okay so in this root path so path will be slash okay and um this path i'll give another one path contacts slash list okay so here you need to give the component previously it was component now it's changed to element so element you have to give the tag itself so what is my tag is contact lister okay fine so uh contact list i display the list of contacts but what about for empty slash generally you can display a home page for the empty slash but for me home page also the same this thing only so what i do is when i make a empty request it will redirect to this path so what i do is for redirection we have another one that is navigate tag okay so let's say element uh in that i'll use navigate navigate to uh i'll say watch navigate to contacts sorry slash contacts slash list okay generally you redirect in react router 6 is like this navigate tag redirect to this one so whenever you enter slash also automatically redirect to this path and this component will get loaded you want to test this out see i just make it empty slash and enter but automatically redirected to contactless okay and contact list has this there okay same way i'll say contact slash add so this will be add contact and this will be view slash colon contact id to view the contact the particular contact i want to view so i i'm just passing a contact id as a dynamic parameter um so here view contact and same way this is edit slash contact id so this is uh going to be edit contact okay so fine i have contact list add and all okay so router configuration is done okay so you can test also so when i say slash adder you get the add contact when i say view slash some number you get the view contact and in the place of this i'll say edit i get submitted contact okay that way so that's fine yeah so let's make it empty back contactless yeah so this setup is done and then now let's starts with the actual components creation all right so now let's starts with the nav bar and then contact list so first i go to navbar so here we will be using a bootstrap so i i already have uh the design uh document so let's start with this part now here i will do is let's start with nav tag with a class called now bar now bar dark and bg dark and also now bar expand sm so one container so in that an anchor tag so instead of anchor tag you can go with the link tag okay so i will make link tag okay especially from react rotterdam link tag link to what link to empty slash and then class name class name is nabar brand okay it's a brand name and then let's say um contact contact manager okay yeah i got an app bar and uh you wanna have some icon over here so let me use the icon so in front of contact manager i tag with the class fpa something called mobile okay and you want to give a color let's say something called text warning color and for manager you want to have some color manager with the class called text again warning okay yeah so this will be your uh navbar and then now let's jump into the contactless because i need to have a below this navbar i have a contact list with phone directory uh this button and search and all these cards so let's make a basic design uh and then we'll start with actual code actual data from server okay um this is fine now let's jump into contact list so this is the contactless display here so what i do is i'll write first section i'll give the class called contact search in this one container one grid one row single column the first column i want phone directory and the button so let's say p dot h three something called i just say contact manager contact manager and along with this i have a link okay so because when i click on this button it should go to the create new contact page okay so create new contact page we have configured with uh this one add contact so contact slash add so it's supposed to go to this particular path so what i do is let me import let me import something that's called link from reactor to dom so let's add a link here capital so link to link to the one which we have configured in app.js the contact slash add so let's add contact slash ad and then uh you want to specify any class name for the button so a class name it's a blue color button it's a btn btn minus primary button let's say something called new okay so you will be getting this contact manager uh let's some space just add some new okay uh it's not there you can do one thing ms two like start from this one uh you also need some icon inside the button so i'll add itac btn ptn minus oh not a button uh sorry it's a font awesome fpa plus circle okay and some m e two okay some space okay that's fine uh but this one uh there should be some margin top and all so i'll add here for margin all the sides is why you write or else you do one thing just say p5 this padding okay or i'll just say p3 okay fine now uh under that you have some text so a paragraph with a class called one weight bowl uh no no it's upon style italic some lorem 30 tab okay and under that you have one a search box okay you have a form actually so i will i can do one thing i'll just take another row another row let's call md i guess 6 in that i have a form so let's say mb 2 let's say input type is equal to text and the class is form control it's a simple bootstrap classes okay placeholder search names okay and another um [Music] mb2 let's take a button you can take input type equal to submit and the class name is the button so btn btn minus outline um dark and the value goes to be search okay so you check it'll be like this but i need these to be um side by side so for that what you do is uh in this a form right uh in that first column second column you write okay so form with the class name called row okay so in that first column so first column is this guy and the second column is this guy okay in a in the row two columns like that so side by side you have a you have a data uh fine i have a search box as well but still there is some background color for the whole body tag so you want to have it i guess it will be right let me go to index.css yeah here we need to add uh the one more thing is uh here i'm using uh some other font okay this is actually ubuntu font if you want to add touch uh that type of fonts you can google search google fonts okay so um here you can search for ubuntu you get this you can select it and at the right side you get this and let's select the import statement and copy back to here i'll paste it okay so that for the whole body tag i'll apply my font that is ubuntu font for the whole body tag so what happens it will change it yes i got uh it's not changed you can do one thing it's important okay it's been changed to yeah this font um that's fine but what about the background color background color is something um orange it's not actually orange uh once again let me lighten yeah i think this color copy okay so this is the color okay i guess that's the color even more light and you can make it for example i can pick up the pickup from here you can go to color picker and even lighten somewhat yeah triple e84 okay back here and paste it okay some more lighting uh yeah that looks good and under that we need to have these cards okay so there's six column layout and we have a card and these icons okay so back to contactless so after this another section so this will be the class name i'll be contact hyphen list the list of contacts to be display and one container one row call mde six okay i mean the first first half of your page uh one card in that card body so you get like this step of card and for this card you have one image and this and this okay so i'll do like uh call md um it's 4 and call md it's 7 and lastly call md it's it's 1. so 4 plus 7 plus 1 is 12 okay so four column i want to have an image let me grab some online image so just say user icon png you can search for this type of images so i'll just get one image uh there's something this one copy image address i'll keep here just for time being okay we will change it with actual text letter so uh um let's check it's very big image you can just say class name image fluid it fits there but still i because in online when you have a image address right so that image address will have different different type of sizes but i want to have a unique size for every contact image and with something you know rounded background so for that what i do is for each uh here so something called contact img i'll give a class name so for this i'll give my own styles okay so let's say contact img just a width some 200 pixels and the height is 200 pixels and also border radius some 50 percent so that everything will be you know rounded okay fine i think this image fluid you can remove because it was fixed in size okay and this side i need to have the list of items and then the buttons okay so here the other column here i say ul li so this uli class name this group and this li i'll give the class called list group item and this group item action for a hover and here i'll say the name some spam tag because it is in voltex uh let's say give the class font-weight bold so let's say something called rajan okay uh why display here right should be by side right i think i missed the row okay cut all this first row and then this row and then column right i forgot the row actually okay that's fine name is there and then what else name mobile number and then email okay so mobile number some dummy number and the email at gmail.com okay some dummy data as of now uh i have to keep them at the same level uh in the row so that will be uh for the row you can just say align item center comes in center i think that's fine anything else you want to make yeah we need to have three buttons also on this side so let's take buttons those buttons are actually a links because when i click on view it should go to view contact click on edit it should go to the contact and delete this just a button so i'll say link tag okay so link tag with the class class name so let's say btn btn minus warning uh so link to what so link to i wanna shift it to where um app.js yeah so it should be view contact should be this path okay so i'll go back to the contact list and make this part but i'll just make it as a backtick so as of now this will be some [Music] id uh id we don't have now right let's say okay just keep as it is okay and then i'll have um here no text and icon i tag the class fe minus fb minus uh what is that i okay i so you get the i symbol okay the same way you have multiple things so this will be edit this is fba minus pen icon and this is will be just a button nothing to go anywhere it's just normal button so this will be fva minus trash okay so this is btn primary and this is btn danger okay it like this but i have to give some spaces okay so i can give a class called d flex reflex and flex column all right so let's fix this actually yeah so let's give some uh for this row right this entire one second yeah so this entire row i will make some arrangement to fix everything before that yeah here d flex flex column right yeah i say align items center it comes in center but i have to give a space between them i mean just top and bottom so i'll give here my two yeah rl just my one okay top and bottom some space okay looks good but finally you also add at this row uh d flex uh some justify content around so around them some space okay that looks good and lastly this to be a font weight bold light uh this guy is a font right okay so fine uh we are finished with this part okay uh so that's fine what else we do yeah we also check the links when i click on this new it's been gone to add contact okay and when i click on this view button it's been gone to view contact when i click on this edit button it's been gone to edit contact and delete uh nothing to go anywhere it just delete the contact from this page itself okay that's fine now uh let's also finish off these pages like add contact and view contact so that we can quickly uh start with the actual data so let's click on new contact so add contact so it should be um looks like this add contact let me zoom in yeah add contact let's make this part go to add contact here i say because when you you know when you make the design completely then it will be easy for us to you know integrate the actual data so quickly that uh let's take one section then okay section with the class name what add hyphen contact uh one container one row one single column uh yeah so p dot h3 create contact uh in a what color uh texture success text success and you wish you can also add a bold one to eight bowl and also let's have some paragraph with a class called font style italic and some lorem 30 tab okay that's your heading let's check okay but now space around it so you can add some p p three okay and then uh i think it's not h three let's make some h fours like small one okay and uh you have a form with these two so can i have um another row yup another row call md um it's four column layout one form margin bottom two one input i say type text class form control let's play the placeholder will be what name okay like this i have one two three three three one seven so copy one two three four five six seven okay so you get like this all now this will be uh let me quickly check photo url mobile email company title so it's put a url is text only so let's say photo url and this will be email uh let's say mobile number this will be a number and this is email so it's a email and the company name okay and let's say the company name text only and say title is also text um what else company title and the group okay which group you want to add so group will be a select box let's add a select select with a class called a class called form control let's have an option let's say select a group find anything like this so lastly this will be a submit button submit button so here i have ptn bdn minus success and let's say the value will be uh add contact or just say create okay so i have another button for cancel so cancel is a link which when you click on it it will redirect back to here so what is this path this path is that page path is contact slash list2 so i'll redirect to this page so what i do is and add contact i also add beside to this i'll add a link i think link is not imported okay so let's import link so what i write here is link link um i guess let's like this yeah link is close text linked to this path okay and you wish you can add a button class name will be uh btn btn btn minus dark some darker close button yeah fine but there is no space between them you can just say ms to margin start to okay some space okay fine so one two three four five six seven yeah all the seven uh uh things has come that's fine next uh we are done with this if i click on close it's not close actually it gets cancelled right yep new cancel yeah fine uh it's okay uh what about the edit edit also almost same like this part but right side you have image so why can't i do that so can i copy this whole react fragment okay i'll go to edit contact i'll just replace over here okay and then when i click on edit it looks like view i need to have edit contact color so text primary and lastly everything is fine but the button so btn hyphen primary oh no not that one uh the create one btn minus primary okay it's not create is gonna be update okay that's fine and right so you have image also right right side is a sense this is how many columns four column right so i'll say call md6 let's have a dummy image as of now do we have it yes i just have a dummy image as of now i'll give a class called energy fluid yeah oh spin like this see that's the problem so can i say the class called what was that contact img it fits i think that's fine uh one last thing for the row is align item center it comes in center that's all okay so you have this page at contact page edit contact page fine uh last one page is static page we have to make view contact so view contact um yeah this one looks like this okay so can i go to view contact so in this i'll add a section okay section with a class called what is the class simple view contact okay in this one container one row one row a single column uh don't we have view contact or something yeah we'll add now okay so p dot h3 something called text view something new now uh text warning view contact and paragraph with a class called um font style italic just say alarm30 tab yeah view contact something like this you get and uh um p3 for padding okay so view contact this looks good actually uh but uh front weight bold okay and then we need to have a this one like image and this side is content okay so i'll take another row or another section let's say view contact intro this is view to contract intro section i'll add another section a separate partition class call um view contact this actually contact okay and margin top three something like that container one row call md um for column layout for image and call md some just six column layout for uh the data or else you can just say call md8 uh under that another row single column and you have a link don't we have a link so let's say import import the link from dom so this link to back to you know the page link to i want to shift back to where contactless copy paste it okay so let's say back button i'll say here the class name is equal to btn btn minus warning okay so there will be a back button okay we have a back button so before the back button uh we need to have an image and all so let's have img dummy image now uh let me grab this again the same image copy image address so let's have it and also give a class name class name contact image again i want to just maintain a same size okay so right side you need to have a data data will be like uh you know ul li actually we have done that right like this data should be like the same like the front page this this uh this ul okay can we have that um so i go to contact list somewhere we had uh yeah this one this ul tag i'll copy the ul tag i'll keep it in this directly so that it will be easy for us yeah now check once yeah i got it uh something more than that so i also have okay email company what's his company and title and uh what else his group which group he belongs to right one two three four five six something is missing um one knit something is missing company title guru one two three four five six six only uh here one two three four five six seven a photo url okay okay we have photo already here right uh that's fine yeah uh just say align item center okay looks now looks perfect yeah and these are now don't worry because it's a dummy data we will change that okay so now when you see uh if you want to you know even more clarification let's have one more card over here so that it will be uh looks perfectly so for example in i just copy this call md6 the card and i'll paste it okay just for dummy yeah okay fine so now we had a complete design so when you recap so we had a navbar we had this one search box and the add button you get the add page and the search box view contact has design edit contact has designed and delete is nothing has made as of now just leave it like that okay so our application basic structure ready so now we need to fetch data from the backend so before i fetch data from the backend let's make the backend setup i just use the json server so once that is finished and then we will connect to this application for fetching data okay so let's see json server all right so now we are done with the front-end part and now we need to understand the back-end part okay so generally if you develop any full stack application which have a front end as well as the back end okay so uh for our application you can choose node.js as a backend or a spring boot as a backend or something else also we can use okay uh i thought of making node.js or express js with uh mongodb as a backend but it it it increases uh the length of the video okay and some people most of the people be not sure about back-end node and all this okay so at least for this application i want to show something else as a back-end okay so we have an alternate for this back-end is we can have um we can have one json file okay and by using json server okay so json server uh is one node.js package and which act as a backend server and which allows us to maintain the complete backend api okay actually for full stack developer you should know react.js as well as backend technologies but here i just wanted to focus only on a react not on the backend technology so i will use another alternate call json server okay so let's make a json server setup so in the place of database generally we have a database like mysql or mongodb database to maintain your data but in this application i want to use json file itself okay you have a json file and there only will insert and update everything will happen by using json server uh a node package manager okay uh it's a node module okay so let's see this setup and also test the back end api and then we'll come back and see this okay so how you make this json server setup is first thing you need to have is you need to create one file that is db.json file okay because the entire application's data will be inside of this dv.json every insertion have an update happen whatever activity will happen in the application it updates in this file this will become like a your database file okay so you have to create this file db.json um and then make the server setup so i'll show you how to make the server setup go back to our application so i'll close all let's focus on the backend part now here i will create a folder called server okay so in the server i'll create one package.json okay i have to create a package.json uh why package.json the if you want to install any node.js package you must have a package.json same like you have you know react this also we have a package.json right so which contains all the modules which we are using in the application okay it's it's like application specific configuration file so same like that for my server also i need to have a you know configuration file called package.json how you create this package.json is npm init hyphen iphone yes is the command okay so let's create it now uh open i mean the server this folder i want to open in okay the server folder so let's say npm init hyphen iphone yes okay enter so it's been created a package.json for us you check you got a package.json okay along with that i want to install one package called json server same same like for react we have installed the bootstrap and axios router dom font font.some like that so this is required for server so how we install json server is simple npm install json hyphen server okay simple so let's copy that go to the terminal uh not that terminal go to our later terminal the place where we have created package.json server paste it enter and make sure you have a internet connection because it will download json file from online okay internet so so we need to wait for this but depend on internal speed uh you know this this works bit faster okay so i think it is installing come on okay it's been done okay so next clear screen yep so we have package.json and json all its library is also installed now we need to create one file so that looks like a database file so i create one new file name is tb.json this acts as your database okay so you have to follow json file with json rules and regulations you have to follow so it's like this i have to maintain two records two kind of records one is i have to maintain all the contacts information and also i have to maintain the group information for example like colleagues friends family like that group specification also there right that one you have to maintain so what i do is contacts will be an array so array of contacts i want to maintain so in that first object so id id something like a a some number something like number like this okay so what are all the fields we have first tell me yeah name photo url like that so i'll just have name so name is uh something rajan okay and photo url just say photo photo is uh photo something i can i get some this url yeah and then uh what else white mobile number email company yep mobile number some number some dummy number as of now mobile number email so email will be rajan gmail.com okay and then company title so title is uh software engineer and i need the company company will be hcl okay and lastly the group which group this guy belongs to so here i just specify only id okay so id is a sense so group id and group name is something different so this is contacts data so they just keep like this as of now okay assume this is your all contacts information here so once you have done this data so you need to have multiple records okay and also groups for example groups groups in array so you have to specify like this id group id one group id one and a group name something called colleague okay so colleague family friend like different ids you can mention okay so instead of typing all this data i already have db.json with me handy yeah this is my gb.js and data same users object first object second object third and fourth objects and all the groups information i have let me copy this quickly and i double i'll share this source code right um back to editor and i replace okay now check id name company email title mobile photo and group id so group id 3 so when you search for a group id 3 is family okay like this i have all the groups and it's not users actually use the contacts okay fine so you have database ready so now how to access this and how to make the api calls i'll tell you um close it yeah you want to access or start the server of back-end api you need to go to package.json you need to add a start script okay and you have to add some command okay so what is that is json server space hyphen iphone watch db dot json this is the command to make this db.json as a backend database and to watch for api calls and also one more thing is this json server runs on a port number 3000 but our react js also runs an already 3000 so there will be a conflict like node 2 applications can run on the same port number so what i do is i can add extra configuration hyphen p 9000 it means what happened uh json server starts on nine thousand this is already three thousand so no conflict so uh client application three thousand server application 9000 okay that's all json configuration setup now let's start the server so i go to the server folder so how you start is simply start script okay how you're starting react same way npm start so this executes start script this one so just say npm start see your application has started on this particular address so when i copy this address i back to the browser i'll paste it enter see localhost 9000 has come with a nice you know ui page json server congratulations and you have two resources contacts and groups because we have a two categorization right in the db.json okay i mean in the db.json we have two categorization contacts information and groups information so that's where they have given automatically when i click on contacts see all your list of contacts has been displayed the same thing will happen when you have a api call to the backend api okay server api using node.js backend or java or spring application so when you make the call you get data like this json data same thing happens with json server in a lightweight okay so slash contacts you get all the contacts okay you can even test this api okay before i test let me search for groups also you get groups data also okay okay so now how it is the back end data let me test this back and data using insomnia software some people use postman i i regularly use insomnia both are almost same for testing the backend api so our server is up and running so let me test that here insomnia come on okay so meanwhile apis so what are all the apis can be called okay so i'll tell you so get you want to get all you know contacts if you want to get all the contacts you have to specify the this path get request to this path you have to send a get request to this path you get all the contacts okay so get a single contact this is a regular rest api information so get request to this path slash id okay id of the contact okay i'll show you now so insomnia has open i create a new request collection that is contact manager yeah so let's create a first request get all contacts okay get requests you can select over here and create you got a get request so the path will be as i said this one so i copy the path language i change to html yeah like voltex okay i'll paste the path click on send see you get the data correct so i'm getting all the contacts information okay i need to make another request get a single contact okay so you want to get a single contact what you have to do is same path same path slash the id of a contact for example if you want to get only the broader so you copy this id and go to single paste the id so context slash id that's what i have mentioned here okay and then send it so you get the particular id data okay like that uh you can even update delete also happens i'll give you the updates built also so this is so create a contact if you want to create a contact this will be post request to all contacts so it will automatically create id also for us okay and if you want to update a contact this will be put request okay put request with id because particular contact i want to update and then for delete delete a contact so it will be delete requests to this part id id must be required for update delete and single record so contact is contacts i mean for create contact get contact so get post put and delete these are like called operations with api okay and same thing also happens for groups you want to create a new group and all this on instead of contacts you have a groups okay simple so we have tested our backend and it's working so now it's time to make back-end api call from the react application and get this real data and configure to our design so let's see that all right so now let's create a services for connecting the backend api okay now what i do is yeah in services i create a file called something called contact service okay so i'll say export class contact service i'll just take a contact class okay and in this we need to mention the server url and also the functions for fetching data from server okay so let's make a server url so we know the server url is up to here contact so static server url is equal to and this one okay so url this 9000 no slash okay and uh let's import axios because i will be using excuse for fetching data from server so axios and here i say static get all contacts okay it's a function so what it does is let's let's data url is equal to i want to provide this dot server url slash contacts okay this will be the all contacts data url okay server url up to 9000 slash contacts okay and this will be of what get request so i'll do um thing is um written axios dot get okay and then data url that's it symbol so i have a data url and it returns axios dot get so this is my service so i have to call this service from my component because i have to get all these contacts information from server to display over here so this will be a contact list component now go to components contacts and contact list component yup here so i have to call it so before i call let's have a default state let some array is equal to u state i'll be using u state hook for maintain the state of my component import from react okay so what type of data so first i'll say state and set state okay so i have uh three records loading uh loading false and uh loading uh sorry no comma loading false and contacts will be empty array and then error message is just empty so this loading flag i need for displaying the loading filter okay if something you know when fetching data from server if something you know delay happens i want to show the loading flag okay skip loading the the the spinner okay for that reason i have a loading and actual data and this is for to catch the error okay and then i'll use use effect hook for fetching backend data and command tray so let's import usefx here so here i have to fetch data from server so i just need to call up this particular function so you can use either promise base call or else asynchronic call so i'll use a sync await let's make this function as a sync i say try catch let's have error okay so in the try i'll say let response is equal to await wait for the server so what is that contact service start get all contacts okay so wait for the response from this function so this function has returns a promise by calling this backend api call okay you get the response so if you want to see what is that exact response has come from server uh console.log of response.data as of now okay we know the response because we already tested here all contacts we got all the contacts so this must be come with our react application call as well so i made a call i printed in the you know console log when the page is loaded the contact list so let's go here refresh and let's inspect go to console window yeah see you got an array of four records if i expand yes the brad gibson glena and all the names has come okay brad gibson glenna and all the four four records has come okay super so you got all the person's data from a backend api from react okay perfect but this data has received over here but this data i want to add to my stator so what would i do is set state such state here dot dot state existing state variables where loading i'll do one thing before i make a request set state set state dot dot state and then loading becomes true it means before you send a request to server loading starts as soon as you receive data loader stops okay so here loading becomes false so as soon as you receive data before you show up data you you should stop the spinner right for this false okay and then contacts will be response dot data that's your array okay i assign now if something goes wrong if some error occurs so i'll say set state where dot dot state let's make loading false again because if error occurs also stop the spinner and error message will be just say error dot message if something goes wrong you get this error message as well okay fine so i have a data here i have to showcase that so i can destructure it from the state okay so i need to have what loading required contacts required error message required okay so this contacts you have to loop through and display so can i have a pre tag once because just to showcase your data so json dot stringify of contacts so you can see that actual data on you know ui just pre tag this for time being so i can see the data see the actual data has come from server is this one id and all okay so this particular data i have to display i mean connect with these cards okay you have to loop through so um before i do that before i do the looping i need to have a spinner okay let's have a spinner for loading okay loader so how to make that is i need to have a spinner image also you can search online somewhere like spinner jf yeah these are a lot of spinners has come you can choose any of the spinners like nice you know um not that one yeah this type of spinners you can download i only have one spinner that is this loading spinner so let me copy that i'll keep it in uh we don't have any local image right but where do i keep my local image yeah i'll create a folder called assets any local assets you can create a folder color sets in that i have image folder in that i'll paste my image okay loading gf image is there yeah this is loading ejf image okay so to display this loading jf what should i do is uh in the components contacts nav bar i create another folder called spinner okay and i create a spinner component for displaying the spinner okay spinner so import react from react okay this regular component only but it this display only spinner okay so import uh let's spin a is equal to a function come on a spinner so it returns something that is uh react.fragment again let's say export default spinner okay so let's add some heading h2 spinner so i have to showcase this anywhere else somewhere i have to show this somewhere here can we display above the navbar just for timing okay because we are not finish it right so what i do is i go to app.js before nav bar i'll configure just for timing okay this is not actual configuration spinner to see how loading looks like okay spinner i have configured about an hour so i got a spinner but i need to have an image here so what to do let me import the local image uh spinner image from dollar slash dot slash assets image loading gear so that there's a local image so i'll say one division image tag src will be my spinner image okay nice so you get the loading spinner but it's not this much bigger we want so let's say [Music] let's say the class name will be display block and margin auto it comes at the center but not this much bigger let's say the width and height of it i'll just say style directly style width is arm 200 pixels okay yeah i think this much loading spinner is fine okay so now we are done with the loading spinner but i don't want to display loading spinner always on my screen when something you know getting data from server then only display so conditionally i'll display this this component not all the time so once it is finalized you can remove it we don't need always we only need when something receiving from the server okay so fine so spinner ready back to contactless we have here i have two cards but only one card to be repeated so i delete one so this is column d6 no not that one i think yeah here so you have one column d6 another column to six so i'll delete one extra card you have one card so this card to be repeated with this data so what i do is um i need to i need to check first okay let me check the loading so if loading is there then display the spinner if loading happens then display spinner otherwise react.fragment so here you need to suppose to display data so i'll just cut this entire section keep it in this area fragment okay if loading happens only spinner will display otherwise data will display okay fine see you refresh so you get the spinner and like that okay next column d6 each column d6 to be repeated i mean this card to be repeated right so this column d6 so here i'll make a repetition logic i mean loopy logic so users uh not uses the contacts contacts dot length is greater than zero and contacts dot map uh each contact i loop through so it returns something so what is that something is my column basic so i'll cut this entire column basics i'll add in the repetition okay you check contacts.length i just check the length should be more than 0 then you have to loop through and display each contact so how many records has come earlier you have four records so four records loop through so let's check so you get the four cards okay but all are with dummy data static data because we hardcore data will change now but before doing i need to have some space between this cards right um for the card i'll say margin top and bottom two okay that looks good yeah so it's fine but remember when you loop the first element should have a key that is contact.id because every contact is having a id okay see you get the spinner as well right yeah and then image so i need this one to be where is our db.json in server pb.json this is your data so see we have id id and photo so it will be what contact dot photo so if i say photo you get see all different photos okay so i think that's fine next next what you have name mobile number and all so name i'll say i guess contact dot name so you get the name has changed for everybody and mobile number contact dot mobile phone mobile yep so contact dot mobile so mobile number has changed for everybody okay and the email contact dot email yup so you got different images and different data that's fine perfect and i don't need to display this anymore so i can remove the pre-tag it's just for the testing purpose not required now okay perfect so now you have a data coming from server so this page is perfectly done with the real data and the next step is i want to view contact right when i click on this button i have to show the actual contact not this dummy contact so what should i do is see this is all the list of contacts now you want to see one contact what you do you have to make a request by passing an id okay so let's make this one now so all right what you do is um i have to get the id and then make it so let's make this link first okay so where is that button in the contact lens you have a button right yes here contact slash view slash contact id so i'll provide dynamic id something like this so contact dot id okay so when this id pass it will showcase in the url so now let's refresh see for this person brad when i click on view contact see view slash brad id has come okay so when i click on glenda that idea has come okay perfect now i have to read this id send to server get data display so send to server is you have to write a service so i go to contact service let's make another function for pitching single record static get contact simple so what this function does is it will take the contact id to pass on to server okay so let's data url is equal to i'll say my this dot server url slash contacts contact slash id that's my contact id okay so returns axios dot get request to data url okay you must provide a id and that received from the function okay because same thing right so get single contact you pass an id you get a particular contact the same thing happens for us now okay what happened yeah so we are done with this now back to uh which one is back to view contact yeah here i need to get this and to receive this id and send to server switching data so how do you receive this id from the parameter we have to use the react router dom that is use param so i'll say use params okay so here how you access the parameters let's something is equal to use params the parameter what is the parameter we pass contact.id okay and when you see the actual configuration it is contact id okay so this contact id only receive it view contact contact id okay so make sure what is that you add it you added id you receive id okay but i have given what contact capital i d capital d so the same thing i received through parameter here contact id you you want to see really what is contact id you say h2 expression contact id you see what is that received see the same one id so for example you search for uh some other person the same id has been received okay simple same id has been received okay so i have an id to send a server fetching the particular record okay so what you do i don't need to print it now so first i'll maintain my state let something use state okay in this again loading loading will be false uh but i have to import okay loading will be for just user not user is a single contact contact object will be empty objects and error message empty string okay so this will be my state and set state okay so how you receive data use effect hook i have to import it from react and here you have a function so it makes call for every contact id so i'll make contact id as a dependent okay so now what you do i use async await again so async so let's say try cache i have error so here what i do is let response from server is equal to average contact service dot get a single contact by providing what contact id this is my contact id i received from the url i pass on to this server okay so that i receive the response you want to see the response they say console.log of response dot data okay so let's check so here when i click on brad see i am looking for brad okay which must be broad data so when you go to console window you got an object it's broad data okay brad data has come okay so this broad data set to the state and display um yeah this one set to state before i set to state i'll just set state for loading flag uh i need to say here dot dot stator and then loading becomes true okay before i send a request to server loading spinner to be started and then set state here i say um dot state and loading loading becomes false stop the spinner and then the contact data will be respond the data the object i assigned to the stator okay and what about error message same like the previous search state where you have dot dot state and loading becomes false and then error message will be just say error dot message okay so now you have all the three records let's fetch them using this structure let's something is equal to state um what i do is uh loading here and contact and error message okay so loading contact error message that's all fine and let's make this data according to that condition so i'll say here loading if loading is there display the spinner otherwise just say react dot fragment yeah here i have to loop through it and display this entire data let's cut it and keep it here okay inside the condition yeah okay uh but in this i have to check the you know the actual contact object is empty or not so how we check an object is empty because this user object data is there or not you have to know right contact object data how you second object is empty or not is can i do like this okay for the whole section i'll cut it again i'll make another condition just say object dot keys of contact object dot length is greater than zero all the keys length okay if not empty and you display the section okay if this works then you display the section yeah here i have to display i have to display the picture and data picture will be what our contact object dot photo okay see i got um that person photo you want to see now see this person vladin latin photo has come and bradford and glenn yeah and name details so name symbol they say contact dot name this will be contact.mobile okay and email dynamic data contact.email and company yeah this will be contact.company and title this will be contact.title and the group group group group is contact dot group id as of now actual group should come but i just make group id as of now okay because in db.json we have a group id this id as of now okay uh yeah so group two has come glendale back so my name group 6 this person and this person perfect ok you also have nice spinner everywhere yeah so we finish with displaying all the records and also uh view record is fine but one thing pending here is i have to display the group name actually because group 3 should not come like a number it should come with the family okay three is family two is friend so that actual name should come so for that you have to um what you have to make a service call where you have to change something okay so let's make that part and then we'll also start with a create new contact all right so now let's display the group name so for this what i do is i go to contact service so let's make for groups so static get group let groups we want to get all the groups so let's data url is equal to backtick okay so here what you have to do is the same url but extra you say is groups okay and written axios dot get data url so what happens is when you make this url uh i show you if you want to get all the groups see here get all groups okay so let's say the server url slash [Music] groups so you get all the groups data as an array so that's what this one but if you want to get the particular group okay you have to provide a group id and there is a group id that is there in the contact group id so how you pass it i'll say static get group single group so but i have to pass on group id but how you get group id from the contact so i'll do one thing i'll take the contact object okay so let group id so group id is equal to contact object dot group id okay so from contact object you get the group id okay the group id which we wanted and pass group id to the url so let's data url will be groups slash the group id perfect so now later with the data okay so how does this works for a particular group ids see here same thing get all groups is there now so here i pass slash one you get colleague if i say slash two you get friend like that so this object you get from there you get a proper data instead of id you get this okay so get group has come but i have to call this function by passing on contact object i have to call this function from my view contact so what i do is first let me change here group name this is a group object empty objects okay i'll just have a group object also so how you get the group data so can i do one thing um response contact id is there right so okay so respond the data is contact object right yeah so let's group response is equal to avoid contact service dot get group id okay get group you have to provide contact object there is a contact object that is response.data the response the data is contact object right that's what you're assigning so that i'm passing for this function so that i get the group data also so that i want to assign to my group will be group response dot data because every time you say dot data okay so this will be what the group object in that that name you have to specify okay so group is an object now what you do along with this i also have a group to receive okay and here you are only checking the contact length and also let's check the group length because group should not be empty so keys of group dot length is greater than zero and okay now group also has check now where do i display group not group id this simply just say group dot name okay so i check yeah family back so when i say brad brad is a family member glenn is a friend and vladim is a service person and uh this guy is a social media guy okay fine so perfect we are able to display the actual group name instead of id that's fine uh so two things done uh list is done uh view is done okay next part create when i click on create you must be able to create a new contact over here so as of now 4 you have to create a new one okay so let's see how you create come on so how you create a new contact so click on new you have this one so you have to bind this form data and then make it so what i do is i will go to um add contact yeah here let's maintain all the state first so how you make the state first let's something is equal to use state in this i have to import state and set state yeah what are all things required here so first loading loading will be false and uh the contact objects to be empty okay this contact object and also you have one drop down okay so what is this drop down is we already have in database list of groups right for example in back end you have this one you have all the groups like colleague friend family from database right so these particular data have to showcase in my uh drop down okay i have to maintain this state as well so contact object and also let's say groups available groups is also an array so array of i mean array of groups right it's an array yeah groups uh error message okay but in contact object what all the fields you have name photo url and all and you must have to take exactly the same name as your dv dot json the same names you have to take id don't take id comes automatic by json server only these fields name company email title and all so let's quickly add i'll say name is empty um what else photo and then mobile email mobile email and company company and title and what else group id group id also should be there okay fine so this data and this particular state i have to showcase also just for time being jason dodge stringify of state dot contact empty as of now because nothing has been you know loaded okay so let's make the binding first okay how you make the binding for binding i'll make a function so let update input is equal to a function okay so here i'll take up event okay so i have to set state with the data so in this i have to make all the state data in that a contact object will be having something where you have to copy all the existing properties state dot contact objects and then each property so i'll say even dot target dot name and this will be even dot target dot its value okay because all the text fields you have value if you have something called checkbox or radio button you need to have checked like its value okay so function is ready state is ready so let's bind it so i start with the name name will be name will be name the exact name which you have to specify from this because i have specified target.name to make a a property dynamic name and value value will be what i don't want to say always state dot something can i destructure it let's something uh is equal to state so what are all the things i have to get from status loading is required and contact required and groups required and error is required okay day structure and then state uh not safe contact dot dot name okay on change so unchange just update input is a function that will take care about the binding of your state so let's check i refresh so when i'm typing name see this is my existing state okay i have to check yes name is getting updated in my state same like photo and all you have to make so uh that's fine but one more thing is i'll make required is true because you are not applying any form violation so i just need to have at least you know html5 default validation for this so required so if i create so you get this fill out the field okay okay fine so let's make the same step for all this is for photo url so this will be photo make sure you type the name properly photo and mobile number mobile and this is also mobile name and for email email and this is also email next company company and this is also company next uh title and this is also title uh what else for select box select box also this is i guess group id and then it is group id okay fine yeah um let's refresh so let's check name is working uh url is working mobile number is also working a number email is working a company title and group id as of now nothing is there this empty okay so everything is there but accept group id because i have to display all the groups and verify is it binding natural group id or not but how we get all the groups how you get all the groups is you have to write use effect okay so use effect let's import from react so it's been imported okay so in this i say okay so let's use a single weight again a sink try catch try catch of error okay so now i say um let response is equal to await contact service dot get all groups get groups all the groups to specify you get all the groups information if you want to confirm let's say console.log of response dot data on console so let's check when i refresh go to inspect console you got array of six we got all the groups okay so these groups i have to display in this select box what to do is i have to set it to state first so set state and also before you make a this thing can you make loading as well dot straight and loading becomes true okay and here dot dot state and loading becomes false after loading and the groups will be response the data okay so this group's information you need to display here so what i do is back to the groups uh yeah here options uh there is an empty option along with that more options so i'll make a expression here so groups dot length is greater than 0 then i have to make a map so groups dot map in this each group each group you will write an option tag okay right like this written something uh you have option tag okay so this you must have an id that is every group is have an id group or id okay and what value to display value to display is group dot name okay i mean the display message so i refresh see i get all the groups from database colleague friend and all but problem is see group id has been changed to service group id should be number right okay group id let's make a value free value is group dot id okay the moment you select the value but it will take internally id to match in the backend so make sure you write the value as a group id so i just check now again empty so when i select colleague is one service is four shell is six like that so perfect has been done and binding we already seen okay so once it is done you have to click on create to make the contact creation so when i click on form submit what to do so for this form what is the form dude yeah here is the phone so i don't need this to display anymore this random text not required look at the pretext um okay so now um perform i'll say on submit let's say submit form something like this function copy so i will create submit form here let some submit form is equal to a function so here you receive the event so even dot prevent uh prevent default okay so now i have to call a service to create a contact so how we call a service you don't have a service right okay let's create a service static create contact so you must provide the contact object to create okay so as per our url's configuration where was our urs configuration yeah create contact just make the url slash contacts that's it no id this contacts and it will be a post request okay so let data url is the same okay so let's say return axios dot post request okay post um contact data url and contact object so the contact object which you filled from the form and i'm sending to server so post is for creation and the particular data url and contact to pass okay so function ready so let's call up call from add contact okay so what you do is can you write again i think i wait i think try catch okay yeah so in the try uh that response is equal to await contact service dot create contact i had to provide a contact object from the state but this structure is here okay it's a state dot contact okay from state dot contact object i'm sending to server and they see the response so if i get if i get the successful response what to do if i don't get the successful response what to do yeah if i get the successful response i have to navigate to where i have to navigate to this page okay contact slash list page so how you make the navigation uh from react router six is there is um one hook called use navigate okay use navigate uh previously we were using use history now from react router dom six it's a use navigate so i'll say let navi gate is equal to use navigate okay yeah you have to use this navigate here so if response is there if successful response comes from server so um navigate uh dot nothing not navigate just say directly navigate navigate to where navigate to uh this one contactless comma something like something you need to add here extra poverty one second let me search for online uh i guess it will be um this one react router down you go with documentation one extra property is there come on i think it's not loading properly we have a router in the docks yep in this there is no api reference yeah api reference you search for use navigate use navigate yeah navigate to path and replace true okay so let's make the same as here yeah path and replace through oh if something goes wrong then i will navigate to where first you set the state with an error okay and then navigate to contact slash add same location okay contact slash add because don't go anywhere if something goes wrong stay there only and it will be false okay for error it is false okay so i hope it's done uh submit form so it will make a request to create if successful redirect back to the page on that uh this page with newly contact okay super so let me try that so we have this four now let's say new contact something called rajan photo url let me get it from online some nice photo for rajan is something this guy okay uh yeah something like this this guy okay so right click copy image address and paste it i should display the image also i update it is there but create is not there we can make no problem yeah number nine zero nine zero something and um email rajan at gmail.com and company hcl technologies as usual title software engineer group is colleague okay it's a technology software in the query and click on create what happens it will makes create request and redirect to i repeat create request redirect to list page so click on create yes perfect super see it's done and how many times you send the request you have data okay even if you refresh you have data because it's coming from dv.json and if you want to confirm again actually this data coming from db.json you can check your database for as it is db.json you check a new record has been added called rajan and with some id automatic generated okay because while creating we don't have id okay it creates automatic and we also have from violations okay fine so create is done so we got a new record so next step is update and delete okay and lastly search so let's make update now all right so now let's make uh update functionality so what i do is so the moment i click on this uh update so generally for create and update uh there's a slight difference because when you click on create you have an empty fields okay but when i click on update uh it will be with uh the existing record so that on top of it you'll update okay so first you have to get the existing record and display in a form data and then you update on top of it okay so what i do is first of all um back to contactless yeah here in this button the moment i click on edit it must go with the contact id natural contact id so i'll make contact.id so edit slash contact id so what happens is see for brad when i click on it so edit slash brad id so i have to get the brad details and display over here so what i do is i go to again uh which one i'll go to edit contact up here same like create content you also have a state here let's import it and then i have um let's say state and set state and here i have um loading is loading false and contact objects will be an empty object okay and groups yes i have to mention the groups an array of groups and error message message is string okay so before i proceed with all this first i have to receive this particular id okay so how you receive the id same like previous uh use patterns okay so let's something is equal to is equal to use params okay so what is the name has configured for it is uh same contact id so you will be receiving the contact id from there okay so using this contact id i should get the particular contact and display okay so now i will use use effect hook okay use effect hook and for dependence on contact id yeah so let's import it from react okay so now here i use again you know i think of which i think uh try catch let's say error okay so um what i say is let response is equal to await contact service dot get a particular contact by providing the contact id okay so you get the contact in the response so you can even print it or you can just add directly the the contact objects so before i make this so set state of what set state of dot dot dot state and uh what else loading becomes false first of all and then set state where is that state where dot or state and loading becomes sorry it's true here and here is false loading is false and yep clothing is false and then let's add a contact object will be my response dot data respond dot data and if something goes wrong set state with i have dot or state and loading becomes false okay stop the spinner and error message will be error dot message okay and let me uh fetch this individual data and also let's have contact with um form data right name photo and all so let's have a name is empty name photo and uh what else mobile data is empty and email is empty company title group id company and the group group id okay fine so now you set the contact so let me fetch them from the state using the structure so loading is required contact object is required and groups required and error message is required okay so if you want to see this actual contact object so you can make a pre-tag so time being i'll write json dot syncify of contact object so you see whose contact has come brad so for example if i want to update for glenn sorry not view uh update yeah glenn has come okay so this this particular data it should be uh it should be filled in in this form details right pretty fine so what i do is here i'll add a value um contact dot name so name gets filled in here glenn so whenever with brad you have brad okay i have to fill in all the details and also when i make some update say it's not updating your state okay so to make an update so i want to have a form updation so let update input is equal to a function okay so in this you have to set state or you get the event here okay set state where uh dot dot state and contact object will be an object where dot dot state dot contact and then you say event or target dot name will be even target dot value okay so this is a function for updating the filled in data in the form with your state okay so now what i do is here i'll make the name field to be name field to be name only same as the property which you declared in the state and on change will be update input okay and let's also make the required to be true okay required to be true fine so let's check i refresh yeah brad gibson and when i'm trying to change it yes it's getting updated the state is getting updated and you change the brand to something else okay perfect so same approach you apply for all so let's copy the four fields now go to photo url so this will be of photo and this will be a photo and then this is mobile and here is mobile and this is email and here also email next this is company and here also company and uh title so here is title and this is also title and lastly group form also i'll add like this this is group id and this is group id okay and what about all options you can look through groups dot length is greater than zero and so groups dot map so in this each group is comes with written statement in this each option each option with some key it's a group dot id and value goes to be group dot id and actual value to display is group dot name come on name name okay so what happens here refresh yeah brad has come youtuber and the groups okay it's not showing all the groups problem is um oh you you didn't have groups actually see when you fetch data you only have a contacts data where is a group's data so groups data for service we have a function called get groups you just get all the groups okay so edit contact so i'll say here let group response as equal to average contact service dot get all the groups get groups or griddle groups uh so you get all the groups and you set it comma groups will be response group response the data so that you get all the groups okay so now you check refresh yes you get the family okay default so when i search for um glenn is a friend right so when i click on update glenn as a friend automatic okay that's fine so we have it and it's getting updated like company and everything and mobile number is getting updated and what about the photo can i try some change something for a photo yeah let's change to something else copy image address i will replace this guy with this it's not getting changed uh it's getting changed but this is hardcore data i show you somewhere at the bottom yeah this image is hardcore data so i'll change this to what state no say directly contact contact object dot photo okay it updates yeah existing is this photo i'll show from scratch yeah glenn is this photo you want to update just copy the address and you want to change it this one this is updated in the local state okay uh so local state is getting updated and one last thing i want to check is group id so if i change to the colleague group id one friend group id2 social group id6 yeah perfect so now we are able to change the local state now this state to be sent to the server for updation when you click on update button okay and also this is no more required the pre-tag you can delete the pre-tag um okay so now click on update it's a function call i mean uh form submission so on submit is equal to form this is something called submit form okay so copy that so go to here so let's submit form is equal to a function so in this you will get the event so what i do is even dot prevent uh default okay even a prevent default and then i have to submit the form data so how will you submit you have to call service but service there is nothing a function call update okay let's make it static update contact is a contact data url is this one yeah i show right uh for contact update you have to provide id as well as the contact object so id i'm providing here so you need to provide the contact object and the contact id yeah a contact object in the sense the form data which you are trying to update and contact id for which person you are updating this data id is also here so idea providing the url and form data i provide with function call written excuse dot put request it's a put updation is put okay because we made it right put so put uh data url first and then the contact object the one which you want to update okay that's all it will take care of in the back end json server so i have to call this function so i think it's everything is correct um okay fine let's call back to edit contact yeah here i can make it as a sync same like uh create contact what you have done for create contact i mean add contact yeah this was done copy back to edit contact also paste it okay yeah what is that you have to do is it's not create contact it is update contact okay contact object is there but i also need contact id so i think contact id is directly you can provide because the id which she already brought from the url is contact id so i send two parameters uh for for update two parameters okay a contact contact id fine now uh we don't have navigate if response is successful i have to navigate back to the home page but it was not there so let's have uh use navigate and let's say let navigate is equal to use navigate okay i got a navigation so i can say uh if response is there and i navigate back to the list you can just say list or empty slash also because if i write empty slash it will navigate to list only okay that's why you say either navigate to list or empty slash both works okay don't worry let's just keep it as it is uh to list otherwise back to what i had not add it is edit okay if some problem happens edit with contact id like so let's make some backtick i think it's it's back yeah so edit slash id because the proper part of this will be what edit slash the id so i just make it to slash id so the same page will be there if something goes wrong okay so i hope that's fine uh let's check now okay and also we are not using a loading anywhere not using this loading is it okay if you want to have a loading you can write directly here only if loading then display the spinner okay otherwise sorry react.fragments in this you make a section and all but in this also if you have a contact object you display otherwise uh there'll be a problem actually no problem because contact only there in the state right yeah let's let's make this entire section to cut off keyboard in this this was display a spinner okay looks good here also you get a spinner right okay so fine now let's uh examine this so glenn i'll change the number not eight seven eight seven something i'll change the number two um eight eight eight nine nine zero zero nine nine nine one something like that and image also i'll change copy image address i will change this image update yes image change mobile number change okay so it is done and you want to change again back to back to back to something like this okay copy image address i will change it to something like this update yes it's been updated okay so fine so we done three things now list is done creation is done view is done and also edit is done okay so last thing deleted so when i click on delete i should delete this record from the whole data okay so delete you have to call a function on this url okay let's start with the delete now so for delete what you do is let's go to contact service let's make another one static delete contact you must provide a contact id that's contact id so this is the url contact slash contact id because the the same url contact id and delete is a function so you have to call written axios dot delete and you provide data url that's all okay contact id and delete okay so i have to call this function when i click on the button and where is the button is on the homepage that is contactless page so go to contactless page so at the bottom you have a button for trash on click so on click you have to provide a id because the particular id of the contact you have delete right so i say on click on click is equal to a function because i have to pass on parameter so delete no not just like that let's say click delete click delete and i provide contact dot id okay so i'm passing on id for this function so let's create and take up that id here i do so let click delete is equal to a function so that i'm passing the contact id so let's take in the contact id okay so let's say i have to call date let's make async i say try catch okay so here what you do is let error the relate response is equal to average avoid what avoid contact service the delete contact of my contact id that's all so you get a successful response uh for deletion okay if it is successfully what you do if it is deleted successfully you have to refresh your data because once it is deleted it may delete from the back end but uh i have to showcase on my ui also like it's been removed right so you have to fetch data again so that only new records will come like update data will come so what you do is if response is there then better you call the all data again for example like this for example like this okay so you have to get all the records and keep it in the stator so that see this line what it does it will remove from the back end okay remove it but what it does this will fetch the remaining data like the data which is there right and set to contacts and the same contacts i'm looping it so that's happy okay that's all fine and uh if something goes wrong something goes wrong you have a error message to keep on here okay that's fine i guess yep so let's try for deletion okay so where you want what do you want delete so i delete my this name okay click on delete has gone see you got only rajan for records you can double confirm go to db.json there is no mean rajon vladim like that okay fine four records okay so we made completely uh list is there new ad everything is done but one thing which is left out is search okay when i make a search i can't able to search the records okay so now let's start with the search all right so now let's start with the search okay so to make a search i'll be back to contact list again yeah i'll can i create a separate search query or i can add in the state itself you may add the state or you can change let's let's take something separate uh use state okay so in this yeah let's let's make some query and set query so query text will be empty so this text is nothing but the query what you type okay yeah and let's bind it first where is my input field yeah here so celeste name is text value value is query dot text on change you have to make a function so let's say search search contacts okay search contacts is a function so let me call that somewhere here so let's search contacts is equal to a function okay so you get the event so first of all you set it set state where uh sorry not set state it's a set query right set query where dot dot query and text will be some even dot target dot value there's only one one one field okay fine and after that you have to you know query with this letter first let me check is it really bind or not expression query dot text is it really bind yeah it's been bind whatever you type is getting updated in the state also okay now what to do now what to do is when i type a character you filter all this data based on this name so i can filter but where i where do i keep the filter data right see in my state i have all the contacts right i can take up the contacts i can filter but where is the filter data to store can i do one thing in the state only along with the contacts i have another one filtered contacts okay context to store all the contacts okay while fetching data from server filtered especially for search okay but small change when i get data you need to add it for filtered will be respond the data again okay because when fetching filtered will be all okay fine next where do i have filter again yeah on deletion also you need to have filtered contacts okay because you need to have it for search and looping so while looping i was making with all the contacts not with all the contacts we also have filtered contacts can't we get it uh yeah here let's say filtered contacts so you look through filter contacts extra copy okay filtered contacts and from here flow is same okay fine so just check nothing happens everything is perfectly running okay yeah that's fine so looping through filtered contacts now yeah so now the next step when search happens you loop it and set it to filter contacts because that will get updated so what you do is let's the contacts is equal to state dot contacts dot filter filter in that you get the each contact each contact so return so contact dot name dot to lower case because um some people names are like lowercase and uppercase so all lowercase dot includes includes event dot target dot value dot two lowercase again okay so if you type capital letter up our uh you you type the capital letter or lowercase letter it should filter properly okay that's where i convert everything to lowercase or you can convert both uppercase okay now i got the filter data okay for example you check console.log the contacts okay you can check it now so i refresh let me open in switch console yeah no data when i search for b r you got brad we start with only brad okay i delete a a is four letters oh a d two people brad and black or super find this filtering okay but i have to showcase on ui so set them back to filter data how set set set set state set state in this i have dot or state and then filtered contacts will be the contacts so that filter contacts will be we were looping here right so this updated to filter contacts i think that works let's check back here and refresh see i say a everyone ad yeah these two okay ade one guy b r r a r a so here also brad is having r a r e a j is rajan okay perfect uh i think that's all done okay so we made a contact list search new view edit delete everything is perfectly done okay that's all guys thank you so much and i first of all congratulations for watching this video entirely and practicing along with me okay so thank you so much and wish you all the very best for your career in react js and the coming examples we'll see some more projects on react.js okay so make you familiar uh with the reactions development but to don't miss out these type of videos please do subscribe to my channel right now thank you so much let's meet in the next video thank

Channel: UiBrains Technologies

Views: 42,361

Keywords: ui development, ui technologies, uibrains, naveen saggam, ui training, web development, angular, react js, online training

Id: ZfqnUm7w6ig

Length: 156min 34sec (9394 seconds)

Published: Sat Jan 29 2022