How to send data from frontend to backend in React JS in 2023 | Connect frontend and backend

hey everyone and welcome to another video in this video I will show you how you can send data from front end to backend in react.js okay so we will see how you can send data to the backend with the help of react.js and we will also store that data in a database and for that database we will use mongodb in this video okay so let's start with the video before starting this video hit the like button and if you are new subscribe to techy web dev and press all notifications so you will never miss any future videos now let's continue with our topic so first of all as you can see here I have already like installed the react package in this file so you can see this app.js here and let me show you the file system here okay so this is the file system I have created two more JS files JavaScript files outside the SRC which is app.js and mongo.js and I have not written anything here these two will be for our backend okay so we will see what we have to write here and in the SRC I have one more file called components in which I have home.js in which also I have not written anything okay we have just this app.js and before starting let me uh tell you what are the dependencies you have to install so I will open my package.json and here you can see these all dependencies you have to install so first of all you have to install this xeos okay so this is the dependency which will help us to connect the front end to the back end okay and this course you have to also install uh it is just it works with exos very well and then Express okay just install Express Mongoose and node mod okay that's it you don't have to install this react router okay uh you can like connect without this also okay and okay so now after installing all these dependencies let's start with the video okay so first of all in our react uh not in our app.js I will just remove this okay and I will import uh home from this components okay so I will write components and slash home that's it and in this div I will write home okay so now in our app.js the home page is there so now uh let some write uh let's write some code for home.js okay so I will write RFC and this will give the snippet this will give the boilerplate all right and now in this boilerplate um let's write some JavaScript code and first of all I have to import x0os okay so don't forget to import this xeos from xzos oops x0s from x0os okay that's it and inside this I will first of all uh okay so first of all let's just write some HTML part then we will come to the okay so first of all uh I will give it a class name called count okay for container and I will write text area which will the name will be the text and I will write a function on change okay so on change what will happen let's say an e and I will write a new state okay so set message I will create a used it here okay so let's say const let's say let's say message okay um message slash set message okay I'm equal to use State okay and this will be empty so I will just changing that message here okay so set message equal to e dot Target Dot value that's it and this will just update the message whenever you are writing something oops okay so whenever you are writing something in this text area this function will just update that value okay and I will also write some place holder okay I will write enter the text that's it and I will also make an input tag which the type of which will be submit okay in order to submit the form all right and I have also want to give an on click function ah and I will write submit here okay and I will give the value here called submit okay and uh I will write these two things inside of form okay so here it is and the action of that form will be post okay and let's just format document all right so the HTML part is done now let's some more JavaScript part okay so I will now create a function okay which will be this submit function okay in order to submit the form so submit is equal to this and I will make this function an async function all right so after making it a sync and I will also pass an argument called e and I will write e Dot we went default okay just in case to avoid any errors and I will write try and catch blocks okay so I will like try and catch and inside this try here um I will write a bit and I will then use that xeos from here okay so axios dot post okay so here it is uh you can use this to like send the data from front end to backend so look carefully and I will write HTTP here you can give you have to give the like URL to the your that particular page in which you are writing a message so I will write http slash slash localhost slash and I will write here 8000 because um in our like app.js when I will be like defining the server I will give the port 8000 okay so you can give any other Port I am giving it 8 000 for now all right and here right column uh comma and in this curly braces you have to give whatever you want to send to the back end so I want this message to be there in the back end okay so I will just write a message and that's how this message will go to the back end okay that's it and let's just write a functioning this here okay for the catch block I will write just e that's it we are done with the home JS part and I hope you understand how you can send this data which is message from this front end to the back end now let's just build the back end part okay so first of all before selecting code for app.js we will write some code for mongodbjs okay so let's write so I will write const mongoose is equal to require and I will write mongoose okay and then I will write Mongoose dot um connect then you have to write this whole um line which I am writing here okay just copy paste it ditto okay uh localhost and two seven zero one seven okay so don't change this number okay you have to keep it the same and after that number um uh like place a slash here and write your database name so you can write anything here so I'm writing react login okay that's it and then you have to write some then and catch here okay so I'm writing an arrow function in this then I am writing here connected okay and in the catch I am writing console log failed that's it our database will be connected then now let's uh make a schema for our like document okay so I will make new uh schema oh let's just make a new schema is equal to new mongoose dot schema okay you have to write this word schema and here just Define your documents so uh our document is only one thing okay document contain one thing which is message MSG and I will write the type here so the type of this will be string okay because the message will be in string format and I will give the required to do okay so you cannot uh just you cannot just uh send an empty message okay you have to write something in here then after this I will write const collection okay so this thing uh is to make a collection okay so you have uh make the database here you have defined the document type here and then you are creating a collection okay so I will write mongoose dot model okay so this model keyword is used to make a collection and then in this codes you have to write the collection name I will just write collection okay a simple just collection you can name it anything and then you have to write new schema so make sure this name and this name should be same ok then one more line here module Dot exports okay is equal to collection okay so make sure to write this line also now one more last thing uh is to design the app.js so let some write in app.js okay so what I will do first of all I will write const Express is equal to require Express okay and I will do the same for this collection here okay so now I am getting the collection from that mongo.js okay so I will write here okay so that's how you will get this this collection in your app.js all right and then I will write const app is equal to Express here and then you have to write some more uh app code okay app.use now you have to write app dot Express Json here okay and then you have to write app dot use uh Express oops Express and Dot URL encoded just like that and in this you have to write an object which is extended and you have to give it value 2. okay and one more app.use in which I will get the course okay which you have already installed now let's write some a code to get the data so I will write app.get and slash because it is in our the first page which is Slash and don't forget to write here course okay and then I will write request dot response here and add a function and that's it uh you can just skip this part okay if you want to this is not important you can just like skip this code here okay and now let's get the data from the front end so I will write app dot post here and from where we are getting uh we are getting from the URL slash okay then this will be in a sync function okay and async function and I will write to the quest dot response this will be an arrow function and here I will Define that message so look carefully and I am writing const in curly braces because it is an object OK in curly brushes message is equal to request dot body so what it will do it will just take this message uh Define a message from request.body so here from here um this exhaust post uh this message okay so it will take this message and here it is converting uh it is making a new variable called const and it is just giving the value okay so I hope you understand this and I will create a object called Data okay it is not important but you can write this okay and I will give message Dot message okay and to okay so we are done uh this from this we have like given the value from Fountain to back end now let's store it in our mongodb okay so for that I will write await and I will write collection okay and Dot this is in mongodb command is called insert many okay inside this I will create an array and in which I will give this data object that's it and we are done with our connection okay uh one more thing okay one last thing you have to also like uh listen this app.js and to give it a port number okay so earlier I have told you I will give it port number 8000 but you can give it any number okay and also I will oops I will console log port connected okay to make sure it is working fine so as you can see here we have written the code for all the uh things we require okay so now let's test it okay if it working or not so for that uh you can just click on this uh Square which is two rectangles here okay it will just open your terminal in two ways okay why you are doing this because you have to connect that back end and also start the react tab okay so in this right over here I will write node mon app.js okay so this will connect the back end okay and oops uh we are getting an error here let's see what is that error we are getting in app Dot JS um okay so we have not uh require that course here okay you have to give it course now let's save it again and see so as you can see here it is giving me Port connected and also connected okay so this the port is also connected and the the database has also been connected okay so our backend is now successfully connected now let's sudden the react file so I am writing npm start so now let's wait till the app starts uh we have to also like see if the data goes to our mongodb Compass okay so let's open the mongodb compass also and okay so in our uh this file it is given either submit is not defined uh so let's check here okay so I will write just let submit okay that's it and yes as you can see here it is showing me the text area and a button to submit here okay and one more thing uh before just checking it I will give it an alert and I will write here submitted okay so whenever you will submit a text it does an alert will appear okay and in our mongodb Compass click on this connect here and you can see a database where it is so yeah react login tute so this is the database so we have created just now and it has no data right now so as you can see here it has zero data so now let's write some here okay write some data so here is the First Data so hit submit and as you can see here it will give it an alert submitted and now let's check in our database and if you just refresh as you can see here and message is there here is the First Data so yes guys that is how you can connect your front end to backend in react.js and I have also shown you how you can store that data in your mongodb so I hope you enjoy this video and learn something new and that's it for this video guys I will see you in the next one [Music] [Music] foreign [Music]

Channel: Techy Web Dev

Views: 31,788

Keywords: axios, mern stack, react, react js, frontend, backend, node js, express js, mongo db, data from frontend to backend, cors

Id: KZB6gtKQ9_I

Length: 21min 15sec (1275 seconds)

Published: Sat Dec 17 2022