React + Node js + MySQL - CRUD Operations | CRUD Rest API with Node and Express

hi everyone in this video we will perform card operation using react with node.js and my SQL database okay so it will be the end result that we get so let's create first of all a new record let's submit it the new record has added so let's read it also we can go back and also we can come to the edit okay we can directly edit it and also we can just press this edit we can edit it new one just new new one okay let's update it see the record has updated successfully so let's delete it see the record has deleted so we perform these cut operations using react with nurchased by the node.js3 we will use Express in the my secret database so let's get started before starting if you are new to my YouTube channel don't forget to subscribe the channel so for this project I have these two folders in this folder in react my sequel okay I have these two folders so now let's move to first of all we will set up our server site okay node.js environment first of all let's move to the server folder and after that we will install a few we will just write npm in it uh minus y okay we will initialize it and we will create a package.json file see the package.json file created inside the server so now let's install a few packages inside inside that we will install first the express expresses the framework upload.js we will use and after that MySQL for the database and the course cards are the cross origin okay it means that whenever we are accessing the API of node.js in our front end so we should use course and also the normal Rodman is used automatically refresh our server side whenever we make changes in that so it will have to refresh them automatically so let's install them here they will be installed yeah the package has installed inside that and for the front end environment I have already created the react app okay this is the reactor which I have created already and let's move now we should create a file inside this that would be like server purchase okay we named it server.js so to use the node one this package that we have installed okay so for that let's come here to the package.json and inside here we will write start nardma server.js our file okay so it will automatically starting this file server.js and also the import is not working in our if we write here for example import Express from Express so this import statement is not working automatically by default so let's add that so to add that we will write here type module so it will work now imported our Express and also let's import MySQL MySQL from my cql and also import chords from cars so now let's initialize our links please we would like to count up is equal to Express function we will call that okay and after that let's seize our course so the used cars we will right after to use course yeah we did it so now let's run our server so for that we will after that listen our server will listen and this port the port would be et1 this is the fourth number and console.log listening so let's stick it we will run our server in VM start see it is listening okay the message has printed it means that our backend side is working right now perfectly so now let's move to our front end for the front end to make this Cloud operation uh what we need let's let's see and we see front end inside front end uh each side front end we should install the axis which is Axis which is a library to post use key git post and delete and put methods of that and also the bootstrap for designing and reactor turn down for routing these packages are we should install them I have already installed them I will show them I will show you them okay I think I don't have so let's install them okay packet.json yeah we don't Outsource install them npm install axis and also the bootstrap in the react router these three packages we will install yeah those three packages has installed so now let's stick see we have those packages bootstrap react reactor down so now let's start our coding also we will start our server fronted server we write in theme start sorry we got an error yeah we should try it in game Run sorry he had restart our front end code let's refresh it see we came here right now we don't have anything just the up campaign so let's snap so inside up first of all I will set up react router down for our home uh company dookie so let's let's create home.jsx add some code inside this and now let's come here to use reactor turn down import browser router browser and routes and also route from reactor after importing them so let's use them now browse the router it's right here routes and also the route inside out we have to parameter first the path the part is just slash for home eating complete and the element is equal to with oh okay let's have imported automatically okay so we created the path for our home company so now let's try it in our home company in the home component we should display our records in the recursive we should fix them from our database okay so the database we are using the mySQL database so let's see the mySQL database I will come to the control panel I am using here so maybe you install separately just the example database but I am using this one okay so let's check that come here to the Local Host and we should move to HP my admin and start teaching admin these are the databases that I have so I will use this card database what we have inside card we have students okay I will just pitch the records of students okay I will just use this student table which I have created and let's come here so to fix the records I will use use effect hook which will run whenever we run our project so it will be run easy fit at the start of the project it will render okay a dependency so here I will just switch my all records okay to pitch that we will use access for that let's first of all import that import access from axis and here we will write our URL our URL would be localhost and our food number was 80 81. this was our port number so let's copy this and paste it here and after that we will get a result and we will just display that result on console but if we got an error let's play that and cancel yeah let's move to our server side code so let's open this one okay and here we will just write the API first we will create connection with my SQL so create the connection with my security will like const an object DB is equal to mySQL dot create connection and it has the properties first one is the host the host is the localhost with us right now and the user user is root videos by default in the MySQL and because I didn't change that then the password the first I didn't see the password for my secure and the database the database name with as was cracked that we saw previously okay the connection with my SQL has created so now let's just write our first API which is just we will we will get all the records from our database so let's write that here we will write up dot git our route would be just slash okay for that and here we will get a callback function and we will get parameters inside that request in response and inside it we will write our query now let's write const SQL is equal to our query would be select Terry from our student email okay select all from our student table then we will learn our query we will write DB dot query we will pass our sqvl and here we will again a function and we will just get an error or a result if there was error so just return result response dot Json a message error inside server else return response .json our result okay so it will return the result and we call that yeah let's start our server our program so let's come here and let's come here and let's move to our console what we are getting in the response see we got the axis error yeah we got axis here so let's check it yeah there is no error with us so let's yeah we got the result okay that need to refresh yeah we got this result okay this data C axis heater and here's inside the data we hope that the card that we had in our database see this record and we had that record here okay this is the record so now let's just change that okay so we will create a variable here a state data set Theta by the name just to sit back the data this method we will call to set the data inside this data we will use the use State hook and this is the narrator with us we should sign that and instead of this console we will just call sit data method okay and to that we will pass result data we will pass our data to that previously we saw this data result the data we will assign to that after assigning that so now let's print that so to print that let's create a table inside the table T buddy inside the table row T8 and the first one would be the ID we will print the ID also and also we should print the name email I think how many properties we have here we have ID name and email and also in action the action is used for deleted update so now let's let's it was T hit sorry beside that now we will use this data okay this variable that we have created so let's use this calibrances in data.map we will use map function and inside this we will create data or just student in objective student in the index index is default with the map function and inside that we will return table rule the table row we will assign a key the key would be index and if you write student.id that is also okay inside that table data and let's print first the ID student dot ID and the name and after that the email so let's check it inside that ID name and email again I didn't email demon and after that we should have two buttons for edit and delete so let's check it how it looks like see we just rated our first card and that looks like this so now we will add some bootstrap design for that so let's first of all import our bootstrap for bootstrap slash slice this is some design here so yeah I'll just added these csis bootstrap classes okay this one and also for the button and I have added this red button also so let's check it yeah it looks like this now okay so now let's add a new button here and the top so whenever we press that we should create we should create it means add a new record so for that let's come here we will add a new button and we will just add that inside let's create a div and here we should use a reactor Dom link okay whenever we paste that we should go to a new route and we should go to a new component so for that let's use react Auto down link put that here import that from react Auto down and this is a property where they need two we should go to create route okay later we will create that and here let's write create plus okay let's start see last name button button uh success plus here deflects justify 18 8 yeah let's see see that's okay now okay so we never refuses we should go to a new company so let's add that route that would be create and we should go to create a component so let's create that component create a GSX right some code inside this let's come here back to our let's import that create after importing that so let's use that here yes so now let's press that button yeah see we came to create component so now here we should have a forum inside that form we should write our videos and submitting so let's come here to the create yeah for Kit I just wrote this code okay in this design because first the video it will take time okay just simply reduce one input field for name and one input field for email and the submitted button just simply this okay so let's stick it yeah it looks like this okay it is the Forum that we have now so now whenever we entered data inside this so we should by pressing the submit we should submit that to the database first we should store the values that we are writing here so for that tool let's create two variables const ant head to you can write is equal to use state and this should be an object top with us and also now we should have here A Name by default empty in Al so the email so now whenever we are writing the editor inside this so let's write that placeholder sorry on change event we should update these videos okay and we will like to create a function and we will just try to see two values and insert that an object the previous videos that we have and also update the name name is equal to with either Target dot value yeah same thing for email also let's come here let's paste it here it should update now the image yeah after updating that whenever we submit this button so let's come here and submit event and we will call a function and submit let's create this function come here const able submit is equal to you will get an event default and after that we will call our ETI and we will just post our data so for that we will write axis first we will import that after importing that post we will try to post the data in our route you are in our URL would be this and also the student we will add we should go to this route okay this URL student and then we will pass our videos our data after that we will get a response present let's cancel that result and also we will get in catch if there was any error long error okay so now let's create this API inside server we will just write up dot post and this should be student and we will get functional request in response here we will light our query Advanced SQL is equal to insert into student and we should insert into the name and email okay name and email and the values would be question marketers label is we will attach them later so let's get the videos cast videos is equal to in Array request dot body dot name and also request start but those are attached with the body and even we will tag them inside the videos so now let's start our qdb.query he said that first was our SQL then we will light our values and after that you will get an error or two parameter iron result if there was an error so just return response.json inside that app the heater just okay else return s are response done and the result so let's check them yeah let's come here and just we will move to console also to see that on the console and just come here a new student the term let's press the submit button press it see we got this error access error over it says it can spawn with the server here we got server error let's come here student uh the error is that we should force our data that we are passing to the Json format so let's see write up dot use and express.json let's check it now so let's press the submit now see we got the result okay see it is okay now affected rows one so let's see it in the inside the student table see any record has added so now whenever we add a new record we should go back to our home component go back to the student list so for that we will use uh just come here we will use use navigate Hook from reactor down so how to use that let's come here const navigate create an instance of that use navigate yeah let us imported see use navigate and let's use it whenever we get a result uh by console.log the result and also navigate it will close to this slash this Home Route okay to this route to the silent mode it means go back to home just come here add a student Let's pre-submit see we came back here that is okay now so we did our creating functionality so now let's read a record we never refuse this little bit and we should read the record and create just come here to the home component and just come here to the read and we'll change it to the link reactor to download I think we already imported that yeah we have imported that so let's add 2 is equal to we should go now to a specific ID okay so for that we will write like this inside this we will go to rate and in the ID what will be the ID we should go to this ID number okay student dot ID okay we will create this route now right then the ID number so let's move to after j6 and create that route and this should be read and also the ID this would be ripped route for the ID and this should be changed to read let's create that reduction come here back okay import the read 2014 so let's use that so now let's press read for example this one see we came to the ID is undefined so let's check that why that is undefined uh let's come here to the oh we should write capital letters let's come here back and come here Max and let's read it see we came to seventh ID and the read this route to the rate okay so now we should display the records of that just come here to the read inside that we will just run use effect hook use effect to whenever we come to this company it will be rendered it will run this us if it took okay Creator dependency inside that we will switch the record list and that ID so to fix the record we will first get the ID okay const how to get the ID we will use use forum um Hook from reactive it will just grab the ID from URL after getting the ID so now we will fetch the record we will write axis that gate and let's create take our URL this would be our URL slash and we will pass our ID plus ID okay read me this record okay get this record from um in that we should add here read okay get by ID and here dot then we will get a result uh just assign the result so let's cancel that console.log result if there was any error so just to catch that [Music] log here that's okay now okay so let's move to our server side and create this route copy this one and just this will be read and also we are getting an ID and here ID then the ID okay we write our routes like this and we will just come here to this route okay plus ID and here okay so let's change our query and our query would be based on the ID so select steric from student where ID is equal to with question mark okay it will attach the ID and now how to get the ID for the idbb light const ID is equal to request dot forums dot ID we will get ID from URL after getting that so now let's just try to sqvl then we will attach our ID here and then we will get to run this query okay selection from student for your ID okay okay yeah okay let's run that let's come here just back in move to the console what we are getting in the result let's come here just press this read begin here we got this result okay see we got this result let's come to the data see we have this data so let's come here and inside read now we will just create our variable here cost student slash sit student is equal to use State okay it is narrator with us and here we will just insert this um call that we will pass Reserve that data after forcing that we will read the records of that now yeah I wrote just this design so now inside this I will read my retards okay too um student detail let's come here and we will just read H2 um ID a student ID and also let me and email we should have a button to go back we should have two button for edit in uh back okay let's create them back this should be a route okay it goes to we should create link from reactive to Doc and 2 is equal to to back to home page we never replace this button last name button button the primary and also one for edit we would like to edit from this place okay to impress this edit we should go back to edit right now we don't have the edit so I will just change this edit route we don't have that we will just change this to the button but we have the home this route inside after this so let's check it uh student detail we didn't get that internet ID so we should write zero array number zero okay in the first array so there is just one record see we got the student detail and we have two buttons so let's make name [Music] will be two and this should be two yeah it's okay now see regardless gmail.com yeah it is okay now so now when you press this button we should come back and we never replace this edit uh sorry what happened we never replace this edit button or we come to the read what is the problem in the read you'll read or is it problem so instead of parting like this let's just try it like this okay let's remove all of these and it will solve the error okay the first re just assign that to the seed student let's appreciate come back and let's come here ready to see we got the reset okay so now we never replace this edit or this edit button so we should move to another component and edit our so just come here to the Avenue rupees here we should change it to the link and 2 is equal to with the setting we should go to edit and also the we should pass the ID would be student turn ID and also if we click on this home in home component and this edit button we should go to the to the link let's copy this paste it here okay we will go to student this will be edit in student.id so let's create this route and this should be heated to inert so we should create a component for the edit our update G6 we can name it update student okay logically but just let's import it inside app.j6 date after inputing it so let's use it update yes okay let's Universe this edit we should come here to the edit if we come here back in physics edit you should come to the update okay so after coming here so first of all we should display a forum and we should display the edit videos in that form and then we should update that record so let's come here to the update uh first of all we will create a forum okay as the simply as we created for our create function we will create the same forum for our update also okay let's simply copy this and paste it here okay and also we know where we are um just updating these values we should store them in inside these videos let's copy that also copy this and let's come here and just Mercedes and we will update these videos but by default what we should do we should have for example whenever we come to the for example let's come here I mean just that's it whenever like I came here to the update section okay in this area I should have the name that I would like to update and also the image that I would like to update so let's come here for that what we should do first of all we should switch that record okay after fetching the ticket we should display the wheelies inside these input Fields then we should submit that okay so let's once I will just come in please yeah okay leave it like this okay let's uh I think everything is okay okay let's come here to the edit uh edit is not working yeah we don't have this handle submitted by action yeah what else we don't have we don't have this new state yeah so let's change a few things update I will show you okay just a minute and change so by default we should have here the name that we would like to update and also the email so for that we will use use effect talk and we will fix the record okay so to fix the regard Force we need the ID so the idb for ID we will use use for our book I I T is equal to use for our book and we will get the ID then we will as we did in the read we will just switch the record let's use the same thing date let's right like this okay yeah we will write we will call the same read around and we will boost to the same API here and we will just select the records and we will teach that record and then we will assign it to the student sit student let's copy this also put it here okay we never receive that inside the student so after that we should assign here the videos student Dot in that email and let's come here we will assign your value is equal to with the um videos dot name and here value is equal to with the values dot email let's check it now everything is okay yes we have this read the record uh let's import use effect use effect talker and after that I use it for talk okay if you state has imported okay let's check it now press the second error that we have console axis is not imported let's import the axis yeah see we have the update student but we don't have those videos so let's check them student sit still value start name and when you start email so let's come here we will just remove the student and also let's right it's like this you will directly update these videos okay instead of that we will write set values and inside that we will write or previous videos and update the name result dot data and Dot name and also update email result dot data the zero Dot email we will directly update him inside his effect of coding so now let's check in see we have those videos let's come back and let's read for example this one so we read that let's come here to the edit see we have this eight of videos so now whenever we update these videos for example are something so so whenever we press this update button we should update the students so let's write code for that let's write down Forum on submit you should call on submit event and uh update let's create this function now cast envelope 8 is equal to variating event dot prevent in default and after that let's write we will first use axis now to pass the data axis dot host we will you know we will just use put function now okay put to method to update our data photo and we will use the route the application for that and let's use for example this time it should be update update and also we should pass our ID that we have okay this ID that we have the ID and then we will pass our data we should write values okay this data the three years of age of this video then we will get a result uh result and also we should go back to our home page okay so for the two videos again navigate hook and let's use that you should go back to home page right here dot cage [Music] yes so let's move to server side and we will create this API up that um we call put me third and here we will use update and also the ID after that request in response it's first of all create our query further let's start counts let's give you is equal to update student and sitter uh sitting name is equal to personal word and also the email the email is equal to question mark where ID is equal to question mark so it is our SQL query so now let's grab the id const id is equal to request dot power dot ID after that we will just run our kddb.query and write our SQL then we will write our request start body sorry to write in array in a request dot body Dot name and then which first of all we are updating our name okay registered body dot email and after that our ID so in our query here our result if there was any hero so just return let's just okay so it is okay let's run to the user interface and update the student let's refresh this yeah change this to the dot net here updated see I see the regard has updated successfully with us see it so after that when you refuse this delete button we should delete the ticket let's come here to the home and inside the home this will be a button on click you should call the handle delete and we should pass the ID to that we will write like this okay dot ID to this function let's create that const in the delete you will get the ID we will just use access dot delete method and we will call route delete and we will pass ID also and then we will get a result but instead of this we will just use location Dot reload function to reload the user interface for us and let's create this API now here after delete and we should have delete slash the ID and after that we will write our query now here all right our query here so I will write my query like this okay delete from student where ID is equal to the question mark okay so let's grab the ID and also we will run our query like this let's copy this paste it here if we grabbed our ID here and here we will just pass the ID okay and the result okay it's okay so now let's delete and ID let's check that out from here to the home delete Plus ID okay so let's check it let's for example delete this one see the record has deleted okay delete this one the record has deleted okay so let's create a new one foreign let's edit it save D updated see the record is updated deleted credit card has deleted so it was all about card operation using react node in my SQL database I hope this video was helpful for you if you like this video so don't forget to subscribe our YouTube channel and like this video comment down and thanks for watching

Channel: Code With Yousaf

Views: 13,690

Keywords: Build CRUD Application with ReactJS NodeJS ExpressJS & Mysql, crud with react node mysql, crud with react express mysql, react node express mysql crud app, node js, express js, react js, node js tutorial, crud react js, create rest api with node js and express, react js crud operation, how to build a rest api with node js and express, building a restfull api with node js and express, react js crud operation with rest api, how to create rest api node js and express, rest api

Id: y5NvOade3sk

Length: 52min 10sec (3130 seconds)

Published: Tue Mar 28 2023