Build React JS CRUD Connecting to Node.js API for Beginners from Scratch

hello everyone in this video I'm going to teach you how to develop the front end by using react in the last two video we've learned how to develop back in API by using node.js Express and mongodb so you can watch the video if you want to know how to develop the back end and in this video we will focus mainly on developing front end by using react.js okay let's get started this is the application that we will develop it is react for crud operation so you can create a product and you can edit the product information and update it and you can delete a product here you can delete so a product this is the front-end application that we will learn how to develop to connect with the back end that we've just created in the last two video alright let's go to desktop to create a folder for the project when you are on desktop let's create a folder over here I rename it react or react Dash front end one thing that I want to mention before we get started I want to make sure that you guys run the backend application over here my backend application is running on Port 3000 and if you want this code you can check on my GitHub okay and is GitHub dipped mean it should be node version 2. and you have to make sure that you set this variable environment variable when you clone this project okay and just make sure that you are back in is running for example if I access the API through insomnia for example I want to fetch all the product I click I go to localhost Port 3000 slash API and slash product and then I click on send to get all the products see I can access the backend application there we go we get the back end the next step we will focus only on front end here is the front-end folder that we just created uh press shift on keyboard right click over here and then click on open Powershell window here okay next step I want you to go to VJs dot Dev okay and then click on get started and here copy this command this is how you install vid on your project paste is over here hit enter and then if it asks you the latest version you just type Y and hit enter then it's going to ask the Project's name I'm going to name is react crud okay hit enter and then it's going to ask you to select a framework over here I will choose react hit enter I only need JavaScript choose JavaScript and hit enter and then get into the folder CD react crud here this command it will tell you to type this command and then hit enter all right and then type npm install to install the JS packages in this folder okay you can open this folder with Visual Studio code uh here in this folder you will get this for the react card so you have Visual Studio code over here you just drag and drop the folder into the visual studio icon over here as we open the folder for you okay go back here check so packages has been added into our project we can close this one and open new terminal over here in the visual studio code of our project and then you can run npm run Dev to start react application and when you press Ctrl and click over here it will automatically open feed with react application for you alright we've successfully installed react with veed application and let's go back to the code over here so the next step we are going to install UI framework we are going to use Tailwind as a UI framework or css framework over here here I use Tailwind for quick design and easy design okay let's go to install Tailwind in our application so let's go to the website Tailwind css.com and then click on get started this is how you install Tailwind in vid application okay using post CSS and then sorry and then click on framework guys and then go to veed you can skip the first step and for the Second Step you just copy this command and go back to the projects and paste the command over here let's open the new terminal here and paste it over here hit enter all right the next step let's go back to the browser and then copy this command and paste it over here hit enter and then you just go back to the web browser and then process the third step which copy the content over here and put it in Tailwind config.js in your project okay we got Tailwind config.js over here and then the content over here be replaced with new code okay we get no code over here put comma over here save it all right let's do the fourth step here in index CSS you just copy this code and paste it into index.cs okay let's go back here and then in go to Source over here we get index CSS over here we remove all the code from here and then paste the Tailwind code here okay what is the next step run npm run Dev in our this terminal it's running npm run Dev The Next Step just test this uh Tailwind class name okay I I'm going to clean this a little bit so actually we don't need app.cs that come with react we can delete it okay and in main just leave it like this is include index.cds but in app over here we can clear this out we can clear this out and clear this out and app series okay clear everything out sorry guys and then just create a new Hello component con app equal to okay return and let's export this out export default and then app okay and over here let's put this code here copy it and paste it over here let's go back to our application this doesn't work I think we have to restart the application okay over here press Ctrl C to stop the terminal and then type npm run div to run it again let's open this one you see the Tailwind is working right now see we got underlying over here for example if we want to change the background color we can put BG red 300 to chain is to red color okay all right we've successfully add Tailwind CSS in our application the next step we are going to learn how to implement react router in our application why do we need react router okay let's take a look at the application over here you see that application has many page for example if I click on create a product you will see that it's redirect me to another page which is create over here and if I go back if I go to edit it redirect me to edit page because our application has many pages so we have to implement react router in our application okay okay let's open another Tab and search for react router Dom okay you click over here this is how you install react route the Dom into your application click on it to copy this command and then go back to visual studio code we can stop this one and paste the command over here hit enter okay and then npm run Dev again okay let's go back to web browser okay if you go back here and then if you go to react router uh this document show you how to use react router 6.4 so I will teach you how to implement it real quick let's go to browse router first of all you have to put a browse router in a root render okay uh you copy this one okay to import it go here and then go to main you will see this is render here right and you paste the import over here okay the next step is to tell you to use brow router to cover the rest of the application okay here is the application we have to use browser router to cover the rest of application so we put uh browse router over here and then we put app inside okay yeah how you can use it okay The Next Step you have to set the layout for the application or you have to use route routes and Route okay I will show you how to use it let's go to app.js I'm going to remove this code and let me create another div over here we put routes and then inside here we put route yeah how you set route you have to import routes and Route okay import routes and route okay form react router Dom okay there's no error anymore the first route that we need is index page so we will include element so we have to create element or we have to create page for each route over here in Source let me create new folder and name is pages and inside here I will create a component for each page or I will create each page over here for example I create home page over here Dot jsx okay and then I create allo function home page Arrow function over here and return view out okay this is home page all right and then I have to export it out export default home page okay we get home page right now how about we create other Pages for example create page okay create a product page let's create page and this one I changed to create page and this one create page and this one create page let's includes homepage over here because home page is index page okay we put component over here home page okay don't forget to include it over here for me it's automatically included for me because I have installed react snippet okay and then other route path for create page this one create an element and we can close the route for the element for this one we just include a create page okay and don't forget to include create page over here okay if you go back to your application and then you have to refresh it see you will see this is home page over here if you go to create you will see create page over here so if you create a new page in the future you just add is to this folder for example if I want to add like edit page jsx here okay and over here I just copy this one and paste it down here and put here edit okay and this one I just put edit page and over here I have to chain okay just copy the code from here and paste this over here and change this one from create to edit copy this and put this over here and over here add the page okay and here don't forget to import it over here okay and if you go back to the application and if you put edit you will see edit page okay The Next Step lets me set up a nav bar for example I create Napa over here okay nav bar okay class name background color is bridgy gray 800 this is Tailwind class okay and then I create another div over here and then put class name and I need container and then one is to be at the center so I put in X Auto and padding I need two and I need icon over here a link attack over here and I put H2 over here put class name okay and then I put tag should be white and then tax should be large to XL and font should be bow okay over here I can name it react crud okay you will see the logo react right over here see this is not bar we just create nav bar in react we don't use ref like this instead of using graph like this to redirect to home page we use Link so we change this one to link and this one should be linked and we should import link form react router Dom instead of using href we use two Let me refresh currently we are on edit page if we click on this a react crud it will redirect us to the index page okay here this is home page all right we successfully Implement react router and navbar alright the next step we are going to show all products on home page for example this is home page I want to show product over here all right I have to fix a product from API or form back in over here this is the backend link for example if it's in a request it will send all the product to me so if I go back to my application over here I will write a code to send a request to back in so it can get me all information about products all right first of all we are going to declare a variable over here we call it Con and then products so we are going to store products over here and we put set product over here equal to use state this is State variable okay okay and we need uh one more variable to check if our application is loading so I'm going to name this variable is loading all right corn is loading okay said this is a method to set is loading okay it's loading equal to use State because this is the state variable okay default value this should be false uh this default value is array because product is stored in Array here you see is in Array okay okay the next step we are going to declare a method to load all products from the back end okay over here let me declare corn get products this is Arrow function okay and inside the function I'm going to declare try catch to detect error okay catch Heller okay and over here when this function is called that's mean our application is loading okay we are going to set is loading to true set is loading true if there is an error list console log is out Heller okay this is just a temporary bug detection okay and the next step if there is no error just load data from a specific URL for example let's put con respawn equal to xcos dot get so we get data from this URL okay this is how we fetch data from the back end we copy this URL and then put code over here paste is over here okay you get products from here okay because we use xcos over here we have to put a weight because V1 is to wait until the data is load before Skip To The Next Step so when we put a weight over here we have to make sure that as we put asyncs over here okay and we have to import a weight or axios over here because we use x equals here so import axios form axios let me check if I have installed axios we have an install axios so let's install xcos together axios npm okay go to this page and you can copy this command this is how you install xeos and go back to visual studio code stop it and paste it over here yeah we have installed axios and in npm run Dev again uh let's go back to home page so when we get this spawn back from uh server here uh we can console log respawn dot data okay and then we can set set products here okay to respond that data so this one that data is the data that we get from the back end which is this data okay okay The Next Step that we are going to do we are going to call use effect why we need use effect uh use effects is called when the application is first load so when the application is first loaded it will call call used effects over here this is how you use effect you put Arrow function inside and over here you put array so when the application first load we want to call this method so we copy this method and put this over here okay this is how we call this method so when our application first loads is we call this method and then it will send this request to the backend and it will get respawn back and we can see in the console log okay let's check it out over here okay let's check this out let's right click inspect and let's go to console uh there is axios error this is core size origin problem okay if you checked for my backend code I will you will see that I allow this IP to access to the backend but uh when I run npm brand Dev again so my IP change so I have to change this one to four so if you guys doesn't have this origin problem you don't have to change the code of the back into four okay you just leave it like that and when you change the code over here you have to relearn this one again npm run div this is the back end okay it's not fun in okay let's go back to our front end code is the same and let's refresh this one again you will see I get console log this is the data from the back end that means I can successfully load data from back in okay the next step we are going to show this data on home page over here okay we won't show it in console log uh we will print the data from this product variable okay let me go down a little bit over here I will show data over here okay let me create a div over here okay and then let's put class name and put mt5 margin top five and over here let's check is loading so for example if the application is loading I want to show the text is loading okay is loading we call this variable over here it's loading if the application is loading what we want is to do we want to show a text loading okay when is successfully load i1 is to show all product okay over here we want to show our product over here let's put a fragment over here and then we want to show we we have to check first if there is a product okay product dot length greater than zero so if it's greater than zero we want to print all products out okay but if is less than zero we want to show a div and a message that's there is no product okay let me show diff over here I don't know why I get diff like this over here we want to show there is no product okay okay and over here I'm going to put fragment over here and then I'm going to use a loop like map to print all products out okay product dot map okay products and index and then Arrow function to print all product out okay and then over here I put return and then put bracket and then and then I put div over here and then put Curry brace over here to print product name okay and then over here I can put key index okay and over here I can put like class name over here for uh class name equal to BG red 50. so let's go back to web browser and let's refresh here uh why is keep loading because when we get data over here right I forget to set is loading to false so set is loading to false save this one and then go back to web browser refresh so you will see three products over here so if we keep coding over here if we make our code on home page too long uh it's not really good if the code is too long because it's really hard to inspect or debug so we are going to separate product to be a component so let me create a component folder over here to store all components in our application component okay and then let's create a first component over here which is product Dot jsx create con product equal to Arrow function and then return rdf over here product and then export it out export D4 export this product out okay now we can use this uh product component over here so let's uh let's remove this code and call product instead product okay and we have to import our product from here import product form component and then product okay save it and over here I will put key index okay key index to remove error okay indexed and if you go back to web browser you will see three products over here it shows this product okay over here we can pass the product here inside the component so the component can get product information okay right here we put product so we are going to pass this product inside here so when we are in product component we can access by calling product here okay let's go to product component here so we can access to the product there's platform home component over here so we put curly brace over here and then we put product okay and then over here we can show product name product.name so I don't know why we get La over here so we go here and we are going to disable react prompt type for entire 5. okay we save it and we go back to home page and we save it and if we go back here you will see product name over here okay let's improve the UI over here so it's not look that good right now let's go to product component over here I I let me remove this one first and then let me put class name and in background color I want it to be white and I want it to be routed and Shadow I will choose LG which is big and overflow I will choose hidden so I want the image to be on top so I put Image First source and then we can call product image I will remove code over here and then class name this is only CSS class so I put full width and then height 28 and object cover okay next I create an additive and I put class name padding x axis equal to 4 and in padding top is two padding bottom I need four and then I put H2 over here so this should be product name and let's put a class name over here text so font should be semi bow and let's create diff over here and then post class name I want text to be small so I put text as m and this one is quantity so then we put product qty let me check in so many efforts it's quantity over here we can copy it okay and next is price so let's create div over here and then put class name and text should be SM as well and this one is price and dollar PSI in front of the price product and then price okay let's check out see this look good so I want it to be grid view so let's go back to the pairing component over here in home here in this uh in this diff I want to set this to be grid View okay let's put a grid okay great to column and if it's a big screen I put grid four column and a gap I want this to be for Save and let's go back here refresh and let me check this out why it doesn't work oh it's typo problem over here should be great save let me close this one do we see this look good so let's create a button for edit and delete go to product component and over here let's create div so I put class name to be mt2 and I want the button to sit side by side so I use flex and then Gap is four so we are going to have two button so we are going to use Link going to call link so it's going to import link for us so the first one is will link to edit page so we put two equal to back thick and then we put edit so we put like this first we are going to edit it later and then we put edit over here so we can style first class name and in lie block and then width is full and text should be at the center and Shadow I need MD and text should be small and background should be Gray 700. and text should be white and I want it to be routed small and padding x axis is for padding for y-axis top and bottom is one font should be bow and when we hover over the button I want is to change the background color to be a lighter gray which is BG gray 600 and then have a cursor should be pointer cursor pointer okay save it let's check the button see you see edit button over here I want the button to be inside this div okay let me move this one inside here let me clean this one okay save it let's take a look again okay this look good uh let's copy this one this link and chain is to be delete button okay this one delete and over here I think I'm going to change the color of the button to be red so over here BG gray we put red and this one BG gray we put red 700 save okay this look good I want this product to be at the center so I have to set container inside app.js I will put a div over here okay and cut this one put this inside here okay over here I put class name [Music] to be container and I want this to be at the center so I put MX Auto and padding top should be two and height should be full okay let's go back here okay this look good let me change the background color of the web page okay let's go to index.ca that's over here okay I will change is over here so let me put add layer base this is Tailwind class and then I specify body over here and I will apply cess class from Tailwind over here apply so background slate 400. save okay okay the background change all right let's create a button to create a product okay go to home page over here and over here I will create a div over here and then I will put a link okay to uh we will link to create page create okay this button is create a product okay you save and if you go back here you will see a link over here when you click on it it will go to create page okay let's go back first and we will put Tailwind class over here class name in line block and then matching top four and Shadow MD and background color I want to be blue 700. and tag should be white and Route it small and padding X for padding top and button is two and then font bow and hover when we point them out on it I want the background color to be lighter blue 600 and then hover cursor it's pointer okay save it okay if you go back to the web page you will see this button over here okay if you click on it it will redirect to create page okay let's design create page together first of all we are going to create page and this is create page right let me remove this text okay then I put class name uh I'm going to put Max with to LG and background is to be white and Shadow I need LG I want it to be at the center so I put MX Auto and padding I will need seven and I need it to be routed for corner and padding top I need six and then let me put H2 for header over here so over here I will put create a product so and class name I will style this a little bit font I want is to be semiable and tax I want is to be big so I put text to XL and then margin bottom I need four and block and then text to be at the center okay let's take a look see we get something like this and let's create a form over here inside form I'm going to create a div over here okay and then I push class name I put space y two okay and I'm going to create a div for our input and label let's create label first over here I put name and here I'm going to put input type equal to text and value equal to MD first okay and then class name over here I need this to be full with and it is to be blocked and I need a border and padding is three text should be Gray second rate so let's take a look I am to close this one okay let's take a look see we get something like this I'm going to put more styles for example routed okay and focus I need is to be outlined none and then Focus shadow outline and then Focus border blue 200 and placeholder color should be gray 400 okay then we can put placeholder over here put name I can put enter name okay so let's take a look when you focus now over here you will see the blue border over here okay the oh blue outline okay we just copy this one and put this over here and then change this label to be quantity and then over here enter quantity and type over here is can be number okay copy this one put over here and this one is price and over here enter price and then we need image URL copy this one put this over here image URL okay and over here I can put enter image URL okay then over here I can put div and over here I can put save button okay save and I'm going to style it and then let's put some class over here see it as class block full width and then margin top to be sick and background color of the button is 700. blue and text should be white and routed small and padding X is for padding Y is two font should be bow and then put hover background color blues 600 and however cursor pointer so we save it and we take a look okay uh this should be uh text okay let's change this one from number to B text image URL okay this look beautiful uh if you click on the text block and try to enter something inside the text bar you will see it's just in work so what you have to do you have to set the value for this one so before you set value you have to declare a state for each text box okay okay let's declare state for each text box for example name okay we are going to declare corn name and set name okay equal to use state uh equal to empty string okay and you have to import new state over here as well so you can copy the name over here and put it in value over here put Curry brace first and then put name over here but if you go back here you will not able to type anything on it yet you have to detect on change in each text box for example I put on chain over here uh when a user or when somebody type on keyboard we detect it and then when we detect the event we have even over here and then we set set name okay this is name to whatever user type on keyboard set name equal to Target value okay and if you go back here you refresh and you type see you can type anything on this text bar okay we have to declare variable for quantity price image URL okay let's copy this one to save time and paste it over here we need three moles right and we need name we need quantity and this one should be set quantity equal to empty string and this one is price okay and then set price and this one should be image and this and this one said image okay just copy this one and remove this one paste it over here and change this one to be quantity and this one is to be set quantity and over here and then this one value is price and this one on change set price okay and this one is image URL so this value is image and this one is set image save it okay so far so good so the next step when we click on this button I want is to send whatever in this text box into the back end so we can save the product information in their server or in the database okay okay when somebody click on this button we have to detect Dash action over here if somebody click on this one or if somebody submit this form we are going to call a function over here I'm going to declare a function over here con save product okay it's going to be an arrow function okay and then we put save product over here okay for example if I put alert over here hello and over here I don't want it to refresh the page so I put e dot prevent default I have to pass e in this one so I put e over here save it and if you refresh this page and if you click on Save UVC hello over here for example if you want is to show name of the product you can put name over here save and if you refresh and for example you put name Brava bra and you put save you will say hello blah blah blah blah all right okay next I'm going to put if a name is equal to empty string or quantity is empty to is equal to sorry empty string or price is equal to MD string or image is equal to empty string this is a simple variation okay so I'm going to show alert please fill out or input completely and then I return back okay we won't continue example if I refresh this one and I click save see it will show this message and if I miss this one missed two of this one it will show the same thing to remind me to enter all information to create a product okay and down here let's put try catch so if there is an error just console log Eller oh I forgot putting alley over here Aller okay we detect this error and we can sort it out okay in try catch over here uh when people click on this button right we should disable this button okay so I have to put is loading over here con is loading so set is loading so use State valuable it should be false okay and then we said it's loading over here set is loading so when somebody click on this button just put set is loading to true okay and over here we can use it's loading to hide or show the button for example I put like is loading okay for example if it's loading if it's not it's loading okay then we want to show the button okay we copy this button and put this inside here okay this means if it's loading is equal to true then show this button okay this is opposite to is loading right okay let's save for example even the fashion here if I save here if I fill out everything and I click on save you see it will hide the button so we have to continue this one and at the end we will set its loading to fall or we can redirect to other page okay I'm going to send all information to back in to save this information into the database okay if you go back to insomnia this is how we save information right we send post requests to the server and we send the Json data to the server as well okay over here I'm going to put axios called axios and then call Post method and we have to specify the URL that we want to submit data to okay this URL put this over here and the next thing we want to set the data that we want to pass into the server okay and we set name this is Json data okay it says name equal to this name okay and then quantity equal to this quantity price equal to this price and then image equal to this image from text box okay because we use xcos over here we have to import it import xcos from axios okay and because xeos over here we have to use async's await because we have to wait the information respond back to us as well so we put our weight over here because we put our weight over here over here we have to put asynx over here I can get the information respond back to the server for example I put con respawn so whatever is respond back from the server saved is into this variable and then I can put alert like save uh save like respond dot data dot name this is the product name that is respond back and then successfully over here okay then we set it's loading too fast set it's loading to false I want it to redirect to home page after we save information so we are going to use uh use navigate okay over here let's put con let's put navigate equal to use navigate okay and if it doesn't Auto Import you have to import this just navigate from react router Dome okay then we can call navigate this one over here so V1 is to navigate to home page so we put URL root directory okay save it so over here if there is an error it show out the error and then I want to set is loading to false as well okay save it and go back here leave fast and if I want to save new product for example milk and quantity is two price is two image URL let me take the image form pixabay let's mean search for milk okay let me get this one let's copy the image URL let's put like copy image address let's check if we can copy it okay and then put the image URL over here let's put save let me check what is an error server error it's not file uh sorry I forgot uh API in front of this one save okay you should put API over here because if you click on home page you will see API in front of it okay and this one it should have API as well okay let's go back here and let's try to save a product again see it will see safe milk successfully and if we click OK it's redirect to the home page and you will see milk over here alright we successfully create a product alright instead of using alert I think we should chain to use react toast D5 because it can improve the UI and make the UI more beautiful let's search for npmjs.com and then search for reacts toast T5 okay let's click on over here this one okay let's copy this one and stop this one and paste this over here okay then I'm going to run react again npm run Dev okay this is how we use toasty five here you can read the document over here this is how we can use this or you can go to the documentation so I will show you how to use it to save the time okay let's go to reacts to C5 documentation in this document this is how you can implement it so you just copy this one to import a toast D5 into your project you go app.jsx and then you import it over here so we are going to import a toast container on this parent component so we can call it on whatever we want in the choosing component so we use this toast to call it when we want to use it right now we don't use it so I'm going to remove it so the next thing that we have to import we have to import CSS for react toast C5 so copy it and put it over here the next step we have to include toast D5 component in the parent component okay let's go back here and we copy this one and then we include it down here so you include it over here all right save it all right we successfully Implement toast D5 in the application so the next step we are going to call it when we want to use it for example we go to create page I'm going to use it instead of alert over here so I'm going to use this for alert here so this is how you can use this you just call tools like this so I'm going to put toast over here so if you hit enter it will automatically import it on the top here so if it doesn't import you just import it over here okay okay let's go back and styles toast you can put dot over here success so you can style it to be success toast so you just copy this text and put it over here and then you can remove alert okay these look perfect instead of print the error in the console log we can put it in toast D5 as well over here I will call Toast and then I will put dot error and then I will put error Dot message okay then I can remove console log over here so I get uh styles for the tools from the documentation over here see and you can go to usage and go to position toast you will see how the Styles tools for each section for example warning info and you can even position the toast box in your web application as well okay let's create a new product over here let's go to here and create hot doc over here and then let's put 2 2 and let's grab image from pixabay so pixabay.com over here and then type hot dog okay I will grab the first image it's look pretty good look yummy okay let's copy this right click over here and copy image address and then go back here press this over here click on Save okay you will see the toast box over here you see it looked pretty good okay you can close it over here or it's automatically closed okay the next step we are going to implement edits feature over here is edit actually when you want to add it a product you have to pass the ID with the URL so how can we pass the ID with the URL let's check it out okay uh actually we go to home page over here okay and you will see that product component over here so you go to product component over here in link over here right we want to pass the ID the product ID over here so we can put the ID over here okay after edit so I put backslash and then dollar size and then I put product over here and I access to ID okay save it so and you have to go to app.jsx over here you have to put ID over here as well so you put backslash and then ID so this is how you pass the ID via URL okay let's go back here and refresh and then when you click edit you will see ID over here so we get the ID so we can edit everything in the edit page over here so actually a react router don't pass ID via use param okay we can construct ID over here lid IDE we get ID form use param okay make sure that you import this one for example if I want to show ID dial here let me Spade over here I want to show ID over here for example ID something like this and then put ID here save and go back here you will see ID over here all right we get ID so we can retrieve retrieve a product from this ID from the back end if you go to insomnia in back end if you want to fetch a product a single product you use this one use your skate method and use this URL so if you've seen you get a single product okay you can copy this URL okay go back here and then we are going to create a method to get a single product okay I can put con over here get product equal to an arrow function okay and we have to declare is loading over here as well so let's put con is loading set is loading equal to use state and then default valuable is false so when we call this method the application is loading so we said it's loading to true okay and then we call axios so import xcos over here as well and then we send get requests to the server and we put backpick over here and we send this URL to get a single product okay and the ID is different from each product okay we can put ID over here dollar size and then put ID this ID okay okay because we use axios uh we will get the data back so we put the data in response okay because X is over here is a synchronous so we are going to use asynx await so we put our weight and over here we have to put asyncs in front of the Arrow function okay I will create a variable to store a product so over here I create con product okay and then method save the product equal to use state okay and this and this should be Json by default so we put name the default value name is empty and then quantity is empty and then price is empty okay because it's default value it should be empty image is empty okay when our product load we are going to set this product to be this value response value okay we put set product to be name equal to respond.data dot name okay we can copy this one to save time okay and copy this one this one we change to quantity okay copy this one change this one to a price and copy this one change this one to image or because we over here we should use try catch let's put try catch error okay when there is an error we just said it's loading to false and then we just call Toast and error two other message don't forget to import tools up here okay and inside here we just copy this code and put it inside here so after we set the product value we should set is loading too false because there is no loading anymore in our application okay so when our application first load I want to get a single product right so I can call use effect over here so when our application first load this this is the function that's detect our application first load Arrow function inside and then put array over here and then call get product okay save so let's print our product over here let's put div over here let's put a product name okay let's put product dot name this should work okay let's go back here let's refresh okay let's go edit uh there is an error let me inspect what's wrong it's loading is not a function this one should be set it's loading sorry save it oh there is another okay let's check it out again okay this one is not a curry braces so it should be bracket or it should be la something like this okay save it and if you go back here refresh you will see banana over here if you go to Banana page and if you go to Apple page you will see apple over here I want to put this information products inside a text box so I can edit it okay because we have the form in create page we are going to use a desk form to save time so just like hide this one and copy all of them and then go to edit page again and remove this one and paste this over here okay we have to edit this a little bit for the function on submit I will put like update function so update product over here so let's create update product to remove an error for now con update product Arrow function we are going to implement this later on okay and this one we don't have value name anymore over here but we can get is form product.name here okay this one chain to be product dot name and this one chain to be product Dot quantity just copy product over here and paste it in front of the first valuable okay put it over here okay and then for set we don't use set name but we use set product let's remove this uh for now I will explain this later on okay let's remove this for now okay save it and this one which inform save to be update okay save it see you'll get a form okay this still trade uh we change this one to be update this one update a product also we can put a product name over here for example okay then go back here you see update product Apple so if you go back we can add it here update a product banana if you click on update there is nothing happen if you change it we cannot enter anything in this text text box we have to use on change to change the value in text box or the value in product over here okay when a user enters something on change we call on chain and then Arrow function we detect event and then we set product right what we want to set we want to set the value in name here so and the other value we want to keep the same so when we want to keep other value the same we put Json over here and we put dot dot dot product our value is the same we want to change only name so name is equal to even dot Target dot value save okay we go back here refresh we can chain banana right now and this one is changed as well okay I think I'm going to remove this one it's pretty annoying okay we can copy this one and put this over here okay change this one to be Pro product and then paste it over here again and change this one from name to price and this one should be image uh this is quantity sorry save okay let's put let's refresh here quantity okay it's work if you click updates nothing happened because we didn't put anything inside update function yet all right let's Implement update product feature when a user submit this form we have to prevent reload so we put e dot prevent default and we have to pass e from here okay and then we put try catch to detect an error from backend as well an error over here so when that is an error we said it's loading too false set is loading to false and then we toast and error Eller Dot message okay inside here uh I can put this loading over here it is loading to true okay and then inside here we call axios okay and don't forget to import xeos up here as well and Dot put like we use put method for update here uh it's update and then we pass this ID with put method as well so I put back click over here let me copy this one and put this over here so ID is dynamic value so so we put the ID from param see ID and then we pass the data that we want to update with this product okay this product we pass it here with the put method and this URL so because it's xcos over here we have to use a weight to wait until it's done to go to Next Step so when we put a weight over here we have to put asynx over here asins okay save it and after it's done I want to show a message so we call toast over here and we put success then we put update a product successfully and then we go to other page so we use navigate to redirect to home page so over here I put con navigate and I use juice navigate for redirect and it's Auto Import just navigate over here for me so if it doesn't automatically import just navigate you have to import it by yourself okay copy this valuable we are going to call it over here so after its update information I will redirect to home page okay save it okay it should be good right now so let's go to here and then if I want to update banana quantity to 10 so and I click on update why it doesn't work let's inspect again sorry there is another it's loading is not a function oh this one is said it's loading I always make this mistake sorry guys and save it okay let's refresh this one let's update banana form 0 to 10. click on update okay why banana is only four let's update to 11. yes it's 11 right now I don't know what happened one one two update to come one one two so update the price to be 10. let me update again banana to B10 okay it's work there's nothing wrong but I think it's because the catch in the front end so when we refresh it it's worked the same all right The Next Step what we are going to do uh before we jump right into delete feature so I want to put is loading over here because when the form first load is used xcos over here see it's get a product so we should uh put is loading over here over here so let me put this loading over here we detect if the form is loading it's loading okay if it's loading we so show a message loading so else we just print out the form so I call fragment over here and I hide this one and cut it and put it inside here [Music] let me put tab over here one step and this one put this back here save it okay this look cool and if we refresh and if we edit this one change this one to 12 update it it becomes well all right this look good the next feature that we are going to implement is deleting if I click on delete button it should have a pop-up and ask me whether I really want to delete a product okay okay let's go back to the code and then go to products over here and this one instead of using link to edit page we are going to use button okay and this one chain is to be button okay and I'm going to remove two and when we click on this button I want is to call a method so I can create a method up here for example con delete product equal to Arrow function okay and then when I click on this button it should call this method okay we put on click equal to Arrow function and then we call delete product and in delete product we can pass the ID of the product dot ID okay and then we receive the ID over here so we put ID here we can Alert ID here so save and if we go back here so if I click on delete and see I get ID here we just send this ID to server to remove it okay to send the ID we have to use axios okay and don't forget to import xdos over there and then dot delete so we send delete method and then over here you will see delete you can copy this URL and paste it over here this is ID it should be dynamic so we put valuable ID here because we use XL over here we put a weight and when we put our weight over there we put asynx over here okay and then after it successfully delete we should call Toast method so we import tools over here and Dot success and we put delete a product successfully and then I want is to load a product again after it's delete the product so I have to call get product method from the pairing so we have get product method from the parent I will put this over here before I put this over here I will pass this dial from the parent component first okay let's go to home page and then uh this function we are going to pass is to product component let's put get product equal to get product okay and then we go back to product component we get it from here get product and then after we'll successfully delete product we just get the product again uh we should put try catch over here for earlier detection error and then we copy this one put it inside here okay when there is an area we put those over here and then we put Eller and then another message okay save it okay let's go back here and refresh for example I want to delete haddock I can delete see it's delete and it shows the tools box over here so before it's delete I want is to show a confirmation so I have to install Suite alert search for Suite alert sweet alert Tina sweet alert 2. click over here installation here just copy this code and stop this one and paste it over here you press Ctrl C to stop it and then run mpm run div again and let's check how to use it this is how you can use it see uh where is the confirmation dialog box here is the confirmation so you can use it like this so first of all you have to import it to your projects first here you have to import this over here import SWA forms with Alert 2 and then over here before it's going to try catch I want to show a confirmation box so I put con result equal to a weight then I call this one and input fry and then Json value and once I can determine over here I can determine title okay are you sure something like oh I can put like do you really want to delete the product okay and then over here I want it to show button cancel button I can put a cancel button over here to be true an icon can be warning yeah I want it to show warning icon and show cancel button and I can change the confirm button text yes delete it here over here just delete it or just put delete over here you can change this to whatever you want because we use a weight over here we don't have to put then right we just call result over here if result is confirmed so if it's confirmed just go to try cache and delete the product yeah something like this okay let's check it out go back here and go here refresh it and click on delete here see you see the pop-up do you really want to delete the product yes delete it here I did this text is this text and just delete it is the button text you can change the color of the button as well so how you can change it you see cancer color button and confirm button so I can copy this one and put it over here and the color of the button will be changed see okay this work perfectly so if you click on just delete it see it's remove it okay there is one more thing that I want to do I want to refactor the URL over here I want to put this in dot EnV files uh out here here we create dot EnV files dot EnV okay I will create a variable over here to save back-end URL over here it needs to be a capital letter so I put feed underscore back in url equal to I grabbed the URL from source and then component product equal to use equal to this URL okay copy it and go back here I put this over here save it and then I go to apps.jsx I will create a variable to store backend URL form.env I can put feed underscore back in URL equal to import the import is form.env and then put meta dot dot EnV this is how we access to the dnv files and then Dot dot this variable name go to DNB here okay put this over here and we can export this out because we want to use it in other files or in other components so we've export and then we go to home page home.jsx here we use this URL okay we just use that variable instead of this URL okay I remove this code I put backflick instead and remove this one out then I put the other side and then I import the variable over here so I put feed backend URL and it's automatically import for me on top over here if it doesn't import it you have to import it by yourself okay save it let's stop this one because we have create.env and run it again npm run div okay let's go back here okay you see we uh we still get the same result but our code is more clean in every URL in our application we just use this uh variable if the back end URL change in the future we just chain is in dot EnV file so we don't have to change it in each URL okay copy it and then let's go to edit page and paste it over here okay pass control and hit enter control space and then hit enter it will automatically import this for you okay and over here remove this one replace with variable okay and then go to create page over here I change this one to be back thick and this one we import the variable okay then press Ctrl space and hit enter it will automatically import for you save and then go to product okay in product we have the URL over here we'll remove this out and replace with bead backend URL control space and hit enter it will automatically import for you save and let's go back to our application okay it's work the same let me delete one see let me edit one quantity should be one update see everything worked perfectly alright this is all about this video If you like this video don't forget to comment like And subscribe thank you so much for watching

Channel: Devtamin

Views: 8,521

Keywords: programming, code, coding tutorial, programming tutorial, web development, CRUD React JS, React CRUD, Crud Operation in React, React connect to API, React connect to node.js, node and react, backend and react, react connect with backend, React connect to Backend, API React JS, React JS and API, React consume API, React Toasify, React CURD Tailwind, React CRUD TailwindCSS, React Node.js API, React JS Node.js API, Build CRUD React, CRUD React.js, React JS API, React API CRUD

Id: 57rKaQg0XDM

Length: 91min 45sec (5505 seconds)

Published: Tue Aug 15 2023